我添加了 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;