1

Estoy en el desarrollo de unas gráficas con la ayuda de la biblioteca de funciones de Chart.js y, entre ellas, estoy haciendo uso de un gráfico de barras.

Pero en esta ocasión requiero agregar un tercer parámetro de información, el cual quiero representar en líneas. Es decir, estoy buscando con este gráfico hacer una combinación entre gráficos de barras y lineas.

A continuación he dejado un pequeño fragmento de como tengo desarrollado mi gráfico de barras hasta el momento:

 /* ChartJS
     * -------
     * Here we will create a few charts using ChartJS
     */

    var areaChartData = {
      labels  : ['Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago'],
      datasets: [
        {
          label               : 'Masa grasa',
          fillColor           : 'rgba(63,134,203,1)',
          strokeColor         : 'rgba(63,134,203,1)',
          pointColor          : 'rgba(63,134,203,1)',
          pointStrokeColor    : '#c1c7d1',
          pointHighlightFill  : '#fff',
          pointHighlightStroke: 'rgba(63,134,203,1)',
          data                : [38, 37.6, 34.4, 32.8, 29.3, 55, 40]
        },
        {
          label               : 'Circ cintura',
          fillColor           : '#a6bcdf',
          strokeColor         : '#a6bcdf',
          pointColor          : '#a6bcdf',
          pointStrokeColor    : '#a6bcdf',
          pointHighlightFill  : '#fff',
          pointHighlightStroke: '#a6bcdf',
          data                : [0, 121, 40, 43, 32, 27, 90]
        }
      ]
    }
    //-------------
    //- BAR CHART -
    //-------------
var barChartCanvas                   = document.getElementById("barChart").getContext('2d');       
    var barChart                         = new Chart(barChartCanvas);
    var barChartData                     = areaChartData
    barChartData.datasets[1].fillColor   = '#a6bcdf'
    barChartData.datasets[1].strokeColor = '#a6bcdf'
    barChartData.datasets[1].pointColor  = '#a6bcdf'
    var barChartOptions                  = {
      //Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
      scaleBeginAtZero        : true,
      //Boolean - Whether grid lines are shown across the chart
      scaleShowGridLines      : true,
      //String - Colour of the grid lines
      scaleGridLineColor      : 'rgba(0,0,0,.05)',
      //Number - Width of the grid lines
      scaleGridLineWidth      : 1,
      //Boolean - Whether to show horizontal lines (except X axis)
      scaleShowHorizontalLines: true,
      //Boolean - Whether to show vertical lines (except Y axis)
      scaleShowVerticalLines  : true,
      //Boolean - If there is a stroke on each bar
      barShowStroke           : true,
      //Number - Pixel width of the bar stroke
      barStrokeWidth          : 2,
      //Number - Spacing between each of the X value sets
      barValueSpacing         : 5,
      //Number - Spacing between data sets within X values
      barDatasetSpacing       : 1,
      //String - A legend template
      legendTemplate          : '<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].fillColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>',
      //Boolean - whether to make the chart responsive
      responsive              : true,
      maintainAspectRatio     : true
    }

    barChartOptions.datasetFill = false
    barChart.Bar(barChartData, barChartOptions)
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.js"></script>
<canvas id="barChart" style="height:230px"></canvas>

Lo que requiero, como lo comenté al inicio de la pregunta, es agregar una gráfica de línea a esta gráfica de barras, así como el ejemplo que adjunto a continuación en una imagen:

Resultado esperado con dos gráficas de barras y una de línea

Como soy nuevo con Chart.js desconozco cuál es la propiedad que agrega o modifica para agregar la gráfica de líneas.

3
  • eso se puede???
    – user46896
    Commented el 17 ago. 2021 a las 21:02
  • Intenta con los ejemplos del manual
    – Triby
    Commented el 18 ago. 2021 a las 0:44
  • Claro que se puede @FranciscoNúñez-TodoPoderoso, ¿por qué lo ves tan extraño? Commented el 18 ago. 2021 a las 6:51

1 respuesta 1

1

Estás usando una versión demasiado antigua de Chart.js, la versión 1.1.1 que data de 2016.

He adaptado tu código a la versión 3.5.0, pero para ello he tenido que hacer unos cambios:

  • fillColor por backgroundColor.
  • strokeColor por borderColor.
  • scaleBeginAtZero por scales: y: beginAtZero.
  • etc.

Además de mostrarte cómo mezclar tipos de gráficas, he agregado un ejemplo de cómo agregar una nueva serie de manera dinámica.

Aquí tienes un ejemplo funcionando correctamente:

var areaChartData = {
  labels  : ['Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago'],
  datasets: [
    {
      label               : 'Masa grasa',
      backgroundColor     : 'rgba(63,134,203,1)',
      borderColor         : 'rgba(63,134,203,1)',
      data                : [38, 37.6, 34.4, 32.8, 29.3, 55, 40],
      order               : 2,
    },
    {
      label               : 'Circ cintura',
      backgroundColor     : '#a6bcdf',
      borderColor         : '#a6bcdf',
      data                : [0, 121, 40, 43, 32, 27, 90],
      order               : 1,
    },
    {
      label               : 'Circ cintura',
      backgroundColor     : '#a6bcdf',
      borderColor         : 'rgba(33,104,163,1)',
      data                : [0, 121, 40, 43, 32, 27, 90],
      type                : 'line',
      order               : 0,
    },
  ],
};

var barChartCanvas = bar_Chart.getContext('2d');

var barChart = new Chart(barChartCanvas, {
  type: 'bar',
  data: areaChartData,
  options: {
    scales: {
      y: {
        beginAtZero: true,
      }
    }
  }
});

agregar.addEventListener("click", (e) => {
  /* Solo agregamos una única vez la nueva serie */
  e.target.disabled = "disabled";
  /* Agregamos la nueva serie a los datasets previos */
  barChart.data.datasets.push({
    label               : 'Masa grasa',
    backgroundColor     : 'rgba(63,134,203,1)',
    borderColor         : 'rgba(63,134,203,1)',
    data                : [38, 37.6, 34.4, 32.8, 29.3, 55, 40],
    type                : 'line',
  });
  /* Actualizamos la gráfica */
  barChart.update();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.min.js" integrity="sha512-asxKqQghC1oBShyhiBwA+YgotaSYKxGP1rcSYTDrB0U6DxwlJjU59B67U8+5/++uFjcuVM8Hh5cokLjZlhm3Vg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<button id="agregar">Agregar nueva gráfica</button>
<canvas id="bar_Chart" style="max-height: 180px;"></canvas>

9
  • Tu respuesta parece ser muy buena para esta versión pero en mi caso como ya lo mencionaste utilizo la 1.1.1, en este momento se me es imposible cambiar de versión ya que cuento con una cantidad considerable de graficas las cuales están en esta versión e implicaría demasiado retrabajo cambiarlas a una versión reciente.
    – John Doe
    Commented el 18 ago. 2021 a las 13:30
  • ¿Y no podrías cargar la versión nueva únicamente en esta página que necesitas la gráfica con ambos tipos diferentes? El problema es que no encuentro por ningún lado la documentación oficial de la versión 1.1.1, siendo la versión 2.6.0 la versión más antigua que he encontrado con documentación. Commented el 18 ago. 2021 a las 13:43
  • Bueno, acabo de encontrar la plantilla de la documentación 1.1.1 en el repositorio de github. Veo que la funcionalidad es infinitamente inferior a la versión 2.6, y que cada gráfica se dibuja con su propio método (Graph.Bar() o Graph.Line()), todo apunta a que no podrán mezclarse gráficas en esa versión, pero lo mismo me sorprendo. Commented el 18 ago. 2021 a las 13:48
  • Confirmado, al llamar a Graph.Line() (tras haber dibujado la gráfica de barras con Graph.Bar()) la anterior gráfica se borra. Solo quedaría probar a superponer ambas gráficas mediante HTML. ¿Te interesa ese tipo de chapuzas o prefieres subir la versión de la biblioteca para esa página en particular? Por cierto, ¿por qué elegiste la versión 1.1.1 para generar las gráficas? Commented el 18 ago. 2021 a las 13:50
  • Lo mismo estuve buscando en la documentación de github pero nada se me hizo familiar al combinar las graficas en esta versión
    – John Doe
    Commented el 18 ago. 2021 a las 14:04

Tu Respuesta

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

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