Google 图表 clearChart() with vue-google-charts

Question

我使用 vue-google-charts 在我的网站上绘制了几个图表。我希望用户可以选择将多个数据相互比较。为此，用户可以从图中添加/删除数据。

为了实现这一点，我想清除图表并用新数据绘制图表。但我不知道如何清除我的图表，因为我没有参考资料或任何其他描述我的图表的信息。我直接在 GChart 中实现图表。我如何将 clearCharts() 与 vue-google-charts 一起使用？

<template>
  <v-card outlined tile class="text-left px-3 py-3 mx-5 text-h6">
    TEST
    <GChart type="ColumnChart" :data="chartDataTest" :options="chartOptionsTest"/>
  </v-card>
</template>

据我在 Google 图表网站上的阅读，我需要参考图表（例如 chart.clearChart()）来设置图表，但我没有这样的参考。

致以最诚挚的问候，克里斯蒂安

Answer 1

使用 @ready 属性在第一次绘制时获取对图表的引用...

<GChart
  type="ColumnChart"
  @ready="onChartReady"
/>

export default {
  methods: {
    onChartReady (chart, google) {
      const query = new google.visualization.Query('https://url-to-spreadsheet...')
      query.send(response => {
        const options = {
          // some custom options
        }
        const data = response.getDataTable()
        chart.draw(data, options)
      })
    }
  }
}

见 --> use ready for something very custom

Google 图表 clearChart() with vue-google-charts

Google chart clearChart() with vue-google-charts

javascript

charts

gchart

npm

vue.js