使用 ChartJS 条形图中每个条形的渐变颜色

Question

我正在尝试使用 ChartJS 创建一个条形图，如下所示：

我想知道如何根据每个条形的高度分别添加渐变颜色。

我在这里createLinearGradient找到了一个非常接近的解决方案，但它为整个图表设置了，而不是为单个条形设置了 。

另外，如果我为每个条形创建渐变，则此解决方案更接近，但是随后，我想根据条形高度设置渐变。

有没有办法stopPoints根据条形高度而不是<canvas />元素上的坐标来指定？

或者也许是一种根据特定条形高度计算图形坐标的方法？

提前致谢 ：）

Answer 1

为了获得与您提供的示例图像类似的效果，您可以使用具有三个数据集的堆叠条形图。看看代码片段就明白我的意思了。

var bar_ctx = document.getElementById('bar-chart').getContext('2d');

var bar_chart = new Chart(bar_ctx, {
  type: 'bar',
  data: {
    labels: ["1", "2", "3", "4", "5", "6"],
    datasets: [{
        label: 'test0',
        data: [3, 4, 7, 3, 6, 2],
        backgroundColor: 'deepskyblue',
      }, {
        label: 'test1',
        data: [2, 9, 3, 3, 4, 8],
        backgroundColor: 'skyblue'
      },
      {
        label: 'test2',
        data: [2, 9, 3, 3, 4, 8],
        backgroundColor: 'powderblue'
      }
    ]
  },
  options: {
    legend: {
      display: false
    },
    scales: {
      yAxes: [{
        stacked: true,
        ticks: {
          beginAtZero: true
        }
      }],
      xAxes: [{
        stacked: true,
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>

<canvas id="bar-chart"></canvas>