将值的总和放在圆环图的中心？答案

【问题标题】：Put sum of values in center of doughnut chart?将值的总和放在圆环图的中心？
【发布时间】：2014-01-21 14:39:55
【问题描述】：

我正在画这个饼图：

使用此代码：

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
            }
        }
    }]
}

有没有办法将所有值的总和添加到甜甜圈的中心？像这样：

【问题讨论】：

此功能在github中是一个未解决的问题
@SaravanaKumar 所指的问题已关闭。你现在可以使用这个插件了：github.com/ciprianciurea/chartjs-plugin-doughnutlabel

标签： javascript html5-canvas chart.js

【解决方案1】：

在未解决的问题完成之前，作为一种解决方法，您可以在画布元素本身上绘制自己的总数。

您必须手动计算画布上的 x/y 位置（如本例中的 [150,100]）。

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

【讨论】：

【解决方案2】：

有一个你想做的插件：https://github.com/ciprianciurea/chartjs-plugin-doughnutlabel

【讨论】：

有没有办法禁用圆环图中的标签，只在图表中心显示标签？使用插件时，图表标签始终显示，即使工具提示和图例被禁用。这里有一个来自官方 github 文档的示例：stackblitz.com/edit/…
@Ben 这有点奇怪，因为ciprianciurea.github.io/chartjs-plugin-doughnutlabel/samples/… 上的示例没有显示标签。但是 Angular 应用程序似乎有这个“错误”！？而且我看不出代码的区别。也许你应该在它的 Git 中心页面上打开一个问题。
将以下代码添加到插件选项为我解决了这个问题：datalabels: { display: false }

【解决方案3】：

我实际上最终这样做了：

<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，因此效果非常好。

【讨论】：