Question

我有两个圆环图：https://jsfiddle.net/ethernetz/4uw1ksu1/7/

我想知道如何在一张图表的中间写一个数字，但如果我不想把它放在另一张图的中间呢？

基本上，我该怎么做：

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

        ctx.clearRect(0, 0, width, height);
        ctx.restore();
        var fontSize = (height / 114).toFixed(2);
        ctx.font = fontSize + "em lato";
        ctx.fillStyle = "rgba(0,0,0, 0.85)"
        ctx.textBaseline = "middle";

        var text = 60,
            textX = Math.round((width - ctx.measureText(text).width) / 2),
            textY = height / 2.5;

        ctx.fillText(text, textX, textY);
        ctx.save();
    }
});

目标特定图表？

Answer 1

不太熟悉chart.js，但看起来你可以利用options对象。在插件代码中，您可以查找isNumberShown之类的选项，并根据布尔值添加文本。然后，您只需在每个实例中提供该属性。

示例：https://jsfiddle.net/28j9tgcc/

Answer 2

您可以在每个图表的选项中创建另一个变量，可以在插件函数内部进行检查。然后根据额外的选项变量添加文本。

图表中的选项：

 options: {
    chartExtraOption: 1,

插件中的if语句：

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

    ctx.clearRect(0, 0, width, height);
    ctx.restore();
    var fontSize = (height / 114).toFixed(2);
    ctx.font = fontSize + "em lato";
    ctx.fillStyle = "rgba(0,0,0, 0.85)"
    ctx.textBaseline = "middle";

            if (chart.config.options.chartExtraOption == 1) {
                var textX = Math.round((width-ctx.measureText(text).width)/1.1),
        textY = height / 2.5,
        text = 60;
            ctx.fillText(text, textX, textY);
        ctx.save();
        }
    else{
            var textX = Math.round((width-ctx.measureText(text).width)/1.1),
        textY = height / 2.5,
        text = 40;
            ctx.fillText(text, textX, textY);
        ctx.save();
    }
}
});

这是你改变的小提琴手： https://jsfiddle.net/bozhfmq6/1/

ChartsJS只在一个图表中间显示数字

2 个答案: