创建IF来改变chart.js条的颜色

Create IF to change chart.js bar color

本文关键字：颜色 js chart IF 改变创建更新时间：2023-09-26

我是JavaScript的新手，我正在使用chart.js来创建一些数据可视化，我需要改变不同值的整个栏的颜色，到目前为止我所拥有的代码是以下内容，但我不能使它工作，这不会给我任何错误，所以我不知道要去。

var dData1 = 90; ///////CARREGAR DADOS  DE FACTURAÇÃO (for developer)
var dData2 = 70; ///////CARREGAR DADOS  DE FACTURAÇÃO (for developer)
    var barChartData = {
            labels: ["MÊS", "ANO"],
            datasets: [{
                fillColor: "#f37c8a",
                strokeColor: "none",
                data: [dData1, dData2]
                }]
        }
    if (dData1 < 75)
        {
            barChartData.datasets[0].fillColor = "#f37c8a";
        }
         else if (dData1 > 76 && dData1 < 85) 
        {
            barChartData.datasets[0].fillColor = "#f3e97c";
        } 
        else if (dData1 > 86)
        {
            barChartData.datasets[0].fillColor = "#9ae27d";
        } else 
        {
            barChartData.datasets[0].fillColor = "#fff";
        };  
    if (dData2 < 75)
        {
            barChartData.datasets[0].fillColor = "#f37c8a";
        }
         else if (dData2 > 76 && dData1 < 85) 
        {
            barChartData.datasets[0].fillColor = "#f3e97c";
        } 
        else if (dData2 > 86)
        {
            barChartData.datasets[0].fillColor = "#9ae27d";
        } else 
        {
            barChartData.datasets[0].fillColor = "#fff";
        };

您需要在生成图表后为bars 设置颜色。你需要设置fillColor, highlightFill和_saved.fillColor (Chart.js用来在工具提示悬停后恢复条的颜色)

所以你需要像这样的东西

if (dData1 < 75)
{
    barChart.datasets[0].bars[0].fillColor = barChart.datasets[0].bars[0].highlightFill = barChart.datasets[0].bars[0]._saved.fillColor = "#f37c8a";
}
else if (dData1 > 76 && dData1 < 85) 
{
    barChart.datasets[0].bars[0].fillColor = barChart.datasets[0].bars[0].highlightFill = barChart.datasets[0].bars[0]._saved.fillColor = "#f3e97c";
} 
else if (dData1 > 86)
{
    barChart.datasets[0].bars[0].fillColor = barChart.datasets[0].bars[0].highlightFill = barChart.datasets[0].bars[0]._saved.fillColor = "#9ae27d";
} else 
{
    barChart.datasets[0].bars[0].fillColor = barChart.datasets[0].bars[0].highlightFill = barChart.datasets[0].bars[0]._saved.fillColor = "#fff";
};

为第一个块，其中barChart是您的图表对象。注意，上面的代码假设一个包含2个元素的单一系列。

提琴- https://jsfiddle.net/2a86gqsa/

注意，您在第二个块中有dData1 < 85 -我将其更改为dData2 < 85。看到这两个块的大部分代码都是通用的，您可能希望将其移动到一个函数中。

解决了，我调用库中的项错误。

    var dData1 = 90; ///////CARREGAR DADOS  DE FACTURAÇÃO
    var dData2 = 70; ///////CARREGAR DADOS  DE FACTURAÇÃO
    var barChartData = {
            labels: ["MÊS", "ANO"],
            datasets: 
                 [{
                fillColor: "rgba(220,220,220,1)",
                strokeColor: "rgba(220,220,220,0.0)",
                highlightFill: "rgba(220,220,220,0.0)",
                highlightStroke: "rgba(220,220,220,0)",
                data: [dData1, dData2]
                }]
        }
    var ctx = document.getElementById("myChart").getContext("2d");
    var myChart = new Chart(ctx).Bar(barChartData, {
      responsive: true,
      barValueSpacing: 10
    });
    if (barChartData.datasets[0].data=[dData1] < 75)
        { 
            console.log("vermelho");
            myChart.datasets[0].bars[0].fillColor = "rgba(243,124,138,1.00)";
            myChart.update();
        }
         else if (dData1 > 76 && dData1 < 85) 
        {
            console.log("amarelo");
            myChart.datasets[0].bars[0].fillColor = "rgba(243,233,7,1.00)";
            myChart.update();
        } 
        else if (dData1 > 86)
        {
            console.log("verde");
            myChart.datasets[0].bars[0].fillColor = "rgba(154,226,125,1.00)";
            myChart.update();
        } else 
        {
            console.log("branco");
            myChart.datasets[0].bars[0].fillColor = "rgba(255,255,255,1)";
            myChart.update();
        };  

    if (barChartData.datasets[0].data=[dData2] < 75)
        { 
            console.log("vermelho2");
            myChart.datasets[0].bars[1].fillColor = "rgba(243,124,138,1.00)";
            myChart.update();
        }
         else if (dData2 > 76 && dData2 < 85) 
        {
            console.log("amarelo2");
            myChart.datasets[0].bars[1].fillColor = "rgba(243,233,7,1.00)";
            myChart.update();
        } 
        else if (dData2 > 86)
        {
            console.log("verde2");
            myChart.datasets[0].bars[1].fillColor = "rgba(154,226,125,1.00)";
            myChart.update();
        } else 
        {
            console.log("branco2");
            myChart.datasets[0].bars[1].fillColor = "rgba(255,255,255,1)";
            myChart.update();
        };