1. Actualice la fuente de datos:
Primero, debe modificar los datos subyacentes que el gráfico está utilizando. Esto podría involucrar:
* Reemplazo de todo el conjunto de datos: Si sus datos cambian por completo, es probable que reemplace la matriz de datos o el objeto existente por uno nuevo.
* Modificación de los datos existentes: Si solo cambian las partes de los datos, actualice los elementos específicos dentro de su matriz u objeto de datos.
2. Activar un redibujado:
Aquí es donde entra en juego la biblioteca de gráficos específicos. Aquí hay ejemplos para algunas bibliotecas populares:
* chart.js: Chart.js generalmente maneja las actualizaciones automáticamente si modifica los datos directamente en la propiedad 'Data` de la configuración del gráfico. Sin embargo, para actualizaciones más complejas, es posible que deba llamar a `chart.update ()` para activar explícitamente un redibujado.
`` `JavaScript
// Suponiendo que 'myChart' es su instancia de gráfico de chart.js
mychart.data.datasets [0] .data =[10, 20, 30, 40, 50]; // Actualizar datos
myChart.update (); // Fuerza vuelve a dibujar
`` `` ``
* d3.js: D3.JS es declarativo, lo que significa que describe la apariencia del gráfico en función de los datos. Para volver a dibujar, debe volver a ejecutar el código que crea los elementos del gráfico, utilizando los datos actualizados. Esto a menudo implica usar `selectAll ()` para seleccionar elementos, luego actualizar sus atributos basados en los nuevos datos. Esto es significativamente más manual que otras bibliotecas.
`` `JavaScript
// Ejemplo D3.JS Actualización (simplificado):
d3.select ("#mychart") // seleccionar contenedor de gráficos
.selectall ("rect") // seleccione rectángulos (barras en un gráfico de barras, por ejemplo)
.data (newData) // unir nuevos datos
.attr ("altura", d => d * 10); // Actualizar la altura basada en nuevos datos
`` `` ``
* Highcharts: Similar a Chart.js, HighCharts a menudo se actualizan automáticamente si modifica los datos directamente. Sin embargo, `Chart.Redraw ()` es un método confiable para forzar explícitamente un redibujado.
`` `JavaScript
// Suponiendo que 'gráfico' es su instancia de cuadros de HighCharts
Chart.Series [0] .SetData ([10, 20, 30, 40, 50]);
Chart.Redraw ();
`` `` ``
* tramly: Plotly utiliza los métodos `trotly.react` o` trotly.update` para volver a dibujar el gráfico con datos actualizados. `Plotly.react` reemplaza completamente los datos y el diseño del gráfico, mientras que` Plotly.update` solo actualiza trazas o atributos especificados.
`` `JavaScript
Plotly.react ('myDiv', {// 'myDiv' es la identificación del contenedor de la tabla
x:[1,2,3],
Y:[4,5,6]
});
`` `` ``
* RECHARTS: RECHARTS, una biblioteca de gráficos basada en React, funciona de manera similar a Chart.js:Usted actualiza los datos pasados al componente del gráfico, y el componente se vuelve a modificar automáticamente.
3. Manejar conjuntos de datos grandes de manera eficiente:
Para conjuntos de datos muy grandes, el redibujado repetidamente de todo el gráfico puede ser lento. Considere estas optimizaciones:
* Actualizaciones incrementales: En lugar de volver a dibujar todo el gráfico, actualice solo las partes que han cambiado.
* Virtualización de datos: Solo representa la parte visible de los datos.
* Estructuras de datos optimizadas: Use estructuras de datos eficientes para acelerar el acceso y la manipulación de datos.
En resumen, el método exacto depende de su biblioteca de gráficos elegido. Consulte su documentación para el método correcto para actualizar y volver a dibujar sus gráficos. Siempre priorice la actualización de la actualización primero, luego utilizando la función de redRAW específica de la biblioteca.