在Chart.js中点击饼图上的事件 [英] Click events on Pie Charts in Chart.js
问题描述
我有一个问题，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 ？
您可以使用 getSegmentsAtEvent（event）来实现这一点。
在您的图表上呼叫
getSegmentsAtEvent（event）实例传递事件的
参数或jQuery事件，将返回在该事件相同位置的段
元素。
发件人：原型方法
所以你可以这样做：
$（＃myChart
function（evt）{
var activePoints = myNewChart.getSegmentsAtEvent（evt）;
/ * do something * /
}
）;
这是一个完整的工作示例：
< html>
< head>
< script type =text / javascriptsrc =http://code.jquery.com/jquery-2.0.2.js>< / script>
< script type =text / javascriptsrc =Chart.js>< / script>
< script type =text / javascript>
var data = [
{
value：300，
color：＃F7464A，
highlight：＃FF5A5E，
label： Red
}，
{
value：50，
color：＃46BFBD，
highlight：＃5AD3D1，
label：绿色
}，
{
值：100，
颜色：＃FDB45C，
亮显：＃FFC870，
标签：黄色
}
];
$（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 =myChartwidth =400height =400>< / canvas>
< / body>
< / html>
I've got a question regard Chart.js.
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?
For example, if this is my 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"
}
],
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?
You can achieve this using 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.
From: Prototype Methods
So you can do:
$("#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屋！
