actualmente aprendiendo Javascript y construyendo una aplicación web simple. Aquí, estoy tratando de mostrar un gráfico usando gráficos de vértice. Cuando no incluyo la declaración de importación resaltada, el gráfico se muestra bien en la página web, cuando se incluye una importación (o cualquier otro código dentro de ese archivo), el gráfico ya no aparece en la página web. Apenas estoy empezando a comprender la naturaleza asíncrona de JS, así que asumí que tiene algo que ver con eso. ¡Cualquier ayuda es apreciada!
import { datapoints } from "./main.js"; // When this line is commented out or removed, the chart renders fine var options = { chart: { type: 'candlestick' }, series: [{ data: [ [1147651200000,67.37,68.38,67.12,67.79], [1147737600000,68.10,68.25,64.75,64.98], [1147824000000,64.70,65.70,64.07,65.26], [1147910400000,65.68,66.26,63.12,63.18], [1147996800000,63.26,64.88,62.82,64.51], [1148256000000,63.87,63.99,62.77,63.38], [1148342400000,64.86,65.19,63.00,63.15], [1148428800000,62.99,63.65,61.56,63.34], [1148515200000,64.26,64.45,63.29,64.33], [1148601600000,64.31,64.56,63.14,63.55], [1148947200000,63.29,63.30,61.22,61.22], [1149033600000,61.76,61.79,58.69,59.77] ] }] } var chart = new ApexCharts(document.querySelector("#chart"), options); chart.render();Los navegadores admiten la declaración de import , pero solo cuando están habilitados en un script de módulo. Puede habilitar un script de módulo agregando type="module" a su etiqueta de script HTML. Aquí hay un ejemplo simple de configuración de declaraciones de import para el navegador:
<!-- index.html --> <!DOCTYPE html> <html> <head> <!-- ... --> <script type="module" src="./script.js" defer></script> </head> <body> <!-- ... --> </body> </html> // script.js import { datapoints } from "./main.js"; // this should work without errors // ...Tenga en cuenta que si planea escalar una aplicación, es posible que desee considerar el uso de un marco o un paquete como Webpack , Parcel o Vite .