编辑：修改为添加选项，并建议（从答案）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，因为我有两个图表。太好了，但是我不知道该如何使用array [0]或array [1]。如果他们单击线数据点，则要对该数据（array [0]）进行操作，如果他们单击蓝色的大条，则要对该数据（array [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);
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句