在Chart.js中单击Pie图表上的事件
我有一个关于Chart.js的问题。
我使用所提供的文档绘制了多个片段。我想知道，在单击某个图表的某个片段时，我是否可以根据该切片的值进行ajax调用？
例如，如果这是我的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？如果是的话，我该怎么做？
回答 12
Stack Overflow用户
发布于 2014-10-08 13:54:03
更新：作为@ Shetty注释，getSegmentsAtEvent(event)只适用于1.x和2.x getElementsAtEvent。
.getElementsAtEvent(e) 查找事件点下的元素，然后以相同的数据索引返回所有元素。这是内部用于“标签”模式高亮显示。 调用图表实例上的
getElementsAtEvent(event)传递事件或jQuery事件的参数，将返回位于该事件相同位置的point元素。 canvas.onclick = function(evt){ var activePoints = myLineChart.getElementsAtEvent(evt)；// => activePoints是画布上与单击事件位于相同位置的点的数组。}；
示例：https://jsfiddle.net/u1szh96g/208/
原始答案(对Chart.js 1.x版本有效)：
您可以使用getSegmentsAtEvent(event)实现这一点。
调用图表实例上的
getSegmentsAtEvent(event)传递事件或jQuery事件的参数，将返回位于该事件相同位置的段元素。
来自：原型方法
所以你可以：
$("#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>Stack Overflow用户
发布于 2016-05-25 13:35:47
使用Chart.JS版本的2.1.3，旧的答案不再有效。使用getSegmentsAtEvent(事件)方法将在控制台上输出以下消息：
getSegmentsAtEvent不是一个函数
所以我认为它必须被移除。老实说，我没看过任何变化。要解决这个问题，只需使用getElementsAtEvent(event)方法，因为它可以找到论“医生”。
下面可以找到脚本，以获得有效点击的切片标签和值。注意，检索标签和值也略有不同。
var ctx = document.getElementById("chart-area").getContext("2d");
var chart = new Chart(ctx, config);
document.getElementById("chart-area").onclick = function(evt)
{
var activePoints = chart.getElementsAtEvent(evt);
if(activePoints.length > 0)
{
//get the internal index of slice in pie chart
var clickedElementindex = activePoints[0]["_index"];
//get specific label by index
var label = chart.data.labels[clickedElementindex];
//get value by index
var value = chart.data.datasets[0].data[clickedElementindex];
/* other stuff that requires slice's label and value */
}
}希望能帮上忙。
Stack Overflow用户
发布于 2017-01-26 09:14:01
Chart.js 2.0使得这变得更加容易。
您可以在文档中的公共图表配置下找到它。应该比饼图更有效。
options:{
onClick: graphClickEvent
}
function graphClickEvent(event, array){
if(array[0]){
foo.bar;
}
}它在整个图表上触发，但如果单击饼图，则该饼图的模型(包括可用于获取值的索引)。
https://stackoverflow.com/questions/26257268
复制相似问题
腾讯云开发者
