【发布时间】：2017-10-10 17:50:28
【问题描述】：
编辑：修改为添加选项，以及建议的（来自答案）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]）。如何判断他们点击的是线条还是栏？
谢谢。
【问题讨论】：
-
使用
array[0]或array[1]是什么意思？你可以使用任何你想要的东西。请记住，数组的顺序可能与您作为数据输入的顺序相同。 -
是的，我同意。我的意思是我想弄清楚他们是否点击了栏或线条。正如我所提到的，array[0] 将包含有关线的信息，array[1] 将包含有关条的信息。换句话说，我的代码中有一个点我会执行： var chartData = array[0]['_chart'].config.data;如果它是我想要数据的行，或者 var chartData = array[1]['_chart'].config.data;如果它是我想要数据的酒吧。但是我怎么知道他们是否点击了线条与条形？是的，我有一个长度为 2 的数组，但我使用这两项中的哪一项？
-
尝试调试
event对象。它可能包含event.target。 -
是的，我一直在摆弄它，希望我能从那里得到它。 event 是 PointerEvent，当然，但 event.target 是一个 HTMLCanvasElement 对象，而 event.target.id 是图表区域（这只是我给我的画布标签的 id（它包含在一个 div 标签中）。所以我很难检查此 CanvasElement 以获取我需要的信息。
标签： javascript charts chart.js2