javascript 将值的总和放在圆环图的中心？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20911919/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Put sum of values in center of doughnut chart?
提问by Devil's Advocate
I'm drawing this pie chart:
我正在绘制这个饼图：
using this code:
使用此代码：
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
}
}
}]
}
Is there a way to add the sum of all values to the center of the donut? Like so:
有没有办法将所有值的总和添加到甜甜圈的中心？像这样：
采纳答案by John Archer
There is a plugin for what you want to do: https://github.com/ciprianciurea/chartjs-plugin-doughnutlabel
有一个插件可以满足您的需求：https: //github.com/ciprianciurea/chartjs-plugin-doughnutlabel
回答by markE
As a workaround until the open issue is complete, you could just draw your own total on the canvas element itself.
作为在未解决的问题完成之前的解决方法，您可以在画布元素本身上绘制自己的总数。
You will have to manually calculate the x/y position on the canvas (like [150,100] in this example).
您必须手动计算画布上的 x/y 位置（如本例中的 [150,100]）。
var canvas=document.getElementById("myChart");
var ctx=canvas.getContext("2d");
ctx.font="36px verdana";
ctx.fillText("76",150,100);
回答by Devil's Advocate
I actually ended up doing this:
我实际上最终这样做了：
<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>
When it binds the chart it doesn't overwrite any internal HTML, so this works brilliantly.
当它绑定图表时，它不会覆盖任何内部 HTML，因此这非常有效。
