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

Question

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

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

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

Answer 3

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

var legendHeight =  chart.legend.height;

textY = height / 2 + legendHeight/2;

添加这些将解决这个问题。

Answer 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);