在Chart.js段中嵌入唯一标识符？ [英] Embed unique identifier in Chart.js segments?

问题描述

我想通过允许用户双击切片以进行向下追溯来使我的饼图具有交互性。我相信这样做的方法是在画布上创建一个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 由我提供，它们都不是唯一的。我可以确保标签是唯一的，但这可能会使它对人类的可读性降低。

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>

这篇关于在Chart.js段中嵌入唯一标识符？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！