angular - Angular + ChartJS 添加resetZoom 按钮

Question

我添加了 chartjs 缩放插件，现在我想添加一个允许重置缩放的按钮。我看到的所有教程都使用了一个函数，仅在使用 chartjs 时效果很好。但是由于我的图表在一个 Angular 组件中并且在一个类中，我必须尝试 afaik 来访问一个方法。所以认为这将是与班级合作时的方式

  myChart!: Chart;
...
this.myChart = new Chart('myChart', {
...
        zoom:{
             
              pan: {
                enabled: true,
                modifierKey:'alt',
                mode: 'xy',
              },
              zoom :{                  
                drag:{
                  enabled:true,
                  threshold: 1,
                },
                pinch: {
                  enabled: true
                },
                mode:'x',
                
              }
            }
          },
          
          onClick(e) {
            
            console.log('onClick e'+e.native)
            console.log(e.type);
          }
...
     resetChart()
      {
        this.myChart.resetZoom();
      }

我的结果是，即使没有按下按钮，它也会触发 resetChart。意思是我不能再缩放也不能平移/捏/拖动所以我试着像这样通过 ViewChild 调用它

父组件.html

<button (click)="resetChart.resetChart()" id='resetZoomChart' value="reset">Reset Zoom</button>

父组件.ts

  @ViewChild("resetChart", { static: false }) resetChart!: ViewChartComponent;

标签： angularchart.jschartjs-plugin-zoom