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

Question

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

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

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

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

选项：

• min 为最小值-0.2但不小于0；

• max比最大值+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（这里我期望橙色），则渐变不应达到绿色，对于较低的值也是如此......我希望它合理。有人能指出我正确的方向吗？谢谢！

Answer 1

插件核心 API提供了一系列可用于执行自定义代码的挂钩。您可以使用afterLayout钩子为 y 轴创建渐变，以扩展所需区域（值 0 到 5）。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);  请看下面的示例并了解它是如何工作的。const data = [2, 2.25, 3.3];new Chart(document.getElementById("chart"), {  type: "bar",  plugins: [{    afterLayout: chart => {      let ctx = chart.chart.ctx;      ctx.save();      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);         gradient.addColorStop(0, '#FF5722');                 gradient.addColorStop(0.5, '#FFC107');       gradient.addColorStop(1, '#8BC34A');                 chart.data.datasets[0].backgroundColor = gradient;      ctx.restore();    }  }],  data: {    labels: ["A", "B", "C"],    datasets: [{      label: "Evaluation",      data: data    }]  },  options: {    scales: {      yAxes: [{        ticks: {          min: Math.min(...data) - 0.2,          max: Math.max(...data) + 0.2,          stepSize: 0.5        }      }]    }  }});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script><canvas id="chart" height="80"></canvas>