我想根据 chart.js 中的值放置不同颜色的条

Question

我正在创建不同的聊天以供分析，其中一个是条形图，其中我需要根据值填充颜色，如果值小于或等于 20，颜色为红色，如果 20 到 60 颜色应为黄色如果它超过 60，它应该是绿色的。

代码如下

JS:-

var ctx6 = document.querySelector('#resultsChart6').getContext('2d');
var options6 = {
  type: 'bar',
  data: {
      labels: ['Label1','Label2','Label3','Label4','Label5'],
      responsive: false,
      datasets: [{
        label: "Your Score in %",
        data: [((section1Total / (section1Question * 5)) * 100),((section2Total / (section2Question * 5)) * 100),((section3Total / (section3Question * 5)) * 100),((section4Total / (section4Question * 5)) * 100),((section5Total / (section5Question * 5)) * 100)],
        backgroundColor: '#2ecc71'
      }
          
      ]
  },
  options: {
    responsive: true,
    legend: {
       position: 'top' // place legend on the right side of chart
    },
    scales: {
       xAxes: [{
          stacked: true // this should be set to make the bars stacked
       }],
       yAxes: [{
          stacked: true // this also..
       }]
    }
 }
}

new Chart(ctx6, options6);

Answer 1

您可以为此使用可编写脚本的选项：

const options = {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 20, 23, 50, 60, 65],
      backgroundColor: (ctx) => {
        if (ctx.raw <= 20) {
          return 'red';
        }

        if (ctx.raw <= 60) {
          return 'yellow';
        }

        return 'green';
      }
    }]
  },
  options: {}
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.js"></script>
</body>

我想根据 chart.js 中的值放置不同颜色的条

I want to put bar of different color by the values in chart.js

chart.js