1

Buen día , antes que nada le agradezco aquien pueda ayudarme, soy nuevo en esto y estoy creando un gráfico con chart.js necesito que cada barra cambie de color de acuerdo a condicionales diferentes, por ejemplo para a debe ser verde si el valor se encuentra entre 0 -15, naranja entre 16 y 30. mientras que para b verde 0 - 10, naranja de 11-20, espero puedan ayudarme.

var chartColors = {
  color1: 'rgba(132, 228, 57, 0.7)',
  color2: 'rgba(197, 228, 51, 0.9)',
  color3: 'rgba(251, 251, 0, 0.9)',
  color4: 'rgba(218, 117, 57, 0.5)',
  color5: 'rgba(218, 57, 57, 0.5)'
};

var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["Categorías"],
    datasets: [{
      label: 'a',
       backgroundColor: [
        chartColors.color1,
        chartColors.color1,
        chartColors.color1,
        chartColors.color1,
        chartColors.color1
      ],
      data: [29]
    },{

      label: "b",

      data: [31],
      backgroundColor: [
       chartColors.color1
     ],
   },{

      label: "c",

      data: [41],
      backgroundColor: [
       chartColors.color1
     ],
   },{

     label: "d",

     data: [30],
     backgroundColor: [
      chartColors.color1
    ],
  },{

    label: "e",

    data: [61],
    backgroundColor: [
     chartColors.color1
   ],
 }
  ],
  }
});




 var colorChangeValue = 50; //set this to whatever is the deciding color change value
    var dataset = myChart.data.datasets[0];
    for (var i = 0; i < dataset.data.length; i++) {
      if (dataset.data[i] < 30) {
        dataset.backgroundColor[i] = chartColors.color1;
      }
      else if ((dataset.data[i] > 31) && (dataset.data[i] <= 39)){
        dataset.backgroundColor[i] = chartColors.color2;
      }
      else if ((dataset.data[i] > 40) && (dataset.data[i] <= 50)){
        dataset.backgroundColor[i] = chartColors.color3;
      }
      else if ((dataset.data[i] > 51) && (dataset.data[i] <= 60)){
        dataset.backgroundColor[i] = chartColors.color4;
      }
      else{
       dataset.backgroundColor[i] = chartColors.color5;
      }
    }
    myChart.update();

Desconozco si es la forma correcta ya que no se como crear o asilar cada barra para aplicar la condicional requerida a cada una de estas.

2 respuestas 2

1

Estas accesando al dataset incorrecto. Necesitas accesar a myChart.data.datasets asi:

var chartColors = {
  color1: 'rgba(132, 228, 57, 0.7)',
  color2: 'rgba(197, 228, 51, 0.9)',
  color3: 'rgba(251, 251, 0, 0.9)',
  color4: 'rgba(218, 117, 57, 0.5)',
  color5: 'rgba(218, 57, 57, 0.5)'
};

var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["Categorías"],
    datasets: [{
      label: 'a',
       backgroundColor: [
        chartColors.color1,
        chartColors.color1,
        chartColors.color1,
        chartColors.color1,
        chartColors.color1
      ],
      data: [29]
    },{

      label: "b",

      data: [31],
      backgroundColor: [
       chartColors.color1
     ],
   },{

      label: "c",

      data: [41],
      backgroundColor: [
       chartColors.color1
     ],
   },{

     label: "d",

     data: [30],
     backgroundColor: [
      chartColors.color1
    ],
  },{

    label: "e",

    data: [61],
    backgroundColor: [
     chartColors.color1
   ],
 }
  ],
  }
});

 var colorChangeValue = 50; //set this to whatever is the deciding color change value
    var dataset = myChart.data.datasets;
    for (var i = 0; i < dataset.length; i++) {
      if (dataset[i].data <= 30) {
        dataset[i].backgroundColor = chartColors.color1;
      }
      else if ((dataset[i].data >= 31) && (dataset[i].data <= 39)){
        dataset[i].backgroundColor = chartColors.color2;
      }
      else if ((dataset[i].data > 40) && (dataset[i].data <= 50)){
        dataset[i].backgroundColor = chartColors.color3;
      }
      else if ((dataset[i].data > 51) && (dataset[i].data <= 60)){
        dataset[i].backgroundColor = chartColors.color4;
      }
      else{
       dataset[i].backgroundColor = chartColors.color5;
      }
    }
    myChart.update();
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.css"/>
<canvas id="myChart"></canvas>

3
  • Wooaw ,muchas gracias lo resolviste super rapido, jeje llevo mas de dos días y no encontraba la solución, ahora solo intentare ingresar los valores desde una base de php deseame y como te comnetaba estoy empezando en esto, hay alguna forma de darte like, puntos o contribuir en algo?.
    – GibranQ
    Commented el 29 jul. 2019 a las 23:18
  • Ya lo hiciste, ya seleccionaste la respuesta como correcta. Tambien puedes votar a favor.
    – alanfcm
    Commented el 29 jul. 2019 a las 23:30
  • Ok otra duda como puedo encasillar varias condicionales para cada una de las barras?, es que quiero poder cinco if anidados con diferentes valores para cada barra.
    – GibranQ
    Commented el 29 jul. 2019 a las 23:37
0

quedaria algo asi...

var a = 5;
var b = 5;
var colora = "";

if(a<=15){
  colora = "rgba(255,0,0,1)";
}else{
  colora = "rgba(255,200,0,1)";
}

if(b<=10){
   colorb = "rgba(255,0,0,1)";
   }else{
     colorb = "rgba(255,200,0,1)"
   }

var chartColors = {
  color1: colora,
  color2: colorb,
};

var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["Categorías"],
    datasets: [{
      label: 'a',
       backgroundColor: [
        colora,
      ],
      data: [a]
    },{

      label: "b",

      data: [b],
      backgroundColor: [
       colorb
     ],
   },
  ],
  }
});

simplementa se hace una validacion con los rangos, y ya con esto puedes verificar que color tendrá

2
  • Muchas gracias, en si terminé oprtando por usarlo en canvas ya que baje un codigo de am4charts pero no logré modificarlo apenas toco algo y truena, conoces esos samples?
    – GibranQ
    Commented el 29 jul. 2019 a las 23:20
  • no, no los conozco pero igual tratare de ayudarte. Commented el 30 jul. 2019 a las 13:19

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.