时间戳

首页 > 解决方案 > 使用 Vue Google Chart - Geochart。图表在数据更改时重新加载，但图例被删除

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

问题描述

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

这就是我加载图表的方式：

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

国家地图----

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

在此处输入图像描述

标签： javascriptvue.jsnuxt.jsvuexreact-google-charts

解决方案

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

例如，初始数组看起来像

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

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

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

解决这个问题就解决了。

推荐阅读