New*_*wtt 52 javascript jquery charts chart.js
我有一个关于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标记的切片并调用以下形式的网址:
example.com?label=red&value=300？如果是,我该如何解决这个问题？
Tob*_*ías 73
更新:作为@Soham Shetty评论,getSegmentsAtEvent(event)仅适用于1.x和2.x getElementsAtEvent应该使用.
.getElementsAtEvent(e)中
在事件点下查找元素,然后返回相同数据索引处的所有元素.这在内部用于"标签"模式突出显示.
调用
getElementsAtEvent(event)您的Chart实例传递事件的参数或jQuery事件,将返回该事件的相同位置的点元素.Run Code Online (Sandbox Code Playgroud)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)
调用
getSegmentsAtEvent(event)您的Chart实例传递事件或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>
ale*_*rob 54
使用Chart.JS版本2.1.3,比这个更早的答案不再有效.使用getSegmentsAtEvent(event)方法将在控制台上输出此消息:
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 */
}
}
希望能帮助到你.
Tom*_*ver 26
Chart.js 2.0使这更容易.
您可以在文档中的常见图表配置下找到它.应该更多的饼图.
options:{
onClick: graphClickEvent
}
function graphClickEvent(event, array){
if(array[0]){
foo.bar;
}
}
它会在整个图表上触发,但如果您点击饼图,那个饼图的模型包括可用于获取值的索引.
小智 15
工作正常的图表部门onclick
ChartJS:饼图 - 添加选项"onclick"
options: {
legend: {
display: false
},
'onClick' : function (evt, item) {
console.log ('legend onClick', evt);
console.log('legd item', item);
}
}
小智 10
几天以后我遇到了同样的问题,今天我找到了解决方案.我已经显示了准备执行的完整文件.
<html>
<head><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js">
</script>
</head>
<body>
<canvas id="myChart" width="200" height="200"></canvas>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
},
onClick:function(e){
var activePoints = myChart.getElementsAtEvent(e);
var selectedIndex = activePoints[0]._index;
alert(this.data.datasets[0].data[selectedIndex]);
}
}
});
</script>
</body>
</html>
如果使用"请求图表",并且您希望阻止用户在图表圈子周围的空白处单击时触发您的事件,则可以使用以下替代方法:
var myDoughnutChart = new Chart(ctx).Doughnut(data);
document.getElementById("myChart").onclick = function(evt){
var activePoints = myDoughnutChart.getSegmentsAtEvent(evt);
/* this is where we check if event has keys which means is not empty space */
if(Object.keys(activePoints).length > 0)
{
var label = activePoints[0]["label"];
var value = activePoints[0]["value"];
var url = "http://example.com/?label=" + label + "&value=" + value
/* process your url ... */
}
};
| 归档时间： |
|
| 查看次数： |
118688 次 |
| 最近记录： |