我有一个关于 Chart.js 的问题。
我使用提供的文档绘制了多个饼图。我想知道是否可以单击其中一个图表的某个切片，根据该切片的值进行 ajax 调用？
例如，如果这是我的数据
var data = [
{
value: 300,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red"
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
}
],
我可以点击标记为 Red 的切片并调用以下形式的 url:
example.com?label=red&value=300?如果是，我该怎么做？
最佳答案
更新:正如@Soham Shetty 评论的那样，getSegmentsAtEvent(event) 仅适用于 1.x 和 2.x getElementsAtEvent应该使用。
.getElementsAtEvent(e)
Looks for the element under the event point, then returns all elements at the same data index. This is used internally for 'label' mode highlighting.
Calling
getElementsAtEvent(event)on your Chart instance passing an argument of an event, or jQuery event, will return the point elements that are at that the same position of that event.canvas.onclick = function(evt){ var activePoints = myLineChart.getElementsAtEvent(evt); // => activePoints is an array of points on the canvas that are at the same position as the click event. };
示例:https://jsfiddle.net/u1szh96g/208/
原始答案(适用于 Chart.js 1.x 版本):
您可以使用 getSegmentsAtEvent(event)
Calling
getSegmentsAtEvent(event)on your Chart instance passing an argument of an event, or jQuery event, will return the segment elements that are at that the same position of that event.
所以你可以这样做:
$("#myChart").click(
function(evt){
var activePoints = myNewChart.getSegmentsAtEvent(evt);
/* do something */
}
);
这是一个完整的工作示例:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.2.js"></script>
<script type="text/javascript" src="Chart.js"></script>
<script type="text/javascript">
var data = [
{
value: 300,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red"
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
}
];
$(document).ready(
function () {
var ctx = document.getElementById("myChart").getContext("2d");
var myNewChart = new Chart(ctx).Pie(data);
$("#myChart").click(
function(evt){
var activePoints = myNewChart.getSegmentsAtEvent(evt);
var url = "http://example.com/?label=" + activePoints[0].label + "&value=" + activePoints[0].value;
alert(url);
}
);
}
);
</script>
</head>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
</body>
</html>
关于javascript - 在 Chart.js 中单击饼图上的事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26257268/