Укажите сумму значений в центре диаграммы пончиков?

Question

Я рисую эту круговую диаграмму:

, используя этот код:

dxPieChart: { 
    dataSource: dsAlarmsBySeverity, 
    size: { 
     width: 275, 
     height: 150 
    }, 
    palette: ['#FFFF00', '#FF9900', '#CC3300', '#33CC33', '#0066FF'], 
    legend: { 
     backgroundColor: '#FCFCFC', 
     border: { 
       color: 'black', 
       width: .5, 
       visible: true, 
       cornerRadius: 10 
     }, 
     verticalAlign: 'middle' 
    }, 
    series: [{ 
     type: 'doughnut', 
     argumentField: 'severity', 
     valueField: 'count', 
     label: { 
      visible: false, 
      font: { 
       size: 16 
      }, 
      connector: { 
       visible: true, 
       width: 0.5 
      }, 
      position: 'columns', 
      customizeText: function(arg) { 
       return arg.argumentText 
      } 
     }, 
     border: { 
      color: 'black', 
      width: .5, 
      visible: true 
     }, 
     hoverStyle: { 
      border: { 
       color: 'black', 
       width: .5, 
       visible: true 
      } 
     } 
    }] 
} 

Есть ли способ, чтобы добавить сумму всех значений в центре бублика? Как так:

Answer 1

В качестве временного решения, пока открытый вопрос не является полным, вы можете просто сделать свое собственное всего на самом холсте элементе.

Вам необходимо вручную вычислить положение x/y на холсте (например, [150,100] в этом примере).

var canvas=document.getElementById("myChart"); 
var ctx=canvas.getContext("2d"); 
ctx.font="36px verdana"; 
ctx.fillText("76",150,100); 

Answer 2

Я на самом деле в конечном итоге делает это:

<div style="position: relative;" data-bind="dxPieChart: { 
    //chart initialization code from above... 
}"> 
    <div style="position: absolute; top: 50%; margin-top: -15px; left: 50%; font-size: 30px; line-height: 30px; margin-left: -50px; width: 100px; text-align: center;" data-bind="text: alarmIDs().length"></div> 
    <div style="position: absolute; top: 50%; margin-top: 15px; left: 50%; font-size: 15px; line-height: 15px; margin-left: -50px; width: 100px; text-align: center;">alarms</div> 
</div> 

Когда он связывает диаграмму не перезаписать какой-либо внутренний HTML, так что это работает блестяще.