Estoy creando un sitio web con un gráfico que usa la biblioteca ChartJS. Este gráfico muestra, en el sitio web, todos los datos disponibles por defecto.
Mi objetivo es permitir que los visitantes elijan un número diferente de datos del gráfico. Entonces, hice un botón en la parte superior del gráfico que, cuando un visitante hace clic en él, debe cambiar la cantidad de datos que se muestran.
El problema es que ChartJS usa un objeto JSON y no logro configurar diferentes comportamientos en él.
... datasets: [ { label: "Exemple", data: [ { x: "Day1", y: 0 }, { x: "Day2", y: 1 }, { x: "Day3", y: 2 }, { x: "Day4", y: 3 }, { x: "Day5", y: 4 }, .... ], ...Traté de poner un evento en él, como:
data: mybutton.addEventListener("click", () => { [{x: "Day1", y: 0}] },Una función, como:
data: myFunction(),Incluso una variable con función en, como:
const myData = () => { // function } data: myData,O un If else.
Nada funcionó... ¿Tienes alguna idea?
Encontré la solución por mí mismo.
Puse el objeto JSON en una función, puse un AddEventListener ("clic", función()), apunté a la parte del JSON para modificar y agregué una actualización () al final.
function chartFunction() { .... // data before datasets: [ { label: "Exemple", data: [ { x: "Day1", y: 0 }, ..... button.addEventListener("click", () => { (myChart.data.datasets[0].data = [...]).myChart.update(); }); }; chartFunction();