javascript - chart.js 中带有空值的阶梯线

Question

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

我想在 2012 和 2013 之间画一条阶梯线。当我将 steppedLine 设置为 true 时，它只在 2011 处绘制了一条垂直线，但没有连接 2011 的水平线和 2012，因为 2012 的值为 null。如果我将 spanGaps 设置为 true，它将在 5 处绘制一条从 2011 到 2013 的线。

基本上我正在寻找的是在起始值为数字且结束值为null时画一条线，但反之则不然

JSFiddle

Controller 中的相关代码:

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

HTML:

<canvas class="chart chart-line" chart-labels="ctrl.lines.labels" chart-data="ctrl.lines.data" chart-options="ctrl.lines.options" chart-series="ctrl.lines.series" chart-dataset-override="ctrl.lines.datasetOverride" height="140" responsive=true></canvas>

Answer 1

这可能不是您想要的，但您可以在 2012 添加另一个点，其值与 2011 相同，然后在 2012 添加另一个数据点 将为 null，因此它会在 2012 和 2013 之间创建一个间隙，尽管它会在 2012 处创建一个点。

JSFiddle

_this.lines.labels = [2010,2011,2012,2012,2013,2014];
_this.lines.data = [
    [10, 5,5,null, 10, 5]    
];

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