javascript - Angular-Chart-JS - 根据点范围具有不同填充颜色的折线图

Question

我在我的网站上使用 Angular-Chart-js 来显示某些类型的图表，其中之一是折线图。

我希望折线图能够填充颜色，但根据 y 轴的值使用不同的颜色。就像这张照片一样:

我尝试在图表的“数据”数组中使用不同的数据数组，第一个包含所有值，第二个包含除绿色(右侧)之外的所有值，第三个是相同的数组仅直到紫色范围等，然后每个数据集都有自己的颜色，但最终我根据最后一个数据集颜色得到一个具有单一颜色的图表。

我错过了什么？有什么办法可以实现这一点吗？

谢谢。

Answer 1

不幸的是，您无法使用当前的 Chart.js 配置选项来实现这一点。原因是因为折线图 backgroundColor 选项(控制折线图填充颜色的选项)仅接受单个值。

深入研究当前的chart.js 2.5源代码后，我发现可以扩展line元素的draw()方法并强制chart.js使用canvas线性渐变进行填充(而不仅仅是单一颜色)。通过一点数学，我们可以将每个点的 x 位置转换为线性渐变颜色停止位置并构建渐变。

通过此增强功能，您现在可以将颜色数组传递给折线图 backgroundColor 选项，以实现不同颜色的填充区域。下面是生成的图表的示例。

以下是实际操作方法(底部有一个工作示例)

首先，我们必须扩展 Chart.elements.Line 并覆盖它的 draw() 方法，以便我们可以根据每个点的位置构建线性渐变，使用它作为线条填充，然后绘制线条。

// save the original line element so we can still call it's 
// draw method after we build the linear gradient
var origLineElement = Chart.elements.Line;

// define a new line draw method so that we can build a linear gradient
// based on the position of each point
Chart.elements.Line = Chart.Element.extend({
  draw: function() {
    var vm = this._view;
    var backgroundColors = this._chart.controller.data.datasets[this._datasetIndex].backgroundColor;
    var points = this._children;
    var ctx = this._chart.ctx;
    var minX = points[0]._model.x;
    var maxX = points[points.length - 1]._model.x;
    var linearGradient = ctx.createLinearGradient(minX, 0, maxX, 0);

    // iterate over each point to build the gradient
    points.forEach(function(point, i) {
      // `addColorStop` expects a number between 0 and 1, so we
      // have to normalize the x position of each point between 0 and 1
      // and round to make sure the positioning isn't too percise 
      // (otherwise it won't line up with the point position)
      var colorStopPosition = roundNumber((point._model.x - minX) / (maxX - minX), 2);

      // special case for the first color stop
      if (i === 0) {
        linearGradient.addColorStop(0, backgroundColors[i]);
      } else {
        // only add a color stop if the color is different
        if (backgroundColors[i] !== backgroundColors[i-1]) {
          // add a color stop for the prev color and for the new color at the same location
          // this gives a solid color gradient instead of a gradient that fades to the next color
          linearGradient.addColorStop(colorStopPosition, backgroundColors[i - 1]);
          linearGradient.addColorStop(colorStopPosition, backgroundColors[i]);
        }
      }
    });

    // save the linear gradient in background color property
    // since this is what is used for ctx.fillStyle when the fill is rendered
    vm.backgroundColor = linearGradient;

    // now draw the lines (using the original draw method)
    origLineElement.prototype.draw.apply(this);
  }               
});

然后，我们还必须扩展折线图，以确保图表使用的折线元素是我们上面扩展的元素(因为该属性已在加载时设置)

// we have to overwrite the datasetElementType property in the line controller
// because it is set before we can extend the line element (this ensures that 
// the line element used by the chart is the one that we extended above)
Chart.controllers.line = Chart.controllers.line.extend({
  datasetElementType: Chart.elements.Line,
});

完成此操作后，我们现在可以将颜色数组传递给折线图 backgroundColor 属性(而不是仅单个值)来控制线条填充。

这是一个codepen example这表明了已经讨论过的所有内容。

注意事项:

• 这种方法可能会在未来的 Chart.js 版本中被破坏，因为我们正在搞乱内部结构。
• 我不熟悉angular-chart.js ，因此我无法提供有关如何将上述 Chart.js 更改集成到 Angular 指令中的见解。