将值的总和放在圆环图的中心? [英] Put sum of values in center of doughnut chart?

查看:143
本文介绍了将值的总和放在圆环图的中心?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在绘制这个饼图:

使用此代码:

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:

推荐答案

作为一个解决方法,直到打开问题完成,您可以在canvas元素本身上绘制自己的总数。

As a workaround until the open issue is complete, you could just draw your own total on the canvas element itself.

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

You will have to manually calculate the x/y position on the canvas (like [150,100] in this example).

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

这篇关于将值的总和放在圆环图的中心?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆