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

【问题标题】：Using Vue Google Chart - Geochart. Chart reloads on data change, but legend gets dropped使用 Vue Google Chart - Geochart。图表在数据更改时重新加载，但图例被删除
【发布时间】：2021-06-30 04:23:26
【问题描述】：

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

这是我加载图表的方式：

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

countriesForMap ----

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

【问题讨论】：

我们在这里需要更多信息，您在 vue devtools 状态中看到了什么？数据的类型是否符合预期？
是的。数据符合预期。我更改了日期，启动了正确的方法，并且所有组件中的数据都发生了变化 - 包括地图组件中的数据.... 将鼠标悬停在地图中的国家/地区上会在工具提示中显示正确的数据...但是传说是这样的NaN - NaN 和基于数据的国家颜色编码停止工作。
当我按预期说时，更多的是关于包正在等待的数据，比如Date 类型。 NaN 基本上是在说你做了一些被禁止的事情，而且它的强制效果很差。
我想通了。我的突变不是更新数组，而是将新数据附加到同一个数组，这使数组无法使用。我不确定为什么它仍然在地图上反映正确的数据，但现在我已经更改了变异代码，它现在工作正常。
欢迎将此作为答案发布并接受您自己的答案（如果可以）。

标签： javascript vue.js nuxt.js vuex react-google-charts

【解决方案1】：

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

例如，初始数组看起来像

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

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

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

解决问题的方法。

【讨论】：