如何禁用图表 ChartJS 中的点击

Question

我有以下代码在 ChartJS 中呈现我的图表：

public renderCanvas() {
this.canvas = document.getElementById('myChart');
this.ctx = this.canvas.getContext('2d');

const gradient = this.ctx.createLinearGradient(10, 0, 120, 0);
gradient.addColorStop(0, '#429321');
gradient.addColorStop(1, '#B4EC51');

const myChart = new Chart(this.ctx, {
  type: 'doughnut',
  options: { cutoutPercentage: 85, rotation: 2.72, circumference: 4, aspectRatio: 2.8, legend: { display: false }, onClick: null },
  data: {
    labels: ['clients.', 'no clients.'],
    datasets: [{ data: [this.segurosClients, this.prosperaClients], backgroundColor: [gradient, '#E3E7F3'], borderWidth: 1 }],
  },
});

但是当我点击时，它会打开这个弹出窗口，我希望它被禁用

Answer 1

您设置为null的onClick属性似乎没有任何作用。

根据文档，您可以使用options的events属性控制图表侦听哪些事件。 例如，如果您希望图表侦听除click之外的所有事件， click尝试以下操作：

const myChart = new Chart(this.ctx, {
  type: 'doughnut',
  options: { 
      cutoutPercentage: 85, 
      rotation: 2.72, 
      circumference: 4, 
      aspectRatio: 2.8, 
      legend: { 
          display: false 
      },
      events: ['mousemove', 'mouseout', 'touchstart', 'touchmove'],
  data: {
    labels: ['clients.', 'no clients.'],
    datasets: [{ data: [this.segurosClients, this.prosperaClients], backgroundColor: [gradient, '#E3E7F3'], borderWidth: 1 }],
  },
});