Question

对于一个项目，我在chartjs中创建了一些内容：https://jsfiddle.net/ethernetz/e50fn31m/2/

我不得不在互联网上进行一些挖掘，以便在甜甜圈图中间显示一个数字，但这正是我想要的。然后我想制作第二个圆环图，这使项目看起来像这样：https://jsfiddle.net/ethernetz/4uw1ksu1/

如您所见，完成图中的“60”显示在未完成图的“40”之上，反之亦然。

我怀疑它与我有关，从未在此处指定我想要编辑的图表：

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

...但我不知道如何解决它。任何帮助将不胜感激。

Answer 1

更改插件中的以下代码行：

var text = 60;

到此：

var text = chart.id == 0 ? 60 : 40;

基本上，在创建图表时，会为其分配 id （基于0）。所以你需要根据该图表ID设置文本。

此外，的无需添加两个单独的插件，因为您正在创建一个全局插件，该插件将应用于您的所有图表。

以下是working example on JSFiddle

Answer 2

对所有图表只使用一个“chart.pluginService.register”，因为它订阅图表类，所以mychart和mychart2属于图表类，然后不使用回调“图表”...使用mychart和mychart2而不是回调来识别每个已注册的图表。

新代码：

var charts = [{
            current: myChart
              , text: 60
              }, {
            current: myChart2
              , text: 40
              }];

Chart.pluginService.register({
    beforeDraw: function(chart) {
            for (var iterator of charts) {
                var width = iterator.current.chart.width,
                    height = iterator.current.chart.height,
                    ctx = iterator.current.chart.ctx;
                    //ctx.clearRect(0, 0, width, height);
                        //ctx.restore(); dont clear, this delete the previous chart, drawing only text
                var fontSize = (height / 114).toFixed(2);
                ctx.font = fontSize + "em lato";
                ctx.fillStyle = "rgba(0,0,0, 0.85)"
                ctx.textBaseline = "middle";
                var text = iterator.text,
                            textX = Math.round((width - ctx.measureText(text).width) / 2),
                            textY = height / 2.5;
                ctx.fillText(text, textX, textY);
                ctx.save();
        }
    }
});

更新了jsfiddle：https://jsfiddle.net/4uw1ksu1/2/

ChartJS编号显示在数字

2 个答案: