是否可以在ChartJS的圆环图中为分段添加更多属性

Is it possible to add more attributes to segement in a Doughnut chart of Chart JS?

本文关键字：分段 添加 属性 圆环图 ChartJS 是否      更新时间：2023-09-26

初始化甜甜圈图（或任何其他图表）时，是否可以为每个分段添加更多属性？目前，我们正在为四个属性设置值——值、颜色、高亮显示和标签。我想在初始化图表数据时再添加几个属性，这样我就可以在单击图表并调用getSegmentsAtEvent（e）函数时检索这些属性。

只需将它们添加到您的数据中

var data = [
    {
        value: 300,
        color:"#F7464A",
        highlight: "#FF5A5E",
        label: "Red",
        extra: 1
    },
    ...

创建图表后，将其添加到图表元素中

...
var myChart = new Chart(ctx).Pie(data);
myChart.segments.forEach(function(segment, i){
   segment.extra = data[i].extra
})

以及使用元素访问它

canvas.onclick = function(evt){
    var activeSegment = myChart.getSegmentsAtEvent(evt);
    alert(activeSegment[0].extra)
};

只需点击一个扇区就可以在这里看到它的作用

Fiddle-http://jsfiddle.net/aswfsyxw/

相关文章：