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

Question

我想让我的饼图具有交互性，方法是允许用户双击切片以向下钻取。我相信这样做的方法是在 canvas 上创建一个 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 是我提供的，其中 none 必须是唯一的.我可以确保 label 是唯一的，但这可能会降低它对人类的可读性。

我尝试在传递给 Pie() 的数据中添加一个额外的属性（例如 "id"），但是当我从中获取段数据时它被删除了称呼。有没有办法在每个段中添加一个属性，我可以用它来肯定地识别它们，而不会使 label 字段过载？

Answer 1

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

这是一个新图表类型的示例，我传递了一个名为 id 的新属性，然后此图表中唯一需要不同的是在添加数据时需要将此 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>

Answer 2

要获取被点击的切片，可以使用 getElementAtEvent。对我有用！

 stackedBar(datasets) {
    var c = $("#canvas-bar");
    var ctx = c[0].getContext("2d");
    let __this = this;
    this.chart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ["something"],
        datasets: datasets,
      },
      options: {
        onClick: function (e, item) {
          __this.onClickAction(e, item);
        },
        title: {},
        legend: {},
        scales: {}
      }
    });
  }

 onClickAction(event, elements) {
    if (elements && elements.length) {
      let selected = this.chart.getElementAtEvent(event)[0];
      let sliceIndex = selected['_datasetIndex'];
    }
  }

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

Embed unique identifier in Chart.js segments?

javascript

chart.js