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

Question

我想创建一个包含两个值的甜甜圈图。单击图表应在中心打印值。我在 Whosebug similar to my requirement. I would like to use latest Chart.js library from github 中找到了解决方案。此功能在最新的 Chart.js 中可用吗？

Answer 1

在Chart.jsv2.x

中肯定可以做这样的事情

我认为最好的方法是使用插件。事实上，Cmyker awnser 你链接到的问题甚至更新了他的帖子以展示这在 Charts.js v2.x

中是如何工作的

查看他的fiddle：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

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

var legendHeight =  chart.legend.height;

textY = height / 2 + legendHeight/2;

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

Answer 3

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

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

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

How to add text in centre of the doughnut chart using Chart.js?

javascript

jquery

charts

chart.js

chart.js2