谷歌图表clearChart()与vue谷歌图表

Question

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

为了实现这一点，我想清除图表，并用新数据绘制图表。但我不知道如何清理我的图表，因为我没有参考资料或任何其他描述我的图表的东西。我使用GChart直接在中实现图表。如何将clearCharts((与vue谷歌图表结合使用？

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

据我在谷歌图表网站上所能阅读到的，我需要参考一个图表(例如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)
})
}
}
}

请参见->使用现成的东西非常定制