我正在使用chart.js绘制多个折线图。当用户点击其中一个图表时，我需要知道是哪个图表。为了捕捉用户的单击，我在图表的选项中添加了事件:['click']以及一个onclick:clicked以在用户单击图表时调用函数clicked。现在我有了这个：
null
let chLine = document.getElementById("chLine");
let chartData = {
labels: ['l1', 'l2', 'l3', 'l4', 'l5', 'l6', 'l7', 'l8', 'l9'],
datasets: [
{
label: 'c1',
data: [0.3, 0.4, 0.5, 0.35, 0.2, 0.5, 0.4, 0.55, 0.6],
backgroundColor: 'transparent',
borderColor: '#e6194b',
borderWidth: 1,
pointBackgroundColor: '#e6194b'
},
{
label: 'c2',
data: [0.7, 0.5, 0.2, 0.4, 0.6, 0.1, 0.88, 0.35, 0.45],
backgroundColor: 'transparent',
borderColor: '#3cb44b',
borderWidth: 1,
pointBackgroundColor: '#3cb44b'
}
]
}
if (chLine) {
new Chart(chLine,{
type: 'line',
data: chartData,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: false
}
}]
},
legend: {
position: 'top',
labels: {
boxWidth: 5
}
},
events: ['click'],
onClick: clicked
}
}
);
}
function clicked(c, i) {
console.log(c, i)
}<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta charset="UTF-8">
</head>
<body>
<div class="container">
<div class="row my-3">
<div class="col">
<h4>Chart</h4>
</div>
</div>
<div class="row my-2">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<canvas id="chLine" height="100"></canvas>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<script src="test.js"></script>
</body>
</html>null
每次单击图表时，它都会给出一个数组（包含每个图表的信息），还会给出一个包含click事件信息的对象。但我似乎找不到信息来断定哪个图表被点击了。我怎么能这么做？
在clicked函数中，可以使用GetElementatEvent(c)&_DataSetIndex；获取图表数据的索引，然后使用该索引获取用于绘制折线图的数据。在本例中，另一个字段被添加到数据中，单击时，该名称字段将被控制。在这种情况下，您需要单击图表圆圈
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<div class="container">
<div class="row my-3">
<div class="col">
<h4>Chart</h4>
</div>
</div>
<div class="row my-2">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<canvas id="chLine" height="100"></canvas>
</div>
</div>
</div>
</div>
</div>
null
let chLine = document.getElementById("chLine");
let chartData = {
labels: ['l1', 'l2', 'l3', 'l4', 'l5', 'l6', 'l7', 'l8', 'l9'],
datasets: [{
name: 'First Chart',
label: 'c1',
data: [0.3, 0.4, 0.5, 0.35, 0.2, 0.5, 0.4, 0.55, 0.6],
backgroundColor: 'transparent',
borderColor: '#e6194b',
borderWidth: 1,
pointBackgroundColor: '#e6194b'
},
{
name: 'Second Chart',
label: 'c2',
data: [0.7, 0.5, 0.2, 0.4, 0.6, 0.1, 0.88, 0.35, 0.45],
backgroundColor: 'transparent',
borderColor: '#3cb44b',
borderWidth: 1,
pointBackgroundColor: '#3cb44b',
id: '1',
}
]
}
if (chLine) {
var myLineChart = new Chart(chLine, {
type: 'line',
data: chartData,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: false
}
}]
},
legend: {
position: 'top',
labels: {
boxWidth: 5
}
},
events: ['click'],
onClick: clicked
}
});
}
function clicked(c, i, x) {
let getDataSetIndex = this.getElementAtEvent(c)[0]._datasetIndex;
console.log(chartData.datasets[getDataSetIndex].name)
}<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<div class="container">
<div class="row my-3">
<div class="col">
<h4>Chart</h4>
</div>
</div>
<div class="row my-2">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<canvas id="chLine" height="100"></canvas>
</div>
</div>
</div>
</div>
</div>