Tengo un gráfico chart.js que necesita trazarse desde una gran cantidad de puntos (digamos 1000). Cuando tracé todos estos puntos, se ve bastante mal, así que busqué una forma de limitarlos. Usé el método descrito aquí:
Limite los puntos de datos con el gráfico js
Esto funciona, pero hay un gran problema. Omite algunos máximos y mínimos importantes de los 1000 puntos, básicamente trazando un gráfico incorrecto.
¿Hay alguna manera de no hacer esto sin perder algunos valores? Básicamente trazando el gráfico con todos los 1000 puntos pero mostrando como 30 en él.
He probado algunos complementos (diezmado, reducción de resolución), pero parece que requieren vectores para funcionar (como {x, y}). Mis datos son una matriz de cadenas que se usan para las fechas en el eje x y una matriz de números flotantes que se usan para los precios en el eje y.
¡Gracias!
Puede usar el complemento de destrucción de datos incorporado de Chart.js.
Su base de datos consta de dos matrices, una contiene las cadenas de fecha y la otra contiene los precios. Estos se pueden convertir fácilmente en una matriz de puntos de datos (objetos que tienen una propiedad x e y cada uno) de la siguiente manera.
data: dateStrings.map((d, i) => ({ x: Date.parse(d), y: prices[i] })) Además, debe cumplir con todos los requisitos del complemento de diezmado. También tuve que definir explícitamente options.parsing: false .
Eche un vistazo al código ejecutable y vea cómo funciona.
const dateStrings = []; const prices = []; // create sample data (dateStrings & prices) const date = new Date(); date.setDate(date.getDate() - 100); for (let i = 0; i < 100; i ++) { date.setDate(date.getDate() + 1); dateStrings.push(date.toISOString().substring(0,10)); prices.push(parseInt(Math.random() * 1000)); } new Chart('myChart', { type: 'line', data: { datasets: [{ label: 'My Dataset', data: dateStrings.map((d, i) => ({ x: Date.parse(d), y: prices[i] })), lineTension: 0.3, borderColor: 'rgb(100, 100, 255)' }], }, options: { parsing: false, plugins: { decimation: { enabled: true, algorithm: 'lttb', samples: 20, threshold: 20 } }, scales: { x: { type: 'time', time: { unit: 'day', displayFormats: { day: 'D MMM yyyy' }, tooltipFormat: 'D MMM yyyy' } } } } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.2/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-adapter-moment/1.0.0/chartjs-adapter-moment.min.js"></script> <canvas id="myChart" height="100"></canvas>