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

Question

我有一个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}}

所以我只传入chartData。它应该使用默认选项。

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]
     },
  }
}

Answer 1

填充/着色线之间的区域

只需扩展图表以编写您自己的填充逻辑。

请注意，由于填充逻辑，动画有点奇怪。关闭动画来解决这个问题会更容易，或者您可以尝试使用/sf/answers/2375308281/的变体从 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
});

小提琴 - https://jsfiddle.net/fhxv0vL7/