chart.js 线图:填充线上方的区域，而不是下方和右侧 [英] chart.js LIne Graphs: Fill area above line as opposed to below and to the right

问题描述

我有一个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: {标签:[9/15/15"、9/28/15"、10/5/15"、10/13/15"、10/19/15"、10/30/15", "11/15/15"],数据集:{{填充颜​​色:#FF1717"，点颜色:#da3e2f"，数据:[200000, 180000, 150000, 110000, 60000, 0, 0]},{填充颜​​色:#4575b5"，点颜色:#1C57A8"，数据:[-300000，-300000，-300000，-150000，-150000，-20000，0]},}}

解决方案

填充/着色线之间的区域

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

请注意，由于填充逻辑，动画有点奇怪.关闭动画来解决这个问题会更容易，或者您可以尝试

<小时>

脚本

Chart.types.Line.extend({名称:LineAlt"，画:函数(){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, {贝塞尔曲线:假，数据集填充:假});

<小时>

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

I have a chart.js which displays two different lines, on which will always be positive and one which will always be negative.

I want to visualize the area between both lines and a value of 0 on the y axis and therefore want to fill in below the the positive line and above the negative line both ending at 0. Chart.js however always fills in the line to the bottom right of a given line as far as I cant tell.

Correct Behaviour: (from chartist.js)

Incorrect Behavior (from chart.js)

Does anyone know if it is possible to achieve something similar to the look of the first graph with chart.js?

edits:

I am using chart.js through it's ember plugin

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

so I am only passing in chartData. It should be using the default options.

The chart data in the 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]
     },
  }
}

解决方案

Filling / Coloring the Area between Lines

Just extend the chart to write your own fill logic.

Note that the animation is a bit weird because of the filling logic. It would be easier to turn off the animation to fix this, or you could try a variation of https://stackoverflow.com/a/33932975/360067 to animate from the 0 line.

---

Preview

---

Script

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 - https://jsfiddle.net/fhxv0vL7/

这篇关于chart.js 线图:填充线上方的区域，而不是下方和右侧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！