Mi directorio de archivos es:
Estoy tratando de mostrar el gráfico en mi sitio web usando el sdk de incrustación de gráficos mongodb, tengo el archivo index.html, chart1.js y chart2.js en la misma carpeta. He estado atascado en este problema durante días, he cambiado el script src de muchas maneras diferentes. gracias por ayudar:
código index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div> <div id="chart1"></div> <button id="refresh1">Refresh this chart</button> <script src="chart1.js"></script> </div> <div> <div id="chart2"></div> <button id="refresh2">Refresh this chart</button> <script src="chart2.js"></script> </div> </body> </html>código chart1.js
import ChartsEmbedSDK from '@mongodb-js/charts-embed-dom'; const sdk = new ChartsEmbedSDK({ baseUrl: "https://charts.mongodb.com/charts-project-0-qumgu" }); const chart1 = sdk.createChart({ chartId: "1e32b53f-6de2-45d2-863d-025b85c8bec9", weidth: 400, height: 650, }); chart1.render(document.getElementById('chart1')); document .getElementById('refresh1') .addEventListener('click', () => chart.refresh()); `código chart2.js
import ChartsEmbedSDK from '@mongodb-js/charts-embed-dom'; const sdk = new ChartsEmbedSDK({ baseUrl: 'https://charts.mongodb.com/charts-project-0-qumgu', }); const chart = sdk.createChart({ chartId: '98a3a7ad-8ddd-4f7e-971e-586157ec9379', }); // render the chart into a container chart .render(document.getElementById('chart2')) .catch(() => window.alert('Chart failed to initialise')); // refresh the chart whenenver #refreshButton is clicked document .getElementById('refresh2') .addEventListener('click', () => chart.refresh());