He generado una gráfica lineal utilizando chart.js, pero debo mostrarlo en una posición diferente a la que se muestra de forma predeterminada. He visto ejemplos de cómo rotar las etiquetas generadas por la gráfica pero esto solo funciona para los textos y no para toda la gráfica.
Este es el código que utilizo para generar la gráfica.
var dataSets = [
dt1 = {
borderColor: "#434EDA",
data: [17.28, 22.58, 27.91, 31.95, 36.32, 41.73, 45.78, 48.55, 53.48, 47.82,],
fill: false,
label: "Dataset1",
pointHitRadius: 5,
pointRadius: 5
},
dt2 = {
borderColor: "#3DE383",
data: [11.83, 20.23, 26.9, 32.39, 36.95, 41.48, 46.41, 48.82, 52.58, 49.42,],
fill: false,
label: "Dataset2",
pointHitRadius: 5,
pointRadius: 5
},
dt3 = {
borderColor: "#ec0000",
data: [14.2, 20.94, 27.36, 32.12, 36.33, 41.4, 46.58, 48.8, 52.69, 48.9,],
fill: false,
label: "Dataset3",
pointHitRadius: 5,
pointRadius: 5
}
]
var grafValues = {
labels: ["0 mts", "1 mts", "2 mts", "3 mts", "4 mts", "5 mts", "6 mts", "7 mts", "8 mts",],
datasets: dataSets,
}
var grafOptions = {
// responsive: true,
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: "Depth"
},
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: "Temperature ° C"
},
}]
},
title: {
display: true,
text: "Graphic 1"
},
legend: {
display: true,
position: 'top',
labels: {
boxWidth: 40,
fontColor: 'black'
}
},
tooltips: {
enabled: true
}
}
var ctx = document.getElementById('chart-zone').getContext('2d');
var lineChart = new Chart(ctx, {
type: 'line',
data: grafValues,
options: grafOptions
})
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<canvas id="chart-zone" ></canvas>
</body>
Me gustaría que la gráfica tuviera un aspecto parecido al de la imagen
He visto en la documentación de chart.js que existe una opción para cambiar la posición de los ejes de la gráfica, esta se pone en las opciones de cada eje, esta se pone de la siguiente manera.
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: "Profundidad",
},
position: 'left' //Cambio de posición del eje X
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: "Temperatura ° C",
},
position: 'top' //Cambio de posición del eje Y
}]
El problema de hacer esto es que el eje X toma valores que no corresponden con los valores de cada linea de datos de la gráfica. Porfavor hagan los cambios en el código para ver el comportamiento que menciono.
Les agradezco su ayuda y sugerencias de antemano.