ChartJS 不同的背景渐变取决于数据（折线图）答案

【问题标题】：ChartJS different background gradient depending on data (line graph)ChartJS 不同的背景渐变取决于数据（折线图）
【发布时间】：2018-10-03 22:07:27
【问题描述】：

我正在尝试使用 ChartJS 折线图创建看起来像这样的东西。我的顶部渐变可以按我的意愿工作，但当我的数据值低于 0 时，我无法找到改变底部渐变的方法。

我尝试使用基于我的数据的不同背景颜色的数组，并且我尝试使用插件 beforeDraw 来更改背景颜色（它将它们全部更改为相同的颜色）。

【问题讨论】：

请阅读How do I ask a good question? 和How to create a Minimal, Complete, and Verifiable example。目前尚不清楚您的问题是什么以及您想要实现什么。您的屏幕截图显示了一条线，当它低于 0 时会改变笔触和填充颜色。这就是您的代码现在所做的吗？这是您想要实现的目标的示例吗？
这张照片是我想要实现的图表。对于正数据和负数据，我需要不同的背景颜色。抱歉，我没有说清楚。感谢您对我的帖子的建设性批评。谢谢。

标签： javascript ruby-on-rails chart.js

【解决方案1】：

Chart.js 问题#3071 Multiple fill colors for line chart 似乎符合您的目标。 official response 是使用CanvasGradient。幸运的是，'berosoboy' 有 posted an inline plugin 来做这件事。下面包括一个工作示例。我稍作修改以删除对window.myColors 的引用。

let posColour = 'rgba(0, 255, 0, .1)',
  negColour = 'rgba(255, 0, 0, .1)',
  myBarChart = new Chart(document.getElementById('chart'), {
    type: 'line',
    data: {
      labels: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'],
      datasets: [{
        label: 'Series1',
        data: [1, -1, 1, -1, 1, -1, 1, -1, 1, -1]
      }]
    },
    options: {
      maintainAspectRatio: false
    },
    // source: https://github.com/chartjs/Chart.js/issues/3071#issuecomment-371001496
    plugins: [{
      beforeRender: function(c, options) {
        var dataset = c.data.datasets[0];
        var yScale = c.scales['y-axis-0'];
        var yPos = yScale.getPixelForValue(0);

        var gradientFill = c.ctx.createLinearGradient(0, 0, 0, c.height);
        gradientFill.addColorStop(0, posColour);
        gradientFill.addColorStop(yPos / c.height - 0.01, posColour);
        gradientFill.addColorStop(yPos / c.height + 0.01, negColour);
        gradientFill.addColorStop(1, negColour);

        var model = c.data.datasets[0]._meta[Object.keys(dataset._meta)[0]].$filler.el._model;
        model.backgroundColor = gradientFill;
      }
    }]
  });

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="chart"></canvas>

Chart.js v3.x supports this natively:

let posColour = 'rgba(0, 255, 0, .1)',
  negColour = 'rgba(255, 0, 0, .1)',
  myBarChart = new Chart(document.getElementById('chart'), {
    type: 'line',
    data: {
      labels: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'],
      datasets: [{
        label: 'Series1',
        data: [1, -1, 1, -1, 1, -1, 1, -1, 1, -1],
        fill: {
          target: 'origin',
          above: posColour,
          below: negColour
        }
      }]
    },
    options: {
      maintainAspectRatio: false
    }
  });

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.min.js"></script>
<canvas id="chart"></canvas>

【讨论】：

非常好。我在创建图表时遇到了渐变问题，这个插件解决了它！谢谢！
在 ChartJS 2.x 上效果很好，但在 3.x 上不行你也有 ChartJS 3.x 的解决方案吗？
@lc3m4n Chart.js v3.x 本机支持此功能。查看我的编辑。