Chartjs基于最小值和最大值的渐变背景色 [英] Chartjs gradient background color based on min and max values

问题描述

我正在使用带有vue-chart的chartjs在我的应用程序中显示一些数据，实际上我想要实现的是制作一个具有从红色到绿色的背景色的条形图.

I'm using chartjs with vue-chart to display some data in my application and actually what I would like to achieve is to have a Bar chart with a background color from red to green.

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

The chart has dynamic min and max values but it cannot be less than 0 and greater than 5. Similar to a 5 star rating.

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

In order to show differences in the displayed data I'm not fixing the chart min/max from 0 to 5.

当前，这是显示我的图表的代码:

Currently this is the code to show my chart:

选项:

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

• min is -0.2 than minimum value but not less than 0;

max是最大值的+0.2，但不大于5；

max is +0.2 than maximum value but not greater than 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)

结果与我正在寻找的结果非常接近:

The result is pretty close to what I'm looking for:

不幸的是，我想看到的是0上的红色和5上的绿色，因此，如果最大值为2.5(这里我希望是橙色)，则梯度应该不会达到绿色，而对于较低的值，梯度应该不会达到绿色...我希望这是有道理的.有人可以指出我正确的方向吗?谢谢！

Unfortunately what I would like to see is the red color on 0 and green on 5 so the gradient should not reach the green if maximum value is 2.5 (here I would expect the orange) and the same for lower values... I hope it make sense. Can someone point me to the right direction? Thanks!

推荐答案

插件核心API 提供了一系列可用于执行自定义代码的挂钩.您可以使用 afterLayout 钩子为y轴创建一个渐变，以扩展所需的区域(值0到5).

The Plugin Core API offers a range of hooks that may be used for performing custom code. You can use the afterLayout hook for creating a gradient for the y-axis that spreads that desired area (values 0 to 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);  

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

Please take a look at below sample and see how it works.

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>

这篇关于Chartjs基于最小值和最大值的渐变背景色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！