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

Question

我有一个chart.js，它显示两条不同的行，其中总是正数，一行总是负数。

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

纠正行为:(来自chartist.js）

行为不正确（来自chart.js）

是否有人知道是否可以通过chart.js实现类似于第一张图表的外观？

编辑：

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

{{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

填充/着色线之间的区域

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

请注意，由于填充逻辑，动画有点奇怪。关闭动画来修复此问题会更容易，或者您可以尝试使用https://stackoverflow.com/a/33932975/360067的变体从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/

Answer 2

使用最新（非测试版）图表的插件提供此功能

https://www.chartjs.org/docs/master/charts/area/#example-with-multiple-colors