javascript - 如何在标签(数据集)上触发点击事件并传递其值？

Question

我正在尝试触发点击数据集的标签(“其他”、“次要”)或值(因此稍后连接到特定的 URL)但当时我唯一可以检索的是 index 和 datasetIndex。

我正在尝试使用与此 answer 中描述的相同的原则

这是我的代码:

var ctx = $('#open_chart');
var chart = new Chart(ctx, {
  type: 'pie',
  data: {
    datasets: [{
      data: [1, 5],
      backgroundColor: ['red', 'blue'],
      weight: 1
    }],
    labels: ['Minor', 'Other']
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: 'Title',
      position: 'bottom',
      fontSize: 15,
      fontColor: '#000000'
    },
    legend: {
      display: false
    },
onHover: function(event, chartElement) {
  event.target.style.cursor = chartElement[0] ? 'pointer' : 'default';
				},
onClick: function(e) {
// var pie = this.getElementAtEvent(e)[0];
var pieNotCorrect = this.getElementAtEvent(e);
var pie = this.getElementAtEvent(e)[0];
console.log(pie)
console.log(pieNotCorrect)
var index = pie._index;
var datasetIndex = pie._datasetIndex;
	
// check which part is clicked
if (index == 0 && datasetIndex == 0) alert('First BAR Clicked!');
}
 }
   });



var newDataset = {
  data: [1, 3, 5],
  backgroundColor: ['red', 'blue', 'yellow'],
  label: 'SubStatuses',
  labels: ['Red', 'Blue', 'Yellow'],
  weight: 4
};



chart.data.datasets.push(newDataset);
chart.update();

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="chart-container" style="position: relative; height:500px; width:300px">
		<canvas id="open_chart" style="position:absolute;top:150px;" width="200" height="200"></canvas>
</div>

Answer 1

试试这个

从您的代码中删除以下代码:

var pieNotCorrect = this.getElementAtEvent(e);
var pie = this.getElementAtEvent(e)[0];
console.log(pie)
console.log(pieNotCorrect)
var index = pie._index;
var datasetIndex = pie._datasetIndex;

并且仅在下面使用:

 var pie = this.getElementAtEvent(e)[0];

否则你的代码工作正常

var ctx = $('#open_chart');
var chart = new Chart(ctx, {
  type: 'pie',
  data: {
    datasets: [{
      data: [1, 5],
      backgroundColor: ['red', 'blue'],
      weight: 1
    }],
    labels: ['Minor', 'Other']
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: 'Title',
      position: 'bottom',
      fontSize: 15,
      fontColor: '#000000'
    },
    legend: {
      display: false
    },
onHover: function(event, chartElement) {
  event.target.style.cursor = chartElement[0] ? 'pointer' : 'default';
				},
onClick: function(e) {
var activePoints = this.getElementsAtEvent(e);

    var selectedIndex = activePoints[0]._index; 
     alert("Label : " + this.data.labels[selectedIndex] + " Value : " + this.data.datasets[0].data[selectedIndex]);
 
   
}
 }
});



var newDataset = {
  data: [1, 3, 5],
  backgroundColor: ['red', 'blue', 'yellow'],
  label: 'SubStatuses',
  labels: ['Red', 'Blue', 'Yellow'],
  weight: 4
};



chart.data.datasets.push(newDataset);
chart.update();

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="chart-container" style="position: relative; height:500px; width:300px">
		<canvas id="open_chart" style="position:absolute;top:150px;" width="200" height="200"></canvas>
</div>