1.我正在使用的HTML使用画布,如何使用添加内的文字圆环图。这里是我的javascript代码和HTML代码。我用图表js版本3.2.1,所以请给同一版本的解决方案(3)。第一个
flvtvl501#
你必须使用一个自定义插件第一个
9rbhqvlz2#
第一个
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(); }}]
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();
}
}]
3条答案
按热度按时间flvtvl501#
你必须使用一个自定义插件
第一个
9rbhqvlz2#
第一个
rslzwgfq3#
我正在使用chartjs 3.9.1版做一个内联插件。我已经调整了其他答案以满足我的需要,其中考虑了图表标题和图例。圆圈中心的文本也是基于第0个数据集的总数。