ChartJS定製圓環圖中的版本不顯示2.6.0

Question

我有一個自定義甜甜圈ChartJS（圓邊），但無法找到合適的辦法：

1. 使它在2.6.0版本中運行（它在ChartJS 2.0.2下工作得很好，但不在2.6.0下）

2. 在綠色半徑相同的半徑下添加一個靜態紅色圓圈，但是其中一半的線寬（如綠色圓圈所示的軸） - 像這樣

這裏是Plunker

Chart.defaults.RoundedDoughnut = Chart.helpers.clone(Chart.defaults.doughnut); 
    Chart.controllers.RoundedDoughnut = Chart.controllers.doughnut.extend({ 
     draw: function (ease) { 
      var ctx = this.chart.chart.ctx; 

      var easingDecimal = ease || 1; 
      Chart.helpers.each(this.getDataset().metaData, function (arc, index) { 
       arc.transition(easingDecimal).draw(); 

       var vm = arc._view; 
       var radius = (vm.outerRadius + vm.innerRadius)/2; 
       var thickness = (vm.outerRadius - vm.innerRadius)/2; 
       var angle = Math.PI - vm.endAngle - Math.PI/2; 

       ctx.save(); 
       ctx.fillStyle = vm.backgroundColor; 
       ctx.translate(vm.x, vm.y); 
       ctx.beginPath(); 
       ctx.arc(radius * Math.sin(angle), radius * Math.cos(angle), thickness, 0, 2 * Math.PI); 
       ctx.arc(radius * Math.sin(Math.PI), radius * Math.cos(Math.PI), thickness, 0, 2 * Math.PI); 
       ctx.closePath(); 
       ctx.fill(); 
       ctx.restore(); 
      }); 
     }, 
    }); 

    var deliveredData = { 
     labels: [ 
      "Value" 
     ], 
     datasets: [ 
      { 
       data: [85, 15], 
       backgroundColor: [ 
        "#3ec556", 
        "rgba(0,0,0,0)" 
       ], 
       borderWidth: [ 
        0, 0 
       ] 
      }] 
    }; 

    var deliveredOpt = { 
     cutoutPercentage: 88, 
     animation: { 
      animationRotate: true, 
      duration: 3000 
     }, 
     legend: { 
      display: false 
     }, 
     tooltips: { 
      enabled: false 
     } 
    }; 

    var chart = new Chart($('#myChart'), { 
     type: 'RoundedDoughnut', 
     data: deliveredData, 
     options: deliveredOpt 
    }); 

Answer 1

對於問題＃1的問題是與draw函數內this.getDataset().metaData。它正在返回undefined，所以Chart.helpers.each下的功能不會執行

請嘗試this.getMeta().data。

編輯： 對於問題2，你可以參考這個其他堆棧溢出問題： Charts.js: thin donut chart background