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數字顯示了對數

回答

相關問題