1

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 introducir la descripción de la imagen aquí

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.

1 respuesta 1

1

Mediante CSS puedes rotar el canvasque contiene el chart. Esto haría que se viese literalmente rotada como muestras en tu imagen.

#chart-zone{
  transform: rotate(90deg);
}

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
        })
#chart-zone{
  transform: rotate(90deg);
}
<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>

1
  • Gracias por la sugerencia @x3k_js, pero la rotacion impide las interacciones con la grafica, por ejemplo, cuando se coloca el cursor en los puntos de la gráfica, o cuando se quieren aparecer/desaparecer las lineas de la grafica, el problema tambien persiste si coloco el canvas dentro de un div
    – Robert_Rmz
    el 25 jun. 2019 a las 21:14

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.