Update:正如@Soham Shetty 评论的那样,getSegmentsAtEvent(event)
仅适用于 1.x 和 2.xgetElementsAtEvent应该使用。
.getElementsAtEvent(e)
查找事件点下的元素,然后返回所有元素
在相同的数据索引处。这在内部用于“标签”模式
突出显示。
Calling getElementsAtEvent(event)
在您的 Chart 实例上传递一个
事件或 jQuery 事件的参数将返回点元素
与该事件处于同一位置。
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)
在您的 Chart 实例上传递一个
事件或 jQuery 事件的参数将返回段
位于该事件相同位置的元素。
From: 原型方法
所以你可以这样做:
$("#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>