由于我的堆栈栏有多个部分，所以从单个堆栈栏的每个部分获取单击的对象Chart.js [英] Getting clicked object from each section of a single stack bar as my stack bar has multiple sections Chart.js

问题描述

我已经开发了一个带有三个部分或数据源的单个堆积杆.我想知道我点击了哪个部分.

I have developed a single Stacked bar with three section or data source. I want to know which section I have clicked.

这是我的代码 .ts 文件

this.chart = new Chart("Chart1", {
    type: 'bar',
    data: {
        datasets: [{
            label: 'Data1',
            data: [27],             
        },
        {
            label: 'Data2',
            data: [40],
        },
        {
            label: 'Data3',                
            data: [12],
        }

    ],
    }     
});

showData(evt:any){
  var data = this.chart.getElementsAtEvent(evt)
  console.log(data[0]._model); // it prints the value of the property
}

在 data 中，我没有得到数据 object ，而是得到了 chart 的配置，但我只想获取单击的记录.

In the data I am not getting data object rather I getting chart configuration but I just want to get the record which I clicked.

html 文件

<div id="mydiv">
  <canvas id="Chart1" (click)="showData($event)"></canvas>
</div>

这是我的酒吧

推荐答案

您可以按以下方式定义 showData 函数，如果您的数据集包含多个值，则也可以这样:

You can define the showData function as follow, this will also if your datasets contain more than one value:

function showData(evt) {
  const datasetIndex = chart.getElementAtEvent(event)[0]._datasetIndex;
  const index = chart.getElementAtEvent(event)[0]._index;
  const model = chart.getElementsAtEvent(event)[datasetIndex]._model;
  console.log(model.datasetLabel, chart.config.data.datasets[datasetIndex].data[index]);
}

我不是直接在 canvas 上添加(click)事件处理程序，而是在图表选项中定义 onClick 函数如下:

Instead of adding the (click) event handler directly on the canvas, I would also rather define the onClick function within the chart options as follows:

options: {
  onClick: showData,

请查看可运行的代码段.

Please have a look at the runnable code snippet.

function showData(evt) {
  const datasetIndex = chart.getElementAtEvent(event)[0]._datasetIndex;
  const index = chart.getElementAtEvent(event)[0]._index;
  const model = chart.getElementsAtEvent(event)[datasetIndex]._model;
  console.log(model.datasetLabel, chart.config.data.datasets[datasetIndex].data[index]);
}

const chart = new Chart("Chart1", {
  type: 'bar',
  data: {
    labels: ['A', 'B'],
    datasets: [{
        label: 'Data1',
        data: [27, 22],
        backgroundColor: 'red'
      },
      {
        label: 'Data2',
        data: [40, 15],
        backgroundColor: 'orange'
      },
      {
        label: 'Data3',
        data: [12, 31],
        backgroundColor: 'blue'
      }
    ]
  },
  options: {
    onClick: showData,
    legend: {
      display: false
    },
    tooltips: {
      enabled: false
    },
    responsive: true,
    scales: {
      xAxes: [{
        stacked: true,
      }],
      yAxes: [{
        stacked: true,
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

canvas {
  max-width: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="Chart1" height="200"></canvas>

这篇关于由于我的堆栈栏有多个部分，所以从单个堆栈栏的每个部分获取单击的对象Chart.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！