如何使用Chart.js 3.2.1版在圆环图中添加文本

zfycwa2u  于 2022-11-06  发布在  Chart.js
关注(0)|答案(3)|浏览(223)

1.我正在使用的HTML使用画布,如何使用添加内的文字圆环图。这里是我的javascript代码和HTML代码。我用图表js版本3.2.1,所以请给同一版本的解决方案(3)。
第一个

flvtvl50

flvtvl501#

你必须使用一个自定义插件
第一个

rslzwgfq

rslzwgfq3#

我正在使用chartjs 3.9.1版做一个内联插件。我已经调整了其他答案以满足我的需要,其中考虑了图表标题和图例。圆圈中心的文本也是基于第0个数据集的总数。

plugins: [{
    id: 'doughnutInteriorText',
    beforeDraw: function(chart) {
        var width = chart.chartArea.width,
        height = chart.chartArea.height,
        ctx = chart.ctx;

        ctx.restore();
        var fontSize = (height / 114).toFixed(2);
        ctx.font = fontSize + "em sans-serif";
        ctx.textBaseline = "middle";

        var text = chart.data.datasets[0].data.reduce((partialSum, a) => partialSum + a, 0),
        textX = Math.round((width - ctx.measureText(text).width) / 2),
        textY = (height / 2) + chart.legend.height + chart.titleBlock.height;

        ctx.fillText(text, textX, textY);
        ctx.save();
    }
}]

相关问题