Создайте IF, чтобы изменить chart.js bar color

Question

Я новичок в JavaScript, и я использую chart.js для создания визуализации данных, и мне нужно изменить цвет всей строки для разных значений, код i до сих пор это то, что следует, но я не могу заставить его работать, это не дает мне никаких ошибок, поэтому я не знаю, должны ли они идти.

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"; 
     }; 

Answer 1

Решенный, я неправильно звонил в библиотеку.

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(); 
     }; 

Answer 2

Вам необходимо установить цвета для 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"; 
}; 

для 1-го блока, где barChart - ваш объект диаграммы. Обратите внимание, что приведенный выше код предполагает одну серию из двух элементов.

---

Fiddle - https://jsfiddle.net/2a86gqsa/

Обратите внимание, что вы имели dData1 < 85 во втором блоке - я изменил его на dData2 < 85. Увидев, что большая часть кода для 2 блоков является общей, вы можете переместить ее в функцию.