图表.js：饼图图例"onclick"如果两者都存在，则"options.onclick"将被覆盖

我有一个饼图，当您单击图表的某个部分时，它需要调用一个函数，如果单击图例中的标签，则需要调用另一个不同的函数。我希望通过以下方法实现此行为：

options: {
responsive: true,
legend: {
position: 'right',
onClick: function (event, elem) {
graph_legend_click(elem.text);
},
},
onClick: function (event) {
graph_click( event);
}
}

然而，在实践中，只有第二个onclick(调用graph_click( event);(才会真正被执行。图例onClick不起作用。我该怎么做才能防止第二个onClick覆盖第一个？

只能通过它们的坐标来区分点击事件......条件是：

event.clientY >= chart.boxes[0].height，当legend在top上时。
event.clientX <= chart.boxes[0].left，当legend到right时。

当legend是left或bottom时，也可以使用类似的条件。

var chart;
var config = {
type: 'pie',
data: {
datasets: [{
data: [
Math.round(Math.random() * 100),
Math.round(Math.random() * 100),
Math.round(Math.random() * 100),
Math.round(Math.random() * 100),
Math.round(Math.random() * 100)
],
backgroundColor: [
"rgb(255, 99, 132)",
"rgb(255, 159, 64)",
"rgb(255, 205, 86)",
"rgb(75, 192, 192)",
"rgb(54, 162, 235)"
],
label: 'Dataset 1'
}],
labels: [
'Red',
'Orange',
'Yellow',
'Green',
'Blue'
]
},
options: {
responsive: true,
onClick: function (event) {

/* checking where the click actually happens */
var box = chart.boxes[0];
if((box.position === "top" && event.clientY >= box.height) || (box.position === "right" && event.clientX <= box.left)) {
console.log("chart click  @ x: " + event.clientX + ", y:" + event.clientY);
}
},
legend: {
position: 'top',
onClick: function (event, elem) {
console.log("legend click @ x: " + event.clientX + ", y:" + event.clientY);
}
}
}
};
$(function() {
chart = new Chart($('#chart-area')[0].getContext('2d'), config);
});

html, body {height: 100%; width: 100%; margin: 0;}
canvas#chart-area {height: 100px; width: 100px;}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<div id="canvas-holder"><canvas id="chart-area"></canvas></div>

对图例的单击似乎被隐藏的 iframe 阻止了，chartjs 正在创建该 iframe 以检测调整大小事件。您可以将 chartjs 实例设置为无响应，如果图表自动调整大小对您来说并不重要。

var options = {
type: 'pie',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
}]
},
options: {
responsive: false,
onClick: function(event) {
alert("onClickGraph");
},
legend: {
onClick: function(event) {
alert("onClickLegend");
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

canvas {
background-color: #eee;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>

您还可以使父容器相对定位，这也将允许 chartjs 实例响应，即使标志 "response" 设置为 false，因此不显示 iframe：http://www.chartjs.org/docs/latest/general/responsive.html#important-note

如果添加以下条件，它将起作用。似乎如果您从函数返回，它将执行图例一

options: {
responsive: true,
legend: {
position: 'right',
onClick: function (event, elem) {
graph_legend_click(elem.text);
},
},
onClick: function (event, item) {
if(item.length == 0)
return;
graph_click( event);
}
}

这也有效

var chart = new Chart(ctx, config);
chart.options.legend.onClick = function(ev, legendItem){
alert(legenItem.text);
}
chart.options.onClick = function(ev, item){
if (item.length == 0)
return;
// TODO
}

相关内容

最新更新

热门标签：