vue-chartjs集成chartjs-plugin-zoom调用resetZoom报错的解决方法

你遇到的错误是因为this.$refs.myChart获取到的是vue-chartjs的Bar组件实例，而非Chart.js的核心图表实例，resetZoom方法是挂载在Chart.js实例上的，不是组件实例的方法。

正确解决方式 #

vue-chartjs的图表组件（如Bar、Line等）内部会暴露一个chart属性，这个属性才是真正的Chart.js实例，你需要通过它来调用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() {
      // 先确认图表实例存在再调用方法
      if (this.$refs.myChart?.chart) {
        this.$refs.myChart.chart.resetZoom()
      }
    }
  }
}
</script>

额外说明 #

• 使用可选链操作符?.可以避免图表未初始化时出现报错，让代码更健壮
• 若你使用Vue 3，ref的获取方式略有不同，需要通过this.$refs.myChart.value.chart来访问Chart实例

内容的提问来源于stack exchange，提问作者Software Dev