Javascript 基于最小值和最大值的Chartjs渐变背景色

我正在使用chartjs和vue图表在我的应用程序中显示一些数据，实际上我想要实现的是一个背景颜色从红色到绿色的条形图

图表具有动态最小值和最大值，但不能小于0且大于5。类似于五星评级

为了显示显示数据的差异，我没有将图表的最小值/最大值从0固定到5

目前，这是显示我的图表的代码：

选项：

• 最小值比最小值-0.2，但不小于0

• 最大值比最大值+0.2，但不大于5

  return {
    legend: {
      display: false
    },
    scales: {
      yAxes: [
        {
          ticks: {
            beginAtZero: true,
            min,
            max,
            stepSize: 0.5
          }
        }
      ]
    }
  }
  

条形图数据：

  return {
    labels: this.labels,
    datasets: [
      {
        label: 'Evaluation',
        data: [
          this.photo.composition,
          this.photo.technique,
          this.photo.creativity,
          this.photo.content,
          this.photo.lighting
        ],
        borderWidth: 1
      }
    ]
  }

渲染图表：

  const gradient = this.$refs.canvas
    .getContext('2d')
    .createLinearGradient(0, 300, 0, 0)
  gradient.addColorStop(0, '#FF5722')
  gradient.addColorStop(0.5, '#FFC107')
  gradient.addColorStop(1, '#8BC34A')

  this.data.datasets[0].backgroundColor = gradient
  this.renderChart(this.data, this.options)

结果与我想要的非常接近：

不幸的是，我想看到的是0上的红色和5上的绿色，所以如果最大值为2.5（这里我希望是橙色），梯度不应该达到绿色，对于较低的值也是如此。。。我希望这是有意义的。 有人能给我指一下正确的方向吗？谢谢

提供了一系列钩子，可用于执行自定义代码。您可以使用

afterLayout

挂钩为y轴创建渐变，以扩展所需区域（值0到5）

请看下面的示例，看看它是如何工作的

const data=[2,2.25,3.3]；
新图表（document.getElementById（“图表”）{
输入：“酒吧”，
插件：[{
后布局：图表=>{
设ctx=chart.chart.ctx；
ctx.save（）；
设yAxis=图表刻度[“y轴-0”]；
设yBottom=yAxis.getPixelForValue（0）；
设yTop=yAxis.getPixelForValue（5）；
设梯度=ctx.createLinearGradient（0，yBottom，0，yTop）；
渐变。添加颜色停止（0，#FF5722’）；
渐变。添加颜色停止（0.5'#FFC107'）；
渐变。添加颜色停止（1，#8BC34A'）；
chart.data.dataset[0]。backgroundColor=渐变；
ctx.restore（）；
}
}],
数据：{
标签：[“A”、“B”、“C”]，
数据集：[{
标签：“评估”，
数据：数据
}]
},
选项：{
比例：{
雅克斯：[{
滴答声：{
min:Math.min（…数据）-0.2，
max:Math.max（…数据）+0.2，
步长：0.5
}
}]
}
}
});

嗨！谢谢你的回答！我想这对我有帮助。我只是不明白我应该如何在vue图表中添加这些额外的代码。我不使用元素，而是使用包含画布的组件。我很确定有办法做到这一点，但我在文档中找不到。我只是做到了。谢谢它起作用了！这真是太棒了@uminder，如果我也要求你提供半径梯度，这是不是太过分了？我真的不明白在
createRadiusGradient
中应该放哪些数字。。。谢谢如果你能这么客气的话，我为它专门设计了一个问题，谢谢：@Ayee Brazo:对不起，到目前为止我还没有用过
createRadiusGradient
。
let yAxis = chart.scales["y-axis-0"];
let yBottom = yAxis.getPixelForValue(0);
let yTop = yAxis.getPixelForValue(5);          
let gradient = ctx.createLinearGradient(0, yBottom, 0, yTop);