0
356
Viewschart.js combina dispersión y línea
Soy nuevo en chart.js y estoy tratando de combinar un gráfico de dispersión con un gráfico de líneas.
He estado luchando con 2 problemas:
1.- He logrado dibujar el gráfico de dispersión, sin embargo no se muestra el gráfico de líneas. No se lanza ningún mensaje de error.
2.- Quiero agregar algunas etiquetas en la parte inferior, pero después de muchos acercamientos, el gráfico solo muestra los números en el eje x.
Adjunto una imagen para que puedas ver dónde estoy ahora mismo. Dibujé el gráfico de líneas manualmente.
Este es el código que estoy usando:
<script> const ctx = document.getElementById('myChart'); Chart.defaults.elements.point.pointStyle = 'dash'; Chart.defaults.elements.point.borderWidth = 2; Chart.defaults.elements.point.radius = 12; const labels1 = ['A', 'B','C','T','GW','RT','MJ','JY','YJ','TR','UY','IY','TR','RE','WE','WE','WE','BV','CS', 'EW']; const data1 = { datasets: [ { type: 'line', label: 'Line Dataset', data: [10, 10, 10, 10], backgroundColor: 'rgb(0, 0, 255)', borderColor: 'rgb(0, 0, 255)' }, { type: 'scatter', backgroundColor: 'rgb(0, 0, 0)', borderColor: 'rgb(255, 0, 0)', data: [{x:1, y:36}, {x:1, y:37}, {x:1, y:40}, {x:1, y:40}, //.... and many more!! } ], }; const myChart = new Chart(ctx, { type: 'scatter', data: data1, labels: labels1, options: { scales: { x: { min: 0, max: 19, ticks: {stepSize: 1} }, y: { min: 20, max: 120, ticks: {stepSize: 10}, grid:{display:false} }, } } }); </script>Intenté colocar las etiquetas: etiquetas1 en muchos lugares, pero nunca se muestran. Tampoco se muestra el gráfico de líneas como se puede ver en la imagen adjunta.
La versión de Chart.js es 3.6.2
Cualquier ayuda será muy apreciada.
¡¡Saludos!!
1 answers
Answer question0
Esto se debe a que un gráfico de dispersión usa un eje lineal para el eje x de forma predeterminada y un gráfico de líneas usa un eje de categoría, estos no son compatibles entre sí, por lo que deberá usar un segundo eje X. Además, su matriz de etiquetas está en el lugar equivocado, se supone que debe estar en la parte de data de la configuración:
const labels1 = ['A', 'B', 'C', 'T', 'GW', 'RT', 'MJ', 'JY', 'YJ', 'TR', 'UY', 'IY', 'TR', 'RE', 'WE', 'WE', 'WE', 'BV', 'CS', 'EW']; const data1 = { labels: labels1, // place labels array in correct spot datasets: [{ type: 'line', label: 'Line Dataset', data: [10, 10, 10, 10], backgroundColor: 'rgb(0, 0, 255)', borderColor: 'rgb(0, 0, 255)', xAxisID: 'x2' // Specify to which axes to link }, { type: 'scatter', backgroundColor: 'rgb(0, 0, 0)', borderColor: 'rgb(255, 0, 0)', data: [{ x: 1, y: 36 }, { x: 1, y: 37 }, { x: 1, y: 40 }, { x: 1, y: 40 }] } ], } const myChart = new Chart('chartJSContainer', { type: 'scatter', data: data1, options: { scales: { x: { min: 0, max: 19, ticks: { stepSize: 1 } }, x2: { // add extra axes position: 'bottom', type: 'category' }, y: { min: 0, max: 120, ticks: { stepSize: 10 }, grid: { display: false } }, } } }); <body> <canvas id="chartJSContainer" width="600" height="400"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.js"></script> </body>