ChartJs，如何在折线图中的两个数据集之间获得不同的颜色填充？

Question

以上是我使用 ChartJS 制作的图表。我有两个数据集。我还按照我的意愿填充了两个数据集之间的 space 。但是我需要两种不同的颜色来填充。当 Hours 数据集大于 Goal 数据集时，我希望填充为绿色，而当 Hours 数据集小于 Goal 时，我希望它为红色。我真的希望有一种方法可以使用 ChartJS 来执行此操作，这样我就不必在 Canvas.

中重新创建它

如果重要，这在 Vue.Js 中。

这是两个数据集的代码：

    const dataSets = [{

        label: this.dataSetLabel,
        data: this.dataArray,
        backgroundColor: new Array(this.dataArray.length).fill('rgba(255, 0, 0, 0.8)'), // red
        borderColor: new Array(this.dataArray.length).fill('rgba(255, 0, 0, 0.8)'),
        borderWidth: 1,
        fill: '+1'
      }]
      if (this.fi !== 3) {

        dataSets.push({
          label: 'Goal',
          data: new Array(this.dataArray.length).fill(this.user.braceHours),
          type: 'line',
          backgroundColor: new Array(this.dataArray.length).fill('rgba(84, 232, 198, 0.8)'), // green
          borderColor: new Array(this.dataArray.length).fill('rgba(84, 232, 198, 0.8)'),
          borderWidth: 1,
          fill: '-1'
        })
      }

如有任何帮助，我们将不胜感激。

Answer 1

您可以 extend an existing line chart 如下面的可运行代码片段所示。

This solution is based on the answer that had to be slightly adapted to work with the latest stable version of Chart.js (2.9.3).

const goal = 2;
Chart.defaults.areaConditionalColors = Chart.defaults.line;
Chart.controllers.areaConditionalColors = Chart.controllers.line.extend({
  update: function(reset) {
    var yAxis = this.chart.scales['y-axis-0'];  
    var max = Math.max.apply(null, this.chart.data.datasets[0].data);
    var yTop = yAxis.getPixelForValue(max);
    var yGoal = yAxis.getPixelForValue(goal);
    var min = Math.min.apply(null, this.chart.data.datasets[0].data);
    var yBottom = yAxis.getPixelForValue(min);

    // build a gradient that changes the color at the goal
    var ctx = this.chart.chart.ctx;
    var gradient = ctx.createLinearGradient(0, yTop, 0, yBottom);
    var ratio = Math.min((yGoal - yTop) / (yBottom - yTop), 1);
    gradient.addColorStop(0, 'green');
    gradient.addColorStop(ratio, 'green');
    gradient.addColorStop(ratio, 'red');
    gradient.addColorStop(1, 'red');
    this.chart.data.datasets[0].backgroundColor = gradient;

    return Chart.controllers.line.prototype.update.apply(this, arguments);
  }
});

new Chart('myChart', {
  type: 'areaConditionalColors',
  data: {
    labels: ['FRI', 'SAT', 'SUN', 'MON', 'TUE', 'WED', 'THU'],
    datasets: [{
      label: 'Hours',
      backgroundColor: 'green',
      data: [0, 3, 0, 9, 4, 0, 0],
      fill: '+1'
    },
    {
      label: 'Goal',
      backgroundColor: 'rgba(84, 232, 198, 0.8)',
      data: [goal, goal, goal, goal, goal, goal, goal],
      fill: '-1'
    }]
  },
  options: {
    legend: {
      onClick: e => e.stopPropagation()
    },
    tooltips: {
      mode: 'x'
    }
  }  
});

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