Chart js 饼图，深色表示较高的值，较浅的阴影表示较低的值。我每月显示值答案

【问题标题】：Chart js pie chart, darker shade for higher value and lighter shade for lower value. I'm displaying values monthlyChart js 饼图，深色表示较高的值，较浅的阴影表示较低的值。我每月显示值
【发布时间】：2020-12-31 08:51:53
【问题描述】：

我的仪表板上有一个饼图，我正在使用 chart.js。我必须在此饼图中显示属于某个类别的每月金额。我将在此图表中使用像“黄色”这样的单一颜色，并且我希望值较高的月份使用较暗的阴影，而值较低的月份则使用较浅的黄色阴影。这有可能实现吗？我尝试使用下面的 js 代码没有成功。

提前致谢。

var amount = {
            CATEGORY : [],
            
        };
        
        var len = data.length;
        //var CATEGORY=[1,1,1];

        for (var i = 0; i < len; i++) {
            if (data[i].for_month == "JANUARY") {
                amount.CATEGORY.push(data[i].amount);
            }
            if (data[i].for_month == "FEBURARY") {
                amount.CATEGORY.push(data[i].amount);
            }
            if (data[i].for_month == "MARCH") {
                amount.CATEGORY.push(data[i].amount);
            }
            if (data[i].for_month == "APRIL") {
                amount.CATEGORY.push(data[i].amount);
            }
            if (data[i].for_month == "MAY") {
                amount.CATEGORY.push(data[i].amount);
            }
            if (data[i].for_month == "JUNE") {
                amount.CATEGORY.push(data[i].amount);
            }
            if (data[i].for_month == "JULY") {
                amount.CATEGORY.push(data[i].amount);
            }
            if (data[i].for_month == "AUGUST") {
                amount.CATEGORY.push(data[i].amount);
            }
            if (data[i].for_month == "SEPTEMBER") {
                amount.CATEGORY.push(data[i].amount);
            }
            if (data[i].for_month == "OCTOBER") {
                amount.CATEGORY.push(data[i].amount);
            }
            if (data[i].for_month == "NOVEMBER") {
                amount.CATEGORY.push(data[i].amount);
            }
            else if (data[i].for_month == "DECEMBER") {
                amount.CATEGORY.push(data[i].amount);
            }
            
        }
        var backgroundColors = amount.map(v => sortedData.indexOf(v) >= amount.length - 3 ? 'red' : 'green');
        var data1 = {
            labels : ["CATEGORY"],
            datasets : [
                {
                    label : "Categories",
                    data : [amount.CATEGORY[4], amount.CATEGORY[3], amount.CATEGORY[7], amount.CATEGORY[0], amount.CATEGORY[8], amount.CATEGORY[6], amount.CATEGORY[5], amount.CATEGORY[1], amount.CATEGORY[11], amount.CATEGORY[10], amount.CATEGORY[9], amount.CATEGORY[2]],
                    
                    backgroundColor : backgroundColors,

【问题讨论】：

maybe this helps
感谢 Dolmushcu 的回复，但我的价值观是动态的，我不能这样放置价值观。我想我需要适当的代码来实现这一点，不知道我很困惑。

标签： javascript charts chart.js

【解决方案1】：

function adjust(color, amount) {
      return '#' + color.replace(/^#/, '').replace(/../g, color => ('0' + Math.min(255, Math.max(0, parseInt(color, 16) + amount)).toString(16)).substr(-2));
    }

Check out here

function adjust(color, amount) {
  return '#' + color.replace(/^#/, '').replace(/../g, color => ('0' + Math.min(255, Math.max(0, parseInt(color, 16) + amount)).toString(16)).substr(-2));
}


var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['value 1', 'value 2', 'value 3', 'value 4'],
    datasets: [{
      label: 'Dataset 1',
      backgroundColor: [],
      data: [33, 57, 65, 42]
    }],
  }
});

let dataset = myChart.data.datasets[0];

let data = dataset.data;
let data_ord = [...data].sort();

let plus = 0;

for (let i = 0; i < data_ord.length; i++) {
  let value = data_ord[i];
  dataset.backgroundColor[data.indexOf(value)] = adjust('#fdd500', plus);
  plus -= 30
}
myChart.update();

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js" integrity="sha512-d9xgZrVZpmmQlfonhQUvTR7lMPtO7NkZMkA0ABN3PHCbKA5nqylQ/yWlFAyY6hYgdF1Qh6nYiuADWwKB4C2WSw==" crossorigin="anonymous"></script>
<canvas id="myChart" height="150"></canvas>

【讨论】：