如何在图形图表JS中禁用单击

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之外的所有事件，请尝试以下操作：

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 }],
},
});