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

所以我只传递了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]
     },
  }
}

解决方法:

填充/着色线之间的区域

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

注意,由于填充逻辑,动画有点怪异.关闭动画以解决此问题会更容易,或者您可以尝试使用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/

标签：chart-js,charts,javascript
来源： https://codeday.me/bug/20191027/1945742.html