Chart.js 中饼图的点击事件事件、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 标记的切片并调用以下形式的 url: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>
