在 Chart.js 段中嵌入唯一标识符?

2022-01-22 00:00:00 javascript chart.js

我想让我的饼图具有交互性，允许用户双击一个切片向下钻取.我相信这样做的方法是在画布上创建一个 onclick 处理程序，并使用 getSegmentsAtEvent() 来确定单击了哪个切片.

I want to make my pie-chart interactive by allowing the user to double-click on a slice to drill down. I believe that the way to do this is to create an onclick handler on the canvas, and use getSegmentsAtEvent() to determine which slice was clicked.

调用 getSegmentsAtEvent() 返回的段数据可能不明确.以下是返回数据的示例:

The segment data returned by the call to getSegmentsAtEvent() is possibly ambiguous though. Here is a sample of the returned data:

[{
    "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 是唯一的，但这可能会降低人类的可读性.

Of those fields, only value, fillColor, highlightColor, and label are supplied by me, and none of them are necessarily unique. I could ensure that label is unique, but that might make it less readable for humans.

我尝试在传递给 Pie() 的数据中添加一个附加属性(例如id")，但是当我从该调用中取回段数据时，它被删除了.有没有办法在不重载 label 字段的情况下为每个段添加一个属性，我可以用它来肯定地识别它们?

I have tried adding an additional property (e.g. "id") into the data I pass into Pie(), but it is stripped out when I get the segment data back from this call. Is there a way to add a property to each segment which I can use to positively identify them, without overloading the label field?

推荐答案

您需要覆盖饼图或创建从饼图继承的新图表类型.

You would need to either override the pie chart or create a new chart type that inherits from pie.

这是一个新图表类型的示例，我传递了一个名为 id 的新属性，然后在此图表中唯一需要不同的是，当添加数据时，此 id 需要传递给图表

Here is an example of a new chart type, i have passed a new attribute called id and then the only thing that needs to be different in this chart is that when the data is being added this id needs to passed to the chart

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>

相关文章