如何使用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事件打开了一个新窗口，其中显示了一个表，这个表需要填充所选日期的任何数据。

Heres a link of the example

Answer 1

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

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

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