Estoy usando chart.js para dibujar gráficos de líneas. y actualmente existe la necesidad de dibujar 3 líneas diferentes. tienen el mismo conjunto de datos del eje y, pero los conjuntos de datos del eje x son diferentes. me gusta:
y-axis datasets: [2,4,6,8,10] x-axis1 datasets: [1,2,3,4,5] x-axis2 datasets: [5,6,7,8,9] x-axis3 datasets: [8,9,10,12,14]Quiero que el rango del eje x sea de 1 a 14 y mostrarlos por cada valor real de conjuntos de datos.
sin embargo, investigué y acabo de encontrar la manera de usar diferentes etiquetas del eje x por xAxisID, pero de esta manera, x-axis2 y x-axis3 todavía usan 1,2,3,4,5 como conjunto de datos del eje x.
¿Alguien sabe cómo puedo lograr esto?
Esto se puede hacer definiendo datasets.data como una matriz de objetos que tienen una propiedad x e y cada uno.
data: [ { 'x': 1, 'y': 2 }, { 'x': 2, 'y': 4 }, { 'x': 3, 'y': 6 }, { 'x': 4, 'y': 8 }, { 'x': 5, 'y': 10 } ] Puede usar Array.map() para convertir fácilmente sus datos. Eche un vistazo al código ejecutable a continuación y vea cómo funciona.
const y = [2, 4, 6, 8, 10]; const x1 = [1, 2, 3, 4, 5]; const x2 = [5, 6, 7, 8, 9]; const x3 = [8, 9, 10, 12, 14]; new Chart('myChart', { type: 'line', data: { datasets: [{ label: 'A', data: y.map((v, i) => ({ x: x1[i], y: v })), borderColor: 'rgb(255, 0, 0)', backgroundColor: 'rgba(255, 0, 0, 0.2)' }, { label: 'B', data: y.map((v, i) => ({ x: x2[i], y: v })), borderColor: 'rgb(0, 255, 0)', backgroundColor: 'rgba(0, 255, 0, 0.2)' }, { label: 'C', data: y.map((v, i) => ({ x: x3[i], y: v })), borderColor: 'rgb(0, 0, 255)', backgroundColor: 'rgba(0, 0, 255, 0.2)' }] }, options: { scales: { x: { type: 'linear', suggestedMin: 1, suggestedMax: 14, ticks: { stepSize: 1 } }, y: { beginAtZero: true } } }, }); <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.js"></script> <canvas id="myChart" height="80"></canvas>