我想创建一个有两个值的甜甜圈图。单击图表应在中心打印值。我在stackoverflow中找到了一个与我的要求类似的解决方案。我想使用来自github的最新 Chart.js 库。最新的 Chart.js 是否提供此功能?
问问题
18853 次
4 回答
16
在 Chart.js v2.x 中当然可以做这样的事情
我认为最好的方法是使用插件。事实上,Cmyker awnser对您链接到的问题甚至更新了他的帖子,以展示这将如何在 Charts.js v2.x 中工作
见他的小提琴:https ://jsfiddle.net/cmyker/ooxdL2vj/
以及相应的插件定义:
Chart.pluginService.register({
beforeDraw: function(chart) {
var width = chart.chart.width,
height = chart.chart.height,
ctx = chart.chart.ctx;
ctx.restore();
var fontSize = (height / 114).toFixed(2);
ctx.font = fontSize + "em sans-serif";
ctx.textBaseline = "middle";
var text = "75%",
textX = Math.round((width - ctx.measureText(text).width) / 2),
textY = height / 2;
ctx.fillText(text, textX, textY);
ctx.save();
}
});
于 2016-08-03T17:32:21.293 回答
7
您还可以在配置中添加参数并将其用作文本:
"options": {
title: {
display: true,
position: "bottom",
text: 'Upcoming Meetings'
},
legend: {
display: false
},
centertext: "123"
}
并且 javascript 看起来与此类似(请注意:甜甜圈有一个标题但没有图例,定位居中的文本以某种方式进行试验):
<script>
Chart.pluginService.register({
beforeDraw: function (chart) {
if (chart.options.centertext) {
var width = chart.chart.width,
height = chart.chart.height,
ctx = chart.chart.ctx;
ctx.restore();
var fontSize = (height / 80).toFixed(2); // was: 114
ctx.font = fontSize + "em sans-serif";
ctx.textBaseline = "middle";
var text = chart.options.centertext, // "75%",
textX = Math.round((width - ctx.measureText(text).width) / 2),
textY = height / 2 - (chart.titleBlock.height - 15);
ctx.fillText(text, textX, textY);
ctx.save();
}
}
});
</script>
于 2017-10-06T20:07:34.190 回答
2
大卫的回答非常好。谢谢。我想补充一点,文本并没有真正集中,因为它没有考虑到图例的高度。
var legendHeight = chart.legend.height;
textY = height / 2 + legendHeight/2;
添加这些将解决这个问题。
于 2017-06-20T04:17:33.500 回答
2
这是最新版本的 ChartJs (07/23/2021)
我定制了插件以使其工作 - 我无法仅通过复制和粘贴来使其工作。当我开始工作时,除以 1.87。
let textY = height / 2
->let textY = height / 1.87
const centerDoughnutPlugin = {
id: "annotateDoughnutCenter",
beforeDraw: (chart) => {
let width = chart.width;
let height = chart.height;
let ctx = chart.ctx;
ctx.restore();
let fontSize = (height / 114).toFixed(2);
ctx.font = fontSize + "em sans-serif";
ctx.textBaseline = "middle";
let text = "75%";
let textX = Math.round((width - ctx.measureText(text).width) / 2);
let textY = height / 1.87;
console.log("text x: ", textX);
console.log("text y: ", textY);
ctx.fillText(text, textX, textY);
ctx.save();
},
};
// Register Donut Plugin
Chart.register(centerDoughnutPlugin);
于 2021-07-23T21:52:08.850 回答