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

Posted 2023-03-25

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

【英文标题】：ChartJs, How can I get different color fills between my two datasets in a line graph?

【发布时间】：2020-08-24 17:47:57

【问题描述】：

以上是我使用 ChartJS 制作的图表。我有两个数据集。我也像我想要的那样填充了两个数据集之间的空间。但我需要得到两种不同的颜色来填充。当 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'
        )
      

对此的任何帮助将不胜感激。

【参考方案1】：

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

此解决方案基于答案https://***.com/a/36941860/2358409，该答案必须稍作调整才能与 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" ></canvas>

【讨论】：

好东西。感谢您的帮助！

我遇到了比率返回无效数字的情况。当所有Hours 数据点都高于Goal 数据点时，就会发生这种情况，反之亦然。我无法在注释中格式化代码，但在这些情况下，您只需将比率更改为 0 或 1，然后使所有 4 个渐变颜色相同。比率为 0 时为红色，比率为 1 时为绿色。