Tengo un problema que estoy intentando resolver con Apexcharts.
Solo para comenzar, realmente no puedo publicar un ejemplo porque el código del gráfico es algo grande y depende de un conector web para obtener los datos, así que haré todo lo posible para explicar el flujo con la esperanza de que alguien sepa qué. Estoy haciendo mal aquí, me disculpo de antemano.
El flujo de la aplicación es
El usuario puede ver los resultados de una encuesta (esto utiliza gráficos de ápice). Esta es una ventana modal que se abre y crea una ventana emergente sobre la marcha que contiene el div del gráfico, por ejemplo
<div class="poll[dynamic number"></div>
El usuario tiene la vista de resultados abierta (esto se muestra bien) y llega una nueva respuesta
los datos entran y los usamos
ApexCharts.exec(chartName, 'updateSeries', [{
data: updateData
}], true);
Para actualizar los datos. Esto funciona muy bien la primera vez, sin embargo, si cerramos el modal, lo abrimos.haga una copia de seguridad nuevamente, el gráfico se muestra bien, pero las nuevas respuestas no actualizan el gráfico.
Al observar el código, no hay ID duplicados, por lo que cuando se abre el modal, reemplaza completamente el contenido de la ventana emergente, como se señaló, el gráfico se muestra bien cada vez, pero las series de actualizaciones posteriores no funcionan. Imprimir cosas en la consola muestra los datos que ingresan, parece que puede obtener el objeto del gráfico, sin embargo, las actualizaciones no parecen funcionar.
Recargar la página hará que las actualizaciones funcionen, así que creo que puede deberse a cómo se inicia, sin embargo, intentar destruir los gráficos antes, etc., no ha cambiado nada.
Sé que esto es muy difícil de depurar sin verlo y si pudiera publicar un ejemplo, lo haría. Supongo que la pregunta realmente es: ¿deberían los gráficos apex updateSeries funcionar con múltiples¿E gráficos generados dinámicamente? Si no, ¿por qué funciona una vez y nunca más?
------------------------------------
Bien, en caso de que alguien más tenga este problema, pude resolverlo.
Básicamente, en nuestro código estábamos reutilizando una variable y luego renderizando el gráfico; sin embargo, al hacerlo, el objeto del gráfico original no se destruía antes de crear el nuevo. (tal vez estos gráficos de ápice deberían captar esto, ya que uno pensaría que el ID del gráfico sería único y al crear un nuevo gráfico buscaría primero el ID del gráfico, antes de crear un nuevo objeto)
De todos modos, movimos esto para que sean sus propias variables dinámicas para que podamos verificarsi el gráfico está allí primero y siempre destruya ese objeto antes de crear uno nuevo.
------------------------------------
Si tienes el mismo problema que proximO y yo pero no entiendes realmente su solución (lo siento, proxim0 pero me tomó algo de tiempo), aquí está la mía.
Tuve el mismo problema de que el gráfico se cargaba bien después de abrir o recargar la página, pero no se mostraban datos al salir de la ruta y luego regresar.
Como dijo proxim0, declaración de variable normal como
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
}]
})
solo funciona después de cargar o recargar la página.
Lo que resolvió mi problema aquí fue guardar la variable del gráfico.como estado de tienda vuex y luego ejecutar una función antes de la Inicialización (y la actualización de la Serie como mostré arriba) para verificar si el Objeto del gráfico ya se inicializó. Si así fuera, puedes destruirlos antes de inicializarlos nuevamente con chartObject.destroy().
checkForChartElements () {
if (this.$store.getters.getChartObject !== null) {
this.$store.getters.getChartObject.destroy()
this.$store.commit('setChartObject', null)
}
Espero que esto le ahorre algo de tiempo a alguien.
