如何访问包装器 Highcharts vue 的方法？

Question

我是 vue 和 highcharts 的新手。 我正在使用以这种方式在 main.js 中导入的 higcharts vue (vue CLI)：

import HighchartsVue from "highcharts-vue";
Vue.use(HighchartsVue);

我是这样调用模板中的图表组件的：

<highcharts
  v-if="isLoaded"
  :options="chartOptions2"
  :callback="myCallback"
></highcharts>

它工作正常，但我还需要访问这个 highcharts 组件的方法。 我想做这样的事情：

this.highcharts.reload(), this.highcharts.destroy() or this.highcharts.rebuild()

我搜索了网络，但我只是找到了使用 CDN（不是 CLI 项目）的示例。

有什么想法吗？

Answer 1

我们可以通过引用图表实例来使用highcharts方法。在文档中，它得到了很好的解释：https://github.com/highcharts/highcharts-vue#chart-object-reference

这里有在图表上使用重绘和更新方法的示例演示： https://codesandbox.io/s/highcharts-vue-demo-forked-z3nrz https://codesandbox.io/s/highcharts-vue-demo-forked-kdogc