0
306
VisualizaçõesDatos con datos x e y, los datos faltantes no se tienen en cuenta
tengo el siguiente archivo
<!DOCTYPE html> <html> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> <body> <canvas id="myChart" style="width:100%;max-width:600px"></canvas> <script> var xValues = ["2022-02-01","2022-02-02","2022-02-03","2022-02-04","2022-02-05"]; new Chart("myChart", { type: "line", data: { labels: xValues, datasets: [{ data: [{x:"2022-02-01",y:16},{x:"2022-02-02",y:16},{x:"2022-02-03",y:9},{x:"2022-02-05",y:11}], borderColor: "red", label:"data1", fill: false }] }, options: { legend: {display: true } } }); </script>Como puede ver, no hay datos para la fecha 2022-02-04, pero el gráfico está dibujando los siguientes datos en esta fecha. ¿Hay alguna forma de obtener el gráfico correcto, excepto agregar los datos que faltan?
·
Juan Pablo Isaza
1 Respostas
Responde à pergunta0
Suponiendo que desea apegarse a Chart.js versión 2, debe cambiar su eje x en un eje cartesiano de tiempo . Tenga en cuenta que Chart.js usa internamente Moment.js para la funcionalidad del eje de tiempo. Por lo tanto, debe usar la compilación integrada de Chart.js que incluye Moment.js en un solo archivo.
Tampoco defina data.labels ya que proporciona los datos como una matriz de puntos de datos (objetos que contienen una propiedad x e y cada uno).
Eche un vistazo a su código modificado y vea cómo funciona.
new Chart("myChart", { type: "line", data: { datasets: [{ data: [{x:"2022-02-01",y:16}, {x:"2022-02-02",y:16}, {x:"2022-02-03",y:9}, {x:"2022-02-05",y:11}], borderColor: "red", label:"data1", fill: false }] }, options: { scales: { xAxes: [{ type: 'time', time: { unit: 'day', displayFormats: { day: 'D MMM YYYY' }, tooltipFormat: 'D MMM YYYY' } }] } } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.min.js"></script> <canvas id="myChart"></canvas>
·
Juan Pablo Isaza
Relatório
Responde à pergunta