0
359
ViewsCómo trazar un gráfico de líneas que tiene tanto el inicio como los puntos fuera del área del lienzo usando Chart.js
Actualmente estoy usando chart.js "2.9.4" y "react-chartjs-2 " 2.11.1" . Mi objetivo es dibujar un gráfico de líneas que tenga solo dos puntos de datos. Estos dos puntos de datos están fuera del lienzo .
Aquí adjunto una imagen de referencia.
Por favor, ayúdame a encontrar una solución para este problema. Tu ayuda será altamente apreciada.
·
Juan Pablo Isaza
1 answers
Answer question0
Puede usar un gráfico de dispersión y definir las opciones ticks.min y ticks.max en el eje x para limitar la vista. Para ver la línea, debe agregar showLine: true en el conjunto de dataset .
Consulte la documentación de Chart.js para obtener más detalles sobre la configuración de ticks .
Eche un vistazo al fragmento de código ejecutable a continuación y vea cómo funciona.
new Chart('chart', { type: 'scatter', data: { labels: [2018, 2024], datasets: [{ data: [{ x: 2018, y: 10 }, { x: 2024, y: 0 }], borderColor: 'rgb(0, 0, 255)', showLine: true, fill: false }], }, options: { responsive: false, legend: { display: false }, scales: { xAxes: [{ ticks: { min: 2020, max: 2023, stepSize: 1 } }] } } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script> <canvas id="chart" width="300" height="200"></canvas>
·
Juan Pablo Isaza
Report
Answer question