问题描述
我在我的 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]
]
修复解决了问题。