如何使用 Chart.js 在圆环图的中心添加文本？答案

【问题标题】：How to add text in centre of the doughnut chart using Chart.js?如何使用 Chart.js 在圆环图的中心添加文本？
【发布时间】：2016-08-02 15:37:13
【问题描述】：

我想创建一个包含两个值的圆环图。单击图表应在中心打印值。我在stackoverflow 中找到了与我的要求类似的解决方案。我想使用来自github 的最新 Chart.js 库。最新的 Chart.js 是否提供此功能？

【问题讨论】：

标签： javascript jquery charts chart.js chart.js2

【解决方案1】：

在 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();
  }
});

【讨论】：

更新图表时有没有办法更改filltext？
有没有办法改变字体系列？
Chart.pluginService.register 选择所有图表如何在此处选择特定图表
稍微扩展一下（如果一页上有多个图表）var text = $('#'+chart.canvas.id).attr('data-centerval'); 和 <canvas id="chart-claimed" data-centerval="37.2%"></canvas>

【解决方案2】：

您还可以在配置中添加一个参数并将其用作文本：

    "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>

【讨论】：

【解决方案3】：

大卫的回答非常好。谢谢。我想补充一点，文本并没有真正集中，因为它没有考虑图例高度。

var legendHeight =  chart.legend.height;

textY = height / 2 + legendHeight/2;

添加这些将解决此问题。

【讨论】：

【解决方案4】：

这是最新版本的 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);

【讨论】：

这似乎不适用于更新文本