ApexCharts.exec updateSeries 只工作一次

Question

有一个问题我想用 Apexcharts 解决。

只是为了引导，我真的不能 post 一个例子，因为图表代码有点大并且依赖网络套接字来获取数据所以我将尽力解释流程希望有人知道我在这里做错了什么，我提前道歉。

申请的流程是

用户可以查看调查结果（这是使用顶点图表）。这是一个模式 window，它打开并构建一个包含图表 div 的即时弹出窗口，例如
```
<div class="poll[dynamic number"></div>  
```
用户打开了结果视图（这呈现得很好）并且收到了新的响应

数据进来，我们使用

ApexCharts.exec(chartName, 'updateSeries', [{
   data: updateData
 }], true);

更新数据。这第一次效果很好，但是如果我们关闭模式，再次打开它，图表呈现得很好，但新的响应不会更新图表。

查看代码，没有重复的 ID，因此当模式打开时，它会完全替换弹出窗口的内容，如前所述，图表每次都呈现得很好，但后续的 updateSeries 不起作用。将内容打印到控制台显示传入的数据，它似乎可以获取图表对象，但更新似乎不起作用。

重新加载页面将使更新生效，所以我认为这可能与它的启动方式有关，但是在没有任何改变之前尝试销毁图表等。

我知道如果不看的话很难调试，如果可以 post 我会举个例子。我想真正的问题是，apex 图表 updateSeries 是否应该与多个动态生成的图表一起使用？如果不是，那为什么它一次有效，就再也无效了？

Answer 1

好的，以防万一其他人遇到这个问题我能够解决这个问题。

基本上，在我们的代码中，我们重用了一个变量，然后渲染图表，但是通过这样做，原始图表对象在创建新对象之前并没有被破坏。（也许这个顶点图表应该抓住这一点，因为人们会认为 chartID 是唯一的，并且在创建新图表时它会先查找 chartID，然后再创建新对象）

无论如何，我们将其移动为它们自己的动态变量，这样我们就可以先检查图表是否存在，并始终在创建新对象之前销毁该对象。

Answer 2

如果您运行遇到与我和 proximO 相同的问题，但并不真正理解他的解决方案（对不起 proxim0，但我花了一些时间），这是我的。我有同样的问题，打开或重新加载页面后图表加载正常，但离开路线然后返回时没有显示数据。
正如 proxim0 所述，普通变量声明如

var chart = new VueApexCharts(document.querySelector('#chartID'),this.chartOptions)
console.log('Chart Object', chart)
chart.render()

VueApexCharts.exec('chartID', 'updateOptions', {
        series: [{
          name: 'SeriesName',
          data: myData
        }]
      })

仅在加载或重新加载页面后有效。

这里解决我的问题的方法是将图表变量保存为 vuex 存储状态，然后运行在初始化（以及我上面显示的系列更新）之前使用一个函数来检查图表对象是否已初始化准备好了。如果是，您可以在使用 chartObject.destroy().

再次初始化之前销毁它们

 checkForChartElements () {
   if (this.$store.getters.getChartObject !== null) {
     this.$store.getters.getChartObject.destroy()
     this.$store.commit('setChartObject', null)
   }

我希望这可以节省一些时间。

ApexCharts.exec updateSeries 只工作一次

ApexCharts.exec updateSeries works only once

javascript

apexcharts