Chart Js , multiples lineas en un label

publicado por: Anonymous

Requerimiento

  • Poder insertar dos lineas en un label, es decir que cuando pulse “AQUI DOS LINEAS ” se activen o desactiven las dos lineas que asigne.

Imagen:introducir la descripción de la imagen aquí

Esperado
introducir la descripción de la imagen aquí

https://jsfiddle.net/palaceslittle/sehf31cy/

_x000D_

_x000D_

var ctx = document.getElementById("myChart").getContext('2d');_x000D_
var myChart = new Chart(ctx, {_x000D_
    type: 'line',_x000D_
    data: {_x000D_
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],_x000D_
        datasets: [_x000D_
        {_x000D_
            label: 'AQUI DOS LINEAS',_x000D_
            data: [12, 19, 3, 5, 2, 3],_x000D_
            backgroundColor:'rgba(255, 99, 132, 0.2)',    _x000D_
            borderWidth: 1_x000D_
        },_x000D_
            {_x000D_
            label: 'Xxxx',_x000D_
            data: [22, 29, 33, 55, 52, 33],_x000D_
            backgroundColor:'rgba(255, 99, 132, 0.2)',    _x000D_
            borderWidth: 1_x000D_
        }_x000D_
        ]_x000D_
    },_x000D_
    options: {_x000D_
        scales: {_x000D_
            yAxes: [{_x000D_
                ticks: {_x000D_
                    beginAtZero:true_x000D_
                }_x000D_
            }]_x000D_
        }_x000D_
    }_x000D_
});

_x000D_

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.min.js"></script>_x000D_
<canvas id="myChart" width="1500" height="290"></canvas>

_x000D_

_x000D_

_x000D_

solución

En ChartJS puedes definir tus propios labels y el comportamiento que van a tener. Lo que tienes que hacer es en las opciones de configuración, para las leyendas (legend), definir cuántos labels va a haber (en tu caso sólo una con el texto “AQUI DOS LINEAS”) y las acciones que van a ocurrir cuando se pulsan (con onClick).

Aquí puedes ver cómo sería el código comentado:

....
options: {
    ....
    // aquí va la configuración de las leyendas
    legend: {
      // aquí los datos de los labels
      labels: {
        // generamos un único label del color que quieres
        generateLabels: function(chart) {
          return [{
            text: 'AQUI DOS LINEAS',
            fillStyle: 'rgba(255, 99, 132, 0.2)'
          }]
        }
      },
      // aquí definimos el comportamiento que ocurrirá cuando se pulse la leyenda
      onClick: function(e, legendItem) {
        var ci = this.chart;
        // para cad una de las líneas de datos
        ci.data.datasets.forEach(function(e, i) {
          var meta = ci.getDatasetMeta(i);
          // si están visibles las escondemos y viceversa
          if (meta.hidden == true) {
            meta.hidden = false;
          } else {
            meta.hidden = true;
          }
        });
        // redibujamos la gráfica
        ci.update();
      }
    }
    ....
  }
....

Y aquí te pongo una pequeña demo basada en tu código:

_x000D_

_x000D_

var ctx = document.getElementById("myChart").getContext('2d');_x000D_
var myChart = new Chart(ctx, {_x000D_
  type: 'line',_x000D_
  data: {_x000D_
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],_x000D_
    datasets: [{_x000D_
        label: 'AQUI DOS LINEAS',_x000D_
        data: [12, 19, 3, 5, 2, 3],_x000D_
        backgroundColor: 'rgba(255, 99, 132, 0.2)',_x000D_
        borderWidth: 1,_x000D_
        hidden: true_x000D_
      },_x000D_
      {_x000D_
        label: 'Xxxx',_x000D_
        data: [22, 29, 33, 55, 52, 33],_x000D_
        backgroundColor: 'rgba(255, 99, 132, 0.2)',_x000D_
        borderWidth: 1,_x000D_
        hidden: true_x000D_
      }_x000D_
    ]_x000D_
  },_x000D_
  options: {_x000D_
    scales: {_x000D_
      yAxes: [{_x000D_
        ticks: {_x000D_
          beginAtZero: true_x000D_
        }_x000D_
      }]_x000D_
    },_x000D_
    legend: {_x000D_
      labels: {_x000D_
        generateLabels: function(chart) {_x000D_
          return [{_x000D_
            text: 'AQUI DOS LINEAS',_x000D_
            fillStyle: 'rgba(255, 99, 132, 0.2)'_x000D_
          }]_x000D_
        }_x000D_
      },_x000D_
      onClick: function(e, legendItem) {_x000D_
        var ci = this.chart;_x000D_
        ci.data.datasets.forEach(function(e, i) {_x000D_
          var meta = ci.getDatasetMeta(i);_x000D_
          if (meta.hidden == false) {_x000D_
            meta.hidden = true;_x000D_
          } else {_x000D_
            meta.hidden = false;_x000D_
          }_x000D_
        })_x000D_
        ci.update();_x000D_
      }_x000D_
    }_x000D_
  }_x000D_
});

_x000D_

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.min.js"></script>_x000D_
<canvas id="myChart" width="1500" height="290"></canvas>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *