如何在 Chart.js 水平条形图中对同一条形使用两种不同的颜色？

Question

我正在使用 Chart.js 处理水平条形图，我需要根据每个条形的值显示两种不同的颜色。具体来说，如果条形的值超过 150，我希望条形高于 150 的部分为红色，而低于或等于 150 的部分应保持灰色。

这是我想要实现的目标的直观表示： 当前实施：

我正在从 MySQL 数据库获取数据并将其呈现在图表中。这是我当前的脚本：

<script>
let myChart = document.getElementById('myChart').getContext('2d');

// Global options
Chart.defaults.global.defaultFontFamily = 'Lato';
Chart.defaults.global.defaultFontSize = 18;
Chart.defaults.global.defaultFontColor = '#666';

let massPopChart = new Chart(myChart, {
    type: 'horizontalBar',
    data: {
        labels: [
            <?php
            for ($i = 0; $i < count($phoneNumberArr); $i++) {
                echo "'$phoneNumberArr[$i]'".($i < count($phoneNumberArr) - 1 ? ',' : '');
            }
            ?>
        ],
        datasets: [{
            label: 'Belföldi perc',
            data: [
                <?php
                for ($i = 0; $i < count($valueArr); $i++) {
                    echo "'$valueArr[$i]'".($i < count($valueArr) - 1 ? ',' : '');
                }
                ?>
            ],
            backgroundColor: 'rgba(0,0,0,0.6)', // Default color
            borderWidth: 1,
            borderColor: '#777',
            hoverBorderWidth: 3,
            hoverBorderColor: '#FFF'
        }],
    },
    options: {
        title: {
            display: false,
            text: 'Összesítő',
            fontSize: 25
        },
        legend: {
            display: true,
            position: 'right',
            labels: {
                fontColor: '#000'
            }
        },
        layout: {
            padding: {
                left: 50,
                right: 0,
                bottom: 0,
                top: 0
            }
        },
    }
});
</script>

问题：

• 如何动态修改条形的背景颜色 根据值反射两种颜色？
• Chart.js中有没有具体的方法可以实现这种效果，或者我可以 需要考虑不同的方法吗？

附加信息：

• 我使用的是Chart.js版本。

• 图表当前显示条形的单一颜色，我想要 根据阈值实现双色逻辑。

Answer 1

我之前解决这个问题的方法是在图表js中使用堆叠条形图。您应该检查您的值，每当一个值高于 150 时，您就在 dataset1 中设置 150，并将高于 150 的金额放入 dataset2 中。如果您的金额低于 150，则将金额放入 dataset1 中，并将 0 放入 dataset2 中。在这里你可以看到我是如何做到的一个例子。

var config = {
  type: 'bar',
  data: {
    labels: ["January", "February", "March", "April", "May"],
    datasets: [{
      type: 'bar',
      label: 'Dataset 1',
      backgroundColor: "blue",
      data: [150, 150, 60, 50, 40],
    }, {
      type: 'bar',
      label: 'Dataset 2',
      backgroundColor: "red",
      data: [45,25,0,0,0]
    }]
  },
  options: {
    scales: {
      xAxes: [{
        stacked: true
      }],
      yAxes: [{
        stacked: true
      }]
    }
  }
};

var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.0/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>

Answer 2

尝试一下这个代码：

const ctx = document.getElementById('chart').getContext('2d');
const data = [150, 150, 60, 50, 40, 152, 300];

new Chart(ctx, {
  type: 'horizontalBar',
  data: {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
        fill: 'origin',
      label: "My First dataset",
            borderColor: 'black',
      data: data,
    }]
  },
  options: {
    legend: {
        display: false
    }
  },
   plugins: [{
        beforeRender: function (x, options) {
                var c = x.chart;
            var dataset = x.data.datasets[0];
            var xScale = x.scales['x-axis-0'];
            var xPos = xScale.getPixelForValue(0);
            console.log(c)
            var gradientFill = c.ctx.createLinearGradient(c.width, 0, 133.3333333333335, 0);
            gradientFill.addColorStop(0, 'red');
            gradientFill.addColorStop(xPos / c.height - 0.01, 'red');
            gradientFill.addColorStop(xPos / c.height + 0.01, 'black');
            gradientFill.addColorStop(1, 'black');
            console.log(x.data.datasets[0])
            for (var i = 0; i < x.data.datasets[0]._meta[Object.keys(dataset._meta)[0]].data.length; i++ ) {
              var model = x.data.datasets[0]._meta[Object.keys(dataset._meta)[0]].data[i]._model;
              model.backgroundColor = gradientFill;
            }
        }
    }]
})