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

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

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

这是我加载图表的方式：

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

countriesForMap ----

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

解决方法

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

例如，初始数组看起来像

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

由于错误设置了mutation函数，我的新数据数组看起来像这样：

[
["Country",12],["Country",23],7]
]

修复解决了问题。