在chart.js中使用空值的步进行

时间:2017-04-28 06:58:38

标签: javascript chart.js

我有数据:[10,5,null,10,5]和标签:[2010, 2011, 2012, 2013, 2014]

我想绘制一条在20122013之间有间隙的阶梯线。 当我将steppedLine设置为true时,它仅在2011处绘制了一条垂直线,但没有水平线来连接20112012,作为{的值{1}}是2012。如果我将null设置为spanGaps,则会在值true处从20112013绘制一条线。

基本上我正在寻找的是如果起始值是一个数字并且结束值是5而绘制一条线,而不是反之亦然

JSFiddle

控制器中的相关代码:

null

HTML:

    _this.lines = {};
    _this.lines.labels = [2010,2011,2012,2013,2014];
    _this.lines.data = [
        [10, 5, null, 10, 5]    
    ];
    _this.lines.series = ['Now'];
    _this.lines.options = {
        scales: {
            xAxes: [{
                type: 'time',
                time: {
                    parser: 'DD MMM YYYY'
                }
            }],
            yAxes: [{
                type: 'linear',
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    };
    _this.lines.datasetOverride = [{
        fill: false,
        spanGaps: true,
        steppedLine: true
        },
    ];

1 个答案:

答案 0 :(得分:2)

这可能不是您想要的,但您可以在2012添加另一个与[{1}}相同的值,然后在2011的另一个数据点{{1}因此,它会在2012null之间创建一个间隙,但它会在2012处创建一个点。

enter image description here

JSFiddle

2013

这是您当前代码的唯一更改