ChartsJS数字显示了对数

的顶部为一个项目，我在chartsjs做的东西看起来是这样：https://jsfiddle.net/ethernetz/e50fn31m/2/ChartsJS数字显示了对数

我不得不做一些在互联网上四处挖得到了许多中间露面的甜甜圈图，但那正是我想要的。然后我想制作第二张甜甜圈图，这使得项目看起来像这样：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;

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

来源

2017-09-05 Ethernetz

变化的代码在插件以下行：

var text = 60;

这样：

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

基本上，创建一个图表时，它被分配一个id（0基于）。所以您需要根据该图表ID设置文本。

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

这里是working example on JSFiddle

来源

2017-09-05 20:36:25

只用一个“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/

来源

2017-09-05 21:17:08

ChartsJS数字显示了对数

回答

相关问题