如何使用chartJS显示所选数据的细分

Question

我在php-Laravel框架项目中使用chartJS，数据从sql存储过程中发送。我希望能够点击图表中显示的数据，以显示点击的特定记录的明细。
例如，如果我有一个条形图，显示周一有6个未接来电，周二有4个未接来电。我希望能够单击周一条形图，并显示这些未接来电的明细。

<div style="width: 300px; height: 300px">
<canvas id="myChart"></canvas>
</div>

<table>
<tr>
<th>id</th>
<th>date</th>
<th>missed Call?</th>
<th>Reason?</th>
</tr>
<tr>
<th>1</th>
<td>01/12/2020</td>
<td>yes</td>
<td>"no one at phone"</td>
</tr>
<tr>
<th>2</th>
<td>01/12/2020</td>
<td>0</td>
<td>n/a</td>
</tr>
<tr>
<th>3</th>
<td>01/12/2020</td>
<td>yes</td>
<td>"no one at phone"</td>
</tr>
<tr>
<th>4</th>
<td>01/12/2020</td>
<td>yes</td>
<td>"no one at phone"</td>
</tr>
<tr>
<th>5</th>
<td>04/12/2020</td>
<td>yes</td>
<td>"no one at phone"</td>
</tr>
<tr>
<th>6</th>
<td>04/12/2020</td>
<td>yes</td>
<td>"lines down"</td>
</tr>
<tr>
<th>7</th>
<td>04/12/2020</td>
<td>0</td>
<td>"n/a"</td>
</tr>
</table>

图表：

var data = {
datasets: [{
data: [3, 2],
backgroundColor: [
"#F7464A",
"#46BFBD",
"#FDB45C"
]
}],
labels: [
"01/12/2020 missed calls",
"04/12/2020 missed calls",
]
};
$(document).ready(
function() {
var canvas = document.getElementById("myChart");
var ctx = canvas.getContext("2d");
var myNewChart = new Chart(ctx, {
type: 'pie',
data: data
});
canvas.onclick = function(evt) {
var activePoints = myNewChart.getElementsAtEvent(evt);
if (activePoints[0]) {
var chartData = activePoints[0]['_chart'].config.data;
var idx = activePoints[0]['_index'];
var label = chartData.labels[idx];
var value = chartData.datasets[0].data[idx];
var url = "https://jsfiddle.net/nikk96/z72p9n03/14/";
console.log(url);
window.open(url);
}
};
}
);

正如你所看到的，我有一个有列的表：id, date ,missed Call?,Reason?

我想点击数据并获得点击日期列中的所有内容。目前，onclick事件打开了一个显示表的新窗口，该表需要填充所选日期的任何数据。

以下是示例的链接

Answer 1

您需要做的是在内存中存储两个数组。

1. 包含制作图表的数据，该图表由ChartJS获取
2. 它包含要在表中显示的其他元数据

最重要的是，这些列表具有相同的顺序，即活动点的索引与元数据的索引匹配。