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

Question

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

Answer 1

在Chart.js v2.x中可以做到这样的事情

我认为最好的方法是使用插件.实际上,Cmyker对你链接的问题的更加重要甚至更新了他的帖子,以展示这在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>