Chartjs 缩放插件超时

Question

我需要在chartjs的缩放插件上设置超时link。

问题是我尝试像这样在“启用”字段上设置一个变量，但它不起作用。

zoom: {
    zoom: {
         wheel: {
             enabled: this.allowZoom,
         },
         pinch: {
             enabled: true
         },
         mode: 'x',
     }
}

我无法使用

onWheel: () => {}

来解决这个问题。感谢您的帮助。

Answer 1

终于找到了解决方案，需要使用包含您的图表的变量。 首先将您的滚轮设置为启用“假”。

@ViewChild('chart') canvas: ElementRef;
const ctx = this.canvas.nativeElement;
this.chart = new Chart(ctx,{
...
zoom: {
    zoom: {
         wheel: {
             enabled: false,
         },
         pinch: {
             enabled: true
         },
         mode: 'x',
     }
   }
})

然后在画布 div 上创建 mouseenter 和 mouseleave。

<div (mouseenter)="mouseEnter()" (mouseleave)="mouseLeave()">
  <canvas #chart></canvas>
</div>

要完成，请使用两个超时，一个是用户无法在 1 秒之前滚动到画布，另一个是用户可以在 1 秒延迟后进出，但仍然能够滚动。

zoomEnterTimeout: any
zoomLeaveTimeout: any

mouseEnter() {
    clearTimeout(this.zoomLeaveTimeout)
    this.zoomEnterTimeout = setTimeout(() => {
        this.infrastructureChart.options.plugins.zoom.zoom.wheel.enabled = true
        this.infrastructureChart.update()
    }, 1000)
}

mouseLeave() {
    clearTimeout(this.zoomEnterTimeout)
    this.zoomLeaveTimeout = setTimeout(() => {
        this.infrastructureChart.options.plugins.zoom.zoom.wheel.enabled = false
        this.infrastructureChart.update()
    }, 1000)
}