Javascript chart.js线条图：填充线条上方的区域，而不是下方和右侧

我有一个chart.js，它显示了两条不同的线，在这两条线上总是正值，在这两条线上总是负值

我想在y轴上显示两条线之间的区域和值为0的区域，因此要填充正直线下方和负直线上方的区域，这两条线都以0结尾。然而，Chart.js总是填充给定行右下角的行，我说不上来

正确的行为：（来自chartist.js）

错误行为（来自chart.js）

有人知道是否有可能通过chart.js实现与第一个图形相似的外观吗

编辑：

我通过它的ember插件使用chart.js

{{ember chart type='Line'data=dataPanelService.chartData width=500 height=600}

所以我只传递图表数据。它应该使用默认选项

dataPanelService中的图表数据：

chartData: {
  labels: ["9 /15 /15", "9 /28 /15", "10 /5 /15", "10 /13 /15", "10 /19       /15", "10 /30 /15", "11 /15 /15"],
  datasets: {
     {
        fillColor: "#FF1717", 
        pointColor: "#da3e2f", 
        data: [200000, 180000, 150000, 110000, 60000, 0, 0]
     },
     {
        fillColor: "#4575b5", 
        pointColor: "#1C57A8", 
        data: [-300000, -300000, -300000, -150000, -150000, -20000, 0]
     },
  }
}

填充/着色线条之间的区域 只需扩展图表即可编写自己的填充逻辑

请注意，由于填充逻辑，动画有点奇怪。关闭动画将更容易解决此问题，或者您可以尝试使用的变体从0线设置动画

---

预览

---

脚本

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

        var ctx = this.chart.ctx;
        var scale = this.scale;

        ctx.save();

        ctx.fillStyle = this.datasets[0].fillColor;
        ctx.beginPath();
        ctx.moveTo(scale.calculateX(0), scale.calculateY(0))
        this.datasets[0].points.forEach(function (point) {
            ctx.lineTo(point.x, point.y);
        })
        ctx.closePath();
        ctx.fill();

        ctx.fillStyle = this.datasets[1].fillColor;
        ctx.beginPath();
        ctx.moveTo(scale.calculateX(0), scale.calculateY(0))
        this.datasets[1].points.forEach(function (point) {
            ctx.lineTo(point.x, point.y);
        })
        ctx.closePath();
        ctx.fill();

        ctx.restore();
    }
});

...

var myNewChart = new Chart(ctx).LineAlt(chartData, {
    bezierCurve: false,
    datasetFill: false
});

---

---

Fiddle-

这是一个使用最新（非beta版）图表的插件

---

是的，这是可能的，但我们需要一些代码来告诉您如何操作。很可能是您的系列创建不正确。@jperezov我添加了我在这里调用的代码。谢谢你的帮助！您是否尝试过将类型从“直线”更改为“面积”或堆叠面积图？根据chart.js文档，基本类别为：直线、条形、雷达、极区和饼/甜甜圈。我很确定这个区域的东西是在线配置的。非常棒的详细答案！ThanksGreat-有人尝试过将其移植到alpha中的chart.js 3吗？