Javascript 使用Chart.js在一个页面上显示多个甜甜圈图表，文本位于中间

我在一个带有chart.js的网页上显示了一个甜甜圈图表，其中一些文本位于甜甜圈的中心。问题在于在同一页上添加多个dounghnut图表时。中心文本在所有图表上重叠

结果是这样的

这是一把小提琴：

HTML代码：

`

---

“

不需要为不同的图表注册单独的插件。这可以通过为两个图表注册一个插件来实现

另外，你的图表插件也有一些缺陷。这是插件的正确版本

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 = chart.config.options.elements.center.text,
            textX = Math.round((width - ctx.measureText(text).width) / 2),
            textY = height / 2;
        ctx.fillText(text, textX, textY);
        ctx.save();
    }
});

您还需要为两个图表设置以下选项

elements: {
    center: {
        text: '50%' //set as you wish
    }
}

ᴅᴇᴍᴏ

Chart.pluginService.register({
绘制前：函数（图表）{
变量宽度=chart.chart.width，
高度=chart.chart.height，
ctx=chart.chart.ctx；
ctx.restore（）；
变量fontSize=（高度/114）.toFixed（2）；
ctx.font=fontSize+“em无衬线”；
ctx.textb基线=“中间”；
var text=chart.config.options.elements.center.text，
textX=数学圆（（宽度-ctx.measureText（text.width）/2），
textY=高度/2；
ctx.fillText（text，textX，textY）；
ctx.save（）；
}
});
//图表1
风险值数据={
标签：[“红色”、“蓝色”]，
数据集：[{
数据：[50,50]，
背景颜色：[“#FF6384”、“#36A2EB”]，
hoverBackgroundColor:[“#FF6384”、“#36A2EB”]
}]
};
var promisedDeliveryChart=新图表（document.getElementById（'myChart1'）{
键入：“甜甜圈”，
数据：数据，
选项：{
要素：{
中心：{
text:'50%'//按您的意愿设置
}
},
门诊量：75，
图例：{
显示：假
}
}
});
//图表2
风险值数据={
标签：[“红色”、“蓝色”]，
数据集：[{
数据：[75,25]，
背景颜色：[“#FF6384”、“#36A2EB”]，
hoverBackgroundColor:[“#FF6384”、“#36A2EB”]
}]
};
var promisedDeliveryChart=新图表（document.getElementById（'myChart2'）{
键入：“甜甜圈”，
数据：数据，
选项：{
要素：{
中心：{
text:'75%'//按您的意愿设置
}
},
门诊量：75，
图例：{
显示：假
}
}
});
行：98替换为：实际上文本是正确的，但X和Y坐标相同，因此重叠。我在这里增加了Y轴，所以它下降了（若你们想保持上侧，减少Y轴的值），而X使相同，所以两者都从相同的位置开始

ctx.fillText（text，textX，textY+25）
 我仍然需要解决方案。如果你能帮忙，那太好了。
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 = chart.config.options.elements.center.text,
            textX = Math.round((width - ctx.measureText(text).width) / 2),
            textY = height / 2;
        ctx.fillText(text, textX, textY);
        ctx.save();
    }
});

elements: {
    center: {
        text: '50%' //set as you wish
    }
}