Chartjs Tortendiagramm, radiale Verschiebung (Offset)

Question

Unterstützt Chartjs 2 die radiale Verschiebung (Versatz) von Tortensegmenten?

Answer 1

Chart.js allein hat keine Möglichkeit, ein Stück wie diese zu schneiden. Aber du kannst immer define your own chart type!

Hierunter unterglieder ich die pie Karte in einen cutOutPie Typ. Die Diagrammklasse konfiguriert die "Kuchenscheiben" mit der Funktion updateElement, also überschreibe ich sie und verschiebe die Position der Elemente. Details finden Sie unter 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>