Javascript ChartJS编号显示在编号的顶部

对于一个项目，我在chartjs中制作了一些东西，看起来像这样：

我不得不在网上到处挖个圈，让我在炸圈饼图中间看到一个数字，但这正是我想要的。然后我想制作第二个油炸圈饼图，它使项目看起来像这样：

如您所见，完成图中的“60”显示在未完成图中的“40”之上，反之亦然

我怀疑这与我从未指定要在此处编辑的图形有关：

Chart.pluginService.register({
    beforeDraw: function(chart) {
        var width = chart.chart.width,
            height = chart.chart.height,
            ctx = chart.chart.ctx;

---

…但我不知道如何修复它。任何帮助都将不胜感激。

更改插件中的以下代码行：

var text = 60;

var text = chart.id == 0 ? 60 : 40;

对此：

var text = 60;

var text = chart.id == 0 ? 60 : 40;

基本上，创建图表时，会为其分配一个

id

（基于0）。因此，您需要根据该图表id设置文本

此外，您无需添加两个单独的插件，因为您正在创建一个全局插件，它将应用于所有图表

---

以下是更改插件中以下代码行的方法：

var text = 60;

var text = chart.id == 0 ? 60 : 40;

对此：

var text = 60;

var text = chart.id == 0 ? 60 : 40;

基本上，创建图表时，会为其分配一个

id

（基于0）。因此，您需要根据该图表id设置文本

此外，您无需添加两个单独的插件，因为您正在创建一个全局插件，它将应用于所有图表

这里是一个

对所有图表只使用一个“chart.pluginService.register”，因为它订阅了chart类，所以mychart和mychart2属于chart类，所以不要使用回调“chart”。。。使用mychart和mychart2而不是回调来识别每个注册的图表

新代码：

var charts = [{
            current: myChart
              , text: 60
              }, {
            current: myChart2
              , text: 40
              }];

Chart.pluginService.register({
    beforeDraw: function(chart) {
            for (var iterator of charts) {
                var width = iterator.current.chart.width,
                    height = iterator.current.chart.height,
                    ctx = iterator.current.chart.ctx;
                    //ctx.clearRect(0, 0, width, height);
                        //ctx.restore(); dont clear, this delete the previous chart, drawing only text
                var fontSize = (height / 114).toFixed(2);
                ctx.font = fontSize + "em lato";
                ctx.fillStyle = "rgba(0,0,0, 0.85)"
                ctx.textBaseline = "middle";
                var text = iterator.text,
                            textX = Math.round((width - ctx.measureText(text).width) / 2),
                            textY = height / 2.5;
                ctx.fillText(text, textX, textY);
                ctx.save();
        }
    }
});

更新的JSFIDLE:

对所有图表只使用一个“chart.pluginService.register”，因为它订阅了chart类，所以mychart和mychart2属于chart类，所以不要使用回调“chart”。。。使用mychart和mychart2而不是回调来识别每个注册的图表

新代码：

var charts = [{
            current: myChart
              , text: 60
              }, {
            current: myChart2
              , text: 40
              }];

Chart.pluginService.register({
    beforeDraw: function(chart) {
            for (var iterator of charts) {
                var width = iterator.current.chart.width,
                    height = iterator.current.chart.height,
                    ctx = iterator.current.chart.ctx;
                    //ctx.clearRect(0, 0, width, height);
                        //ctx.restore(); dont clear, this delete the previous chart, drawing only text
                var fontSize = (height / 114).toFixed(2);
                ctx.font = fontSize + "em lato";
                ctx.fillStyle = "rgba(0,0,0, 0.85)"
                ctx.textBaseline = "middle";
                var text = iterator.text,
                            textX = Math.round((width - ctx.measureText(text).width) / 2),
                            textY = height / 2.5;
                ctx.fillText(text, textX, textY);
                ctx.save();
        }
    }
});

更新的JSFIDLE: