Tengo un problema simple relacionado con la secuencia de funciones que me cuesta resolver por mi cuenta. Esencialmente, estoy representando un gráfico de barras basado en parámetros seleccionados por el usuario. Esto funciona perfectamente la primera vez, pero cuando el usuario actualiza su selección de parámetros y vuelve a presionar "renderizar", el gráfico no se actualiza. Solo al hacer clic en el segundo botón, el gráfico se muestra con datos actualizados.
Puedo ver en la consola que la función "generar gráfico" ESTÁ recibiendo los datos actualizados, así que sé que el problema es que el gráfico se está procesando antes de que se carguen los nuevos datos. Entiendo que la solución común para este tipo de problema sería usar JS Promises o devoluciones de llamada, pero no sé cómo ejecutarlo y realmente agradecería algo de ayuda.
Aquí está la estructura del código. Tengo que hacer dos llamadas a la API para obtener los datos.
const ajaxCallOne = () => { // Make API call for first data set (data1). On success, invoke the next API call, passing data1. success: (data1) => { ajaxCallTwo(data1); } } const ajaxCallTwo = (data1) => { // Make second API call for another set of data ('data2'). On success, invoke a function to visualize all the data in a bar chart, passing it both data1 and data2. success: (data2) => { populateBarChart(data1, data2) } } const populateBarChart = (data1, data2) => { // Function to create a bar chart and populate it with data1 and data2 from the API calls // The data retrieved from the API calls is based on parameters selected by the user. When the user selects new parameters and hits the "view results" button again, we kick off another round of API calls, which pass the new data to this populateBarChart function. // I am using ApexCharts.js library to render the bar chart. The syntax for actually rendering the chart looks like this: let chart = new ApexCharts( document.querySelector("#audience-reach-chart-container"), options ); chart.render(); }Al principio pensé que necesitaba destruir/vaciar el gráfico al comienzo de la función, pero dado que la función crea una nueva instancia del gráfico cada vez que se invoca, no hay nada que apuntar y destruir.
Además, cuando hago console.log los datos que recibe la función populateBarChart , puedo ver que se están recibiendo los datos actualizados. Entonces, ¿el problema debe ser que el gráfico se está procesando en función de los datos antiguos y necesito controlar la secuencia de eventos?
No puedo entender cómo hacer esto dentro del diseño del código. Cualquier idea sería muy apreciada.
Tiene toda la razón en que esto se puede resolver mediante devoluciones de llamada, promesas e incluso async/await.
Sin embargo, esta declaración del problema puede tener un matiz, por ejemplo, si está utilizando los menús desplegables <select> , el detector de eventos registrado en ellos podría ser ligeramente incorrecto. O, si el comportamiento de la biblioteca de ApexCharts es retener el renderizado por algún motivo, entonces será difícil decirlo sin revisar la documentación. Por lo tanto, un ejemplo en codesandbox o jsfiddle puede ayudarnos.
Veamos una posible solución: idealmente, al usar promesas, deberíamos hacer algo como esto:
let container = document.querySelector("#audience-reach-chart-container"); const ajaxCallOne = () => { // Make API call for first data set (data1). // No need to invoke the next API call. Just ensure it returns a promise object } const ajaxCallTwo = () => { // Make second API call for another set of data ('data2'). // Sit still! No need to do anything here as long as this function returns a promise } // Run this when the user hits 'render' button Promise.all([ajaxCallOne, ajaxCallTwo]).then((values) => { console.log(values); // values[0] holds data1 // values[1] holds data2 let options = doSomethingOnThese(values[0], values[1]); // Populate the BarChart here let chart = new ApexCharts(container, options); chart.render(); });Creé una aplicación de muestra ( https://codesandbox.io/s/unruffled-cookies-tbcerp?file=/src/index.js ) para imitar su caso de uso aquí:
// https://codesandbox.io/s/unruffled-cookies-tbcerp?file=/src/index.js (async function () { var options = { chart: { height: 350, type: "bar" }, dataLabels: { enabled: false }, series: [], title: { text: "Ajax Example" }, noData: { text: "Loading..." } }; var chart = new ApexCharts(document.querySelector("#chart"), options); chart.render(); try { const ajaxCallOne = await fetch( "https://my-json-server.typicode.com/apexcharts/apexcharts.js/yearly" ); const ajaxCallTwo = await fetch( "https://my-json-server.typicode.com/apexcharts/apexcharts.js/yearly2" ); let data1 = await ajaxCallOne.json(); let data2 = await ajaxCallTwo.json(); console.log(data1, data2); chart.updateSeries([ { name: "Sales", data: data1 }, { name: "Sales2", data: data2 } ]); } catch (e) { console.log(e); } })();