javascript - 如何禁用图表 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 属性似乎没有执行任何操作。

根据documentation ，您可以使用 options 中的 events 属性控制图表监听哪些事件。例如，如果您希望图表监听除 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 }],
  },
});