1

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

为了实现这一点，我想清除图表并用新数据绘制图表。但我不知道如何清除我的图表，因为我没有参考资料或任何其他描述我的图表的东西。我直接在 with 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 Charts 网站上看到的，我需要参考图表（例如 chart.clearChart()）来设置图表，但我没有这样的参考。

谢谢最好的问候，克里斯蒂安

4

1 回答 1

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)
      })
    }
  }
}

见 -->准备好一些非常定制的东西

于 2020-11-17T22:57:24.477 回答