Chart.js OnClick 事件带有混合图表，我点击了哪个图表？

Question

编辑：修改为添加选项，以及建议的（来自答案）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]。如果他们专门单击线数据点，我想对该数据（数组[0]）执行某些操作，如果他们单击大蓝色条，我想对该数据（数组[1]）执行某些操作。我如何判断他们点击的是线条还是栏？

谢谢你。

Answer 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);
}

Answer 2

在树状图中的选项下：

        options: {
            onClick: (el: any, arr: any) =>
                console.log('item clicked', arr[0]._index),

您将 2 个参数传递到“onClick”函数中，名称可以是任何名称，但第一个参数是 EVENT，第二个参数是 [N] 数组。

第二个参数是您需要的。

在这个 [N] 数组中，如果您对它进行 console.log，您将看到 2 个可用于识别的内容，即在树形图上单击了哪些数据。

要么：

1. _index: arr[0]._index
2. _options.backgroundColor: arr[0]._options.backgroundColor

您可以console.log这个数组：

            onClick: (el: any, arr: any) =>
                console.log('item clicked', arr[0]),

并查看与图表相关的其他内容，但我发现索引是最容易使用的。