Chartjs円グラフ、ラジアルディスプレースメント（オフセット）

Question

Chartjs 2は円グラフの半径方向変位（オフセット）をサポートしていますか？

Answer 1

だけでChart.jsは次のように曲をカットするオプションはありません。しかし、いつでもdefine your own chart typeすることができます！

ここではpieチャートをcutOutPieタイプにサブクラス化します。チャートクラスはupdateElement関数を使って "円のスライス"を構成するので、それを上書きして要素の位置をシフトします。詳細はreading the sourceで見つけることができます。

Chart.defaults.cutOutPie = Chart.helpers.clone(Chart.defaults.pie); 
 

 
Chart.controllers.cutOutPie = Chart.controllers.pie.extend({ 
 
    updateElement: function(arc, index, reset) { 
 
     Chart.controllers.pie.prototype.updateElement.call(this, arc, index, reset); 
 
     var displacement = this.getDataset().displacements[index]||0; 
 
     var model = arc._model; 
 
     var angle = model.startAngle + model.circumference/2; 
 
     model.x += Math.cos(angle) * displacement; 
 
     model.y += Math.sin(angle) * displacement; 
 
    } 
 
}); 
 

 
new Chart('chart', { 
 
    type: 'cutOutPie', 
 
    data: { 
 
     labels: ['a', 'b', 'c', 'd', 'e', 'f'], 
 
     datasets: [{ 
 
      data: [1, 7, 2, 8, 3, 9], 
 
      backgroundColor: ['red', 'orange', 'green', 'gold', 'pink', 'blue'], 
 
      displacements: [0, 0, 40, 0, 0, 16], 
 
     }], 
 
    }, 
 
});

<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> 
 
<canvas id="chart" width="400" height="300"></canvas>