Встроенный уникальный идентификатор в Chart.js сегментах?

Question

Я хочу, чтобы моя круговая диаграмма была интерактивной, позволяя пользователю дважды щелкнуть по фрагменту, чтобы развернуть его. Я считаю, что способ сделать это - создать обработчик onclick на холсте и использовать getSegmentsAtEvent(), чтобы определить, какой щелчок был нажат.

Данные сегмента, возвращенные вызовом getSegmentsAtEvent(), возможно, неоднозначны. Вот пример из возвращаемых данных:

[{ 
    "circumference": 4.1887902047863905, 
    "endAngle": 8.901179185171081, 
    "fillColor": "#FF5A5E", 
    "highlightColor": "#FF5A5E", 
    "innerRadius": 0, 
    "label": "Red", 
    "outerRadius": 99.5, 
    "showStroke": true, 
    "startAngle": 4.71238898038469, 
    "strokeColor": "#fff", 
    "strokeWidth": 2, 
    "value": 300 
}] 

Из этих полей, только value, fillColor, highlightColor и label поставляются со мной, и ни один из них не обязательно являются уникальными. Я мог бы гарантировать, что label уникален, но это может сделать его менее читаемым для людей.

Я попытался добавить дополнительное свойство (например, «id») в данные, которые я передаю в Pie(), но он удаляется, когда я получаю данные сегмента от этого вызова. Есть ли способ добавить свойство к каждому сегменту, которое я могу использовать для позитивной идентификации, без перегрузки поля label?

Answer 1

Вам нужно будет либо переопределить круговую диаграмму, либо создать новый тип диаграммы, который наследуется от пирога.

Вот пример нового типа диаграммы, я передал новый атрибут с именем id, и тогда единственная вещь, которая должна быть другой в этой диаграмме, заключается в том, что при добавлении данных этот идентификатор должен быть передан в ДИАГРАММА

Chart.types.Pie.extend({ 
 
    name: "PieUnique", 
 
    addData: function (segment, atIndex, silent) { 
 
     var index = atIndex || this.segments.length; 
 
     this.segments.splice(index, 0, new this.SegmentArc({ 
 
      value: segment.value, 
 
      outerRadius: (this.options.animateScale) ? 0 : this.outerRadius, 
 
      innerRadius: (this.options.animateScale) ? 0 : (this.outerRadius/100) * this.options.percentageInnerCutout, 
 
      fillColor: segment.color, 
 
      highlightColor: segment.highlight || segment.color, 
 
      showStroke: this.options.segmentShowStroke, 
 
      strokeWidth: this.options.segmentStrokeWidth, 
 
      strokeColor: this.options.segmentStrokeColor, 
 
      startAngle: Math.PI * this.options.startAngle, 
 
      circumference: (this.options.animateRotate) ? 0 : this.calculateCircumference(segment.value), 
 
      label: segment.label, 
 
      //add option passed 
 
      id: segment.id 
 
     })); 
 
     if (!silent) { 
 
      this.reflow(); 
 
      this.update(); 
 
     } 
 
    }, 
 
}); 
 

 
var pieData = [{ 
 
    value: 300, 
 
    color: "#F7464A", 
 
    highlight: "#FF5A5E", 
 
    label: "Red", 
 
    id: "1-upi" 
 
}, { 
 
    value: 50, 
 
    color: "#46BFBD", 
 
    highlight: "#5AD3D1", 
 
    label: "Green", 
 
    id: "2-upi" 
 
}, { 
 
    value: 100, 
 
    color: "#FDB45C", 
 
    highlight: "#FFC870", 
 
    label: "Yellow", 
 
    id: "3-upi" 
 
}, { 
 
    value: 40, 
 
    color: "#949FB1", 
 
    highlight: "#A8B3C5", 
 
    label: "Grey", 
 
    id: "4-upi" 
 
}, { 
 
    value: 120, 
 
    color: "#4D5360", 
 
    highlight: "#616774", 
 
    label: "Dark Grey", 
 
    id: "5-upi" 
 
} 
 

 
]; 
 

 

 
var ctx = document.getElementById("chart-area").getContext("2d"); 
 
window.myPie = new Chart(ctx).PieUnique(pieData); 
 

 
document.getElementById("chart-area").onclick = function (evt) { 
 
    var activePoints = window.myPie.getSegmentsAtEvent(evt); 
 
    //you can now access the id at activePoints[0].id 
 
    console.log(activePoints); 
 

 

 
};

<script src="https://raw.githack.com/leighquince/Chart.js/master/Chart.js"></script> 
 
<canvas id="chart-area" width="400"></canvas>