Javascript Chart.js阴影区域

js（）可以使用“fillColor”属性（填充折线图本身和x轴之间的区域）填充折线图下方的颜色

我想知道的是是否可以将Chart.js配置为创建阴影区域，如下图所示：

谢谢。

折线图的阴影区域 您可以扩展图表以执行此操作

---

预览

或

---

脚本

Chart.types.Line.extend({
    name: "LineAlt",
    initialize: function (data) {
        Chart.types.Line.prototype.initialize.apply(this, arguments);

        var ranges = [
            {
                start: 100,
                end: 75,
                color: 'rgba(250,0,0,0.5)'
            },
            {
                start: 75,
                end: 50,
                color: 'rgba(0,250,0,0.5)'
            },
            {
                start: 50,
                end: 25,
                color: 'rgba(0,0,250,0.5)'
            },
            {
                start: 25,
                end: 0,
                color: 'rgba(250,250,0,0.5)'
            }
        ];

        var scale = this.scale;
        var rangesStart = scale.calculateY(ranges[0].start);
        var rangesEnd = scale.calculateY(ranges[ranges.length - 1].end);
        var gradient = this.chart.ctx.createLinearGradient(0, rangesStart, 0, rangesEnd);

        ranges.forEach(function (range) {
            gradient.addColorStop((scale.calculateY(range.start) - rangesStart) / (rangesEnd - rangesStart), range.color);
            gradient.addColorStop((scale.calculateY(range.end) - rangesStart) / (rangesEnd - rangesStart), range.color);
        })

        this.datasets[0].fillColor = gradient;
    }
});

然后

...
new Chart(ctx).LineAlt(data);

---

如果要对整个背景进行着色，请使用

var originalDraw = scale.draw;
scale.draw = function() {
    originalDraw.apply(this, arguments);

  ctx.save();
  ctx.fillStyle = gradient;
  ctx.fillRect(scale.calculateX(0), scale.startPoint, scale.width, scale.endPoint - scale.startPoint);
  ctx.restore();
}

而不是

this.dataset[0].fillColor=gradient


小提琴（线下）—

Fiddle（整个背景）--
我认为API中还没有您需要的条带化。但您可以在绘制图表后通过设置
context.globalCompositeOperation='destination over'
并使用数据点将条带应用于
context.fillRect
来绘制条带。注意：“目标覆盖”合成将导致条纹在现有内容下绘制。请确保在完成后将合成设置回默认值：
context.globalCompositeOperation='source over'
。请原谅我的无知，但是我如何扩展色带以覆盖整个图形（如原始帖子中所示的链接），而不是在色带“点击”折线图时简单地停止。非常感谢你。这正是我需要的！谢谢在角2中寻找解