vue chartjs缩放复位

Question

我正试图使用chartjs-plugin-zoom来实现使用vue-chartjs在图表上缩放。下面的代码，我得到一个this.$refs.myChart.resetZoom is not a function错误。我如何正确地获得对图表的引用，以便我可以调用resetZoom函数?

<template>
<div>
<button @click="resetGraph">Reset</button>
<Bar
id="myChart"
ref="myChart"
:options="chartOptions"
:data="chartData"
/>
</div>
</template>

<script>
import { Bar } from 'vue-chartjs'
import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
import zoomPlugin from 'chartjs-plugin-zoom';
ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, zoomPlugin)
export default {
name: 'BarChart',
components: { Bar },
data() {
return {
chartData: {
labels: [ 'January', 'February', 'March' ],
datasets: [ { data: [40, 20, 12] } ]
},
chartOptions: {
responsive: true,
indexAxis: 'y',
plugins: {
zoom: {
zoom: {
wheel: {
enabled: true,
},
pinch: {
enabled: true
},
mode: 'xy',
}
}
}
}
}
},
methods: {
resetGraph() {
this.$refs.myChart.resetZoom()
}
}
}
</script>

Answer 1

将this.$refs.myChart.resetZoom()更改为this.$refs.myChart.chart.resetZoom()为我解决了这个问题。