0

Tengo problema para asignarle el color a las barras de mi grafica chart js, me gustaria que el backgroundColor cambiara de acuerdo a una condición (IF, y en esta condición agregar el rango y por rango que cambie el color de la barra de mi gráfica, si cambia el valor de la variable que cambie el color de la barra también), tenia una idea pero no funciona correctamente, desconozco como codificar esta condición, de antemano muchas gracias!

var dato = 230;
var colorBar;
        if(dato >= 0 && dato <= 100){
            var verde = 'rgb(0,228,0)';
           // colorBar.backgroundColor(verde);
        }if(dato > 101 && dato <= 200){
            var amarillo = 'rgb(255,255,0)';
            //colorBar.backgroundColor(amarillo);
        }if(dato > 201 && dato <= 300){
            var naranja = 'rgb(255,126,0)';
            //colorBar.backgroundColor(naranja);
        }
        




var ctx = document.getElementById("myChart").getContext("2d");

var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels:"Informacion",
        datasets:[
        {
            label:"Dato ",
            backgroundColor:colorBar,
            data: [dato]
            }
        ]
    }, 
    options:{
        scales:{
            yAxes:[{
                stacked: true,
                ticks:{
                    max: 500,
                    beginAtZero: true
                }
            }],
            xAxes:[{
                barThickness : 23 
            }]
        }
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js" integrity="sha512-hZf9Qhp3rlDJBvAKvmiG+goaaKRZA6LKUO35oK6EsM0/kjPK32Yw7URqrq3Q+Nvbbt8Usss+IekL7CRn83dYmw==" crossorigin="anonymous"></script>
    <script type="text/javascript" src="moment.js"></script>
    <script type="text/javascript" src="Chart.js"></script>
    <script type="text/javascript" src="chartjs-plugin-streaming.js"></script>
  <canvas id="myChart" width="100px" height="80px"> </canvas>

1 respuesta 1

0

Tendrá que enviar a actualizar el Chart cada vez que ese valor de dato cambie.

creo que podría hacer una función para actualizar cada vez que necesite. Esto es asumiendo que su chart solo tiene una sola columna.

function actualizaChartDato(dato) {
var colorBar;
        if(dato >= 0 && dato <= 100){
            var verde = 'rgb(0,228,0)';
           // colorBar.backgroundColor(verde);
        }if(dato > 101 && dato <= 200){
            var amarillo = 'rgb(255,255,0)';
            //colorBar.backgroundColor(amarillo);
        }if(dato > 201 && dato <= 300){
            var naranja = 'rgb(255,126,0)';
            //colorBar.backgroundColor(naranja);
        }

          if( myChart.data.datasets.length ) {
          myChart.data.datasets[0].backgroundColor[0] = colorBar;
          myChart.data.datasets[0].data = [dato];
          myChart.update();
        }

}

// llamar a actualizar dato cuando necesite
actualizaChartDato(280);

si fuera el caso de unos X datasets con unas Y columnas: por ej: 2 datasets con 3 columnas

var datos = [
    [32, 456, 238],
    [432, 4, 3]
];

var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: "Informacion",
        datasets: [{
            label: "Datos A",
            backgroundColor: colorBar,
            data: datos[0]
        }, {
            label: "Datos B",
            backgroundColor: colorBar,
            data: datos[1]
        }]
    },
    options: {
        scales: {
            yAxes: [{
                stacked: true,
                ticks: {
                    max: 500,
                    beginAtZero: true
                }
            }],
            xAxes: [{
                barThickness: 23
            }]
        }
    }
});

function actualizaChartDato(dataSets) {
    if (myChart.data.datasets.length === dataSets.length) {
        for (var i = 0; i < dataSets.length: i++) {
            var datos = dataSets[i];

            if (myChart.data.datasets[i].backgroundColor.length === datos.length) {
                for (var j = 0; j < datos.length; j++) {
                    var dato = datos[i];
                    var colorBar;
                    if (dato >= 0 && dato <= 100) {
                        var verde = 'rgb(0,228,0)';
                        // colorBar.backgroundColor(verde);
                    }
                    if (dato > 101 && dato <= 200) {
                        var amarillo = 'rgb(255,255,0)';
                        //colorBar.backgroundColor(amarillo);
                    }
                    if (dato > 201 && dato <= 300) {
                        var naranja = 'rgb(255,126,0)';
                        //colorBar.backgroundColor(naranja);
                    }

                    myChart.data.datasets[i].backgroundColor[j] = colorBar;
                    myChart.data.datasets[i].data = datos;
                }
            }
        }
        myChart.update();

    }

}

var otrosDatos = [
    [55, 777, 234],
    [2, 422, 123]
];
actualizaChartDato(otrosDatos);
2
  • ah ok, entonces se necesita actualizar el chart cuando el valor cambie, y si agrego mas barras a mi gráfica no se podría aplicar la misma solución? o seria diferente, de hecho si agregare mas barras (datos) a la gráfica
    – Clouds556
    Commented el 8 dic. 2020 a las 19:05
  • acabo de editar mi respuesta espero le sirva! Commented el 9 dic. 2020 a las 6:00

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.