[英]Chart.js OnClick event with a mixed chart, which chart did I click?
編輯:修改以添加選項,以及建議的(來自答案)chartClickEvent,這是一個 jsfiddle: http : //jsfiddle.net/jmpxgufu/174/
想象一下,如果您將使用以下配置的 Chart.js 混合圖表:
var config = {
type: 'bar',
data: {
labels: ["Test","Test","Test"],
datasets: [{
label: 'Dataset1',
yAxisID: 'Dataset1',
type: "line",
borderColor: "red",
backgroundColor: "red",
data: [70,60,50],
fill: false
},
{
label: 'Dataset0',
type: "bar",
backgroundColor: "blue",
data: [100,90,80]
}]
},
options: {
scales: {
xAxes: [{ barPercentage: 1.0 }],
yAxes: [{ id: 'Dataset1', position: 'left', type: 'linear',
ticks: { display: false, min: 0, beginAtZero: true, max: 120 },
scaleLabel: { display: true, labelString: "TestScale" } }]
},
responsive: true,
maintainAspectRatio: false,
legend : { display: true, position: 'bottom' },
onClick: chartClickEvent
}
}; // end of var config
function chartClickEvent(event, array)
{
if (window.myChart === undefined || window.myChart == null)
{
return;
}
if (event === undefined || event == null)
{
return;
}
if (array === undefined || array == null)
{
return;
}
if (array.length <= 0)
{
return;
}
var active = window.myChart.getElementAtEvent(event);
if (active === undefined || active == null)
{
return;
}
var elementIndex = active[0]._datasetIndex;
console.log("elementIndex: " + elementIndex + "; array length: " + array.length);
if (array[elementIndex] === undefined || array[elementIndex] == null)
{
return;
}
var chartData = array[elementIndex]['_chart'].config.data;
var idx = array[elementIndex]['_index'];
var label = chartData.labels[idx];
var value = chartData.datasets[elementIndex].data[idx];
var series = chartData.datasets[elementIndex].label;
alert(series + ':' + label + ':' + value);
}
正如我的 chartClickEvent 所說,我的數組長度為 2,因為我有兩個圖表。 這很好,但我不知道如何確定是使用數組 [0] 還是數組 [1]。 如果他們專門單擊線數據點,我想對該數據(數組 [0])做一些事情,如果他們單擊藍色大條,我想對這些數據(數組 [1])做一些事情。 我如何判斷他們是點擊了線條還是欄?
謝謝你。
HTML
<div id="test" style="height:600px; width:600px;">
<canvas id="myCanvas" style="border: 1px solid black; margin: 25px 25px, display: none;" height="300" >Canvas</canvas>
</div>
JS
var ctx = document.getElementById("myCanvas");
var newArr;
var config = new Chart(ctx,{
type: 'bar',
data: {
labels: ["Test","Test","Test"],
datasets: [{
label: 'Dataset1',
yAxisID: 'Dataset1',
type: "line",
borderColor: "red",
backgroundColor: "red",
data: [70,60,50],
fill: false
},
{
label: 'Dataset0',
type: "bar",
backgroundColor: "blue",
data: [100,90,80]
}]
},
options: {
scales: {
xAxes: [{ barPercentage: 1.0 }],
yAxes: [{ id: 'Dataset1', position: 'left', type: 'linear',
ticks: { display: false, min: 0, beginAtZero: true, max: 120 },
scaleLabel: { display: true, labelString: "TestScale" } }]
},
responsive: true,
maintainAspectRatio: false,
legend : { display: true, position: 'bottom' },
onClick: chartClickEvent
}
}); // end of var config
function chartClickEvent(event, array){
if(typeof newArr === 'undefined'){
newArr = array;
}
if (window.config === 'undefined' || window.config == null)
{
return;
}
if (event === 'undefined' || event == null)
{
return;
}
if (newArr === 'undefined' || newArr == null)
{
return;
}
if (newArr.length <= 0)
{
return;
}
var active = window.config.getElementAtEvent(event);
if (active === 'undefined' || active == null || active.length === 0)
{
return;
}
var elementIndex = active[0]._datasetIndex;
console.log("elementIndex: " + elementIndex + "; array length: " + newArr.length);
if (newArr[elementIndex] === 'undefined' || newArr[elementIndex] == null){
return;
}
var chartData = newArr[elementIndex]['_chart'].config.data;
var idx = newArr[elementIndex]['_index'];
var label = chartData.labels[idx];
var value = chartData.datasets[elementIndex].data[idx];
var series = chartData.datasets[elementIndex].label;
alert(series + ':' + label + ':' + value);
}
options: {
onClick: event => {
if (myChart.getActiveElements().length > 0) {
var active = myChart.getActiveElements();
active.map(function(e) {
$("#tbodynode input[value='" + arr_rii_module[e.index] + "']").trigger('click');
});
}
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.