Chart.js 中饼图上的单击事件 [英] Click events on Pie Charts in Chart.js
问题描述
我有一个关于 Chart.js 的问题.
I've got a question regard Chart.js.
我使用提供的文档绘制了多个饼图.我想知道是否单击其中一个图表的某个切片，我可以根据该切片的值进行 ajax 调用吗?
I've drawn multiple piecharts using the documentation provided. I was wondering if on click of a certain slice of one of the charts, I can make an ajax call depending on the value of that slice?
例如，如果这是我的data
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 标记的切片并调用以下形式的网址:example.com?label=red&value=300?如果是，我该怎么做?
is it possible for me to click on the Red labelled slice and call a url of the following form:
example.com?label=red&value=300? If yes, how do I go about this?
推荐答案
更新: 正如@Soham Shetty 评论的那样，getSegmentsAtEvent(event) 仅适用于 1.x 和对于 2.x getElementsAtEvent 应该使用.
Update: As @Soham Shetty comments, getSegmentsAtEvent(event) only works for 1.x and for 2.x getElementsAtEvent should be used.
.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.
在您的 Chart 实例上调用 getElementsAtEvent(event) 传递一个事件或 jQuery 事件的参数将返回点元素在那个事件的相同位置.
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)
在您的 Chart 实例上调用 getSegmentsAtEvent(event) 传递一个事件或 jQuery 事件的参数将返回段与该事件相同位置的元素.
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 */
}
);
这是一个完整的工作示例:
Here is a full working example:
<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>
这篇关于Chart.js 中饼图上的单击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
