Quiero crear un gráfico de líneas que tenga varios días individuales como etiquetas en el eje x. Esto realmente funciona bien. Le estoy pasando esta matriz de javascript para el x_axis (ejemplo):
['2019-01-02', '2019-01-03', '2019-01-04', '2019-01-07', '2019-01-08', '2019-01-09', '2019-01-10', '2019-01-11', '2019-01-14', '2019-01-15', '2019-01-16']El problema es que el gráfico puede tener 50 puntos del eje x diferentes, por lo que no tiene sentido mostrarlos todos al mismo tiempo porque sobrepobla el eje x.
En cambio, me gustaría escalar eso para que solo use los meses en el eje x. He estado leyendo que tengo que configurar el xAxis con una escala, pero he probado varias cosas y parece que no funciona.
Este es un intento de ejemplo que hice que falla:
options: { scales: { xAxis: [{ type: 'time', position: 'bottom', time: { parser: 'YYYY-MM-DD', displayFormats: {'day': 'MM/YY'}, tooltipFormat: 'DD/MM/YY', unit: 'month', } }] },¿Alguien puede dar un consejo sobre cómo hacer eso? ¡Gracias!
Debería funcionar como se espera si hace que la entrada dentro displayFormats la misma que unit .
displayFormats: { month: 'MM/YY' }Eche un vistazo al código ejecutable a continuación y vea cómo funciona.
const now = new Date(); const data = new Array(100).fill().map((v, i) => { const date = new Date(); date.setDate(now.getDate() + i); return { x: date.toISOString().substring(0, 10), y: Math.floor(Math.random() * 10) }; }); new Chart('chart', { type: 'line', data: { datasets: [{ label: "Data", borderColor: "rgb(255, 0, 0)", data: data, fill: false } ] }, options: { scales: { yAxes: [{ ticks: { beginAtZero: true } }], xAxes: [{ type: 'time', time: { parser: 'YYYY-MM-DD', unit: 'month', displayFormats: { month: 'MM/YY' }, tooltipFormat: 'DD/MM/YY' } }] } } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.js"></script> <canvas id="chart" height="90"></canvas>