我想让我的饼图具有交互性,方法是允许用户双击切片以向下钻取。我相信这样做的方法是在 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
是我提供的,并且它们都不一定是唯一的。我可以确保 label
是唯一的,但这可能会降低它对人类的可读性。
我尝试在传递给 Pie()
的数据中添加一个额外的属性(例如“id”),但是当我从这个调用中取回段数据时,它被删除了。有没有一种方法可以在不重载 label
字段的情况下为每个段添加一个属性,我可以用它来明确地识别它们?
最佳答案
您需要覆盖饼图或创建继承自饼图的新图表类型。
这是一个新图表类型的示例,我已经传递了一个名为 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>
关于javascript - 在 Chart.js 段中嵌入唯一标识符?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28377145/