文章/答案/技术大牛

发布

社区首页 >问答首页 >是否将值的总和放在甜甜圈图表的中心？

问是否将值的总和放在甜甜圈图表的中心？
EN

Stack Overflow用户

提问于 2014-01-04 04:12:27

回答 3查看 15.8K关注 0票数 5

我在画这张饼图：

使用以下代码：

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

有没有办法把所有值的总和加到甜甜圈的中心？如下所示：

javascript

html5-canvas

chart.js

回答 3

Stack Overflow用户

回答已采纳

发布于 2019-04-16 22:33:59

有一个插件可以完成你想要做的事情：https://github.com/ciprianciurea/chartjs-plugin-doughnutlabel

票数 2

Stack Overflow用户

发布于 2014-01-04 05:15:29

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

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

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

票数 3

Stack Overflow用户

发布于 2014-01-04 05:32:05

我实际上是这样做的：

<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，所以它工作得很好。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/20911919

复制

相似问题

问是否将值的总和放在甜甜圈图表的中心？
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否将值的总和放在甜甜圈图表的中心？EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否将值的总和放在甜甜圈图表的中心？
EN