使用 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]
]

修復解決了問題。