使用 Vue Google 图表 - Geochart。图表在数据更改时重新加载，但图例被丢弃

Question

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

这是我加载图表的方式：

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

countriesForMap ----

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

Answer 1

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

例如，初始数组看起来像

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

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

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

修复解决了问题。

使用 Vue Google 图表 - Geochart。图表在数据更改时重新加载，但图例被丢弃

Using Vue Google Chart - Geochart. Chart reloads on data change, but legend gets dropped

javascript

vue.js

nuxt.js

vuex

react-google-charts