使用 Vue 谷歌图表 - Geochart。 图表在数据更改时重新加载，但图例被删除

Question

我在我的 nuxt 项目中使用 vue 谷歌图表。 当我更改日期选择时，数据发生了变化，我的 geochart 组件中的计算方法读取了正确的新数据......但底部（颜色条）的图例无法正常工作......相反，它读取NaN NaN...因此，图表显示了正确的数据，但没有正确的颜色编码。 为清楚起见，附上截图。 （国家/地区上的鼠标悬停显示正确的数据，但由于颜色映射没有启动，这两个国家显示相同的颜色阴影，尽管值显着不同）

这是我加载图表的方式：

<GChart
  :settings="{ packages: ['geochart'], mapsApiKey: '<usingmapsapikeyhere>' }"
  type="GeoChart"
  :data="countriesForMap"
  :options="chartOptions"
  ref="gChart"
/>

国家地图----

computed: {
    ...mapState(["countriesForMap"]),
  }

Answer 1

我想到了。 我的变异不是更新数组，而是将新数据附加到同一个数组，这使数组无法使用。 我不知道为什么它仍然在地图上反映正确的数据，但是现在我已经更改了突变代码，它现在工作正常。

例如，初始数组看起来像

[
["Country", "Data"],
["India", 42],
["Japan", 12]
]

由于错误设置的突变函数，我的新数据数组如下所示：

[
["Country", "Data"],
["India", 42],
["Japan", 12],
["Country", "Data"],
["India", 23],
["Japan", 7]
]

修复解决了问题。