Javascript 如何跳过Highcharts中的数据点而不导致图表行中断?

Javascript 如何跳过Highcharts中的数据点而不导致图表行中断?,javascript,highcharts,Javascript,Highcharts,使用海图。。。 我有一系列与一系列时间对应的值。有时,数据值在特定时间为空,并且图表上没有放置任何标记,这很好,但该行会中断,并且基本上会在下一个非空值上启动新图表 我想跳过图表上的空值,但仍然保留时间值,只需用实线将最后一个非空值连接到下一个 如果值为null,我尝试跳过整个索引,但是时间值也被跳过 我已经用0替换了null,但是很明显,数据点落在了0轴上 这是我的数据: for (i = 0; i < tpoints.length; i++) { var tc

使用海图。。。 我有一系列与一系列时间对应的值。有时,数据值在特定时间为空,并且图表上没有放置任何标记,这很好,但该行会中断,并且基本上会在下一个非空值上启动新图表

我想跳过图表上的空值,但仍然保留时间值,只需用实线将最后一个非空值连接到下一个

如果值为null,我尝试跳过整个索引,但是时间值也被跳过

我已经用0替换了null,但是很明显,数据点落在了0轴上

这是我的数据:

for (i = 0; i < tpoints.length; i++)
    {
        var tc = cpoints[i];
        var tf = fpoints[i];
        var t = tpoints[i];
        labels.push(t);
        c.push(tc);
        f.push(tf);
    }
这将为每个数据点创建折线图作为预期的彩色点。每个数据点然后与一条细的灰色线连接,但是在图表中间的某个地方,如果它接收到一个空值,则灰色线被切断,并且只在两个非空值之间再次显示。
关于如何连接空值之前的数据点和空值之后的数据点,您有什么想法吗?

您能告诉我们您的数据是如何显示的吗?如果为空值​​我建议您更改图形类型或替换空值​​按零启用connectNulls选项:

现场演示:

API参考:

var config = {
        type: 'line',
        fill : false,
        data: {
            datasets: [{
                    data: f,
                    backgroundColor: [
                        color(window.chartColors.red).alpha(0.5).rgbString(),
                    ],
                    label: '',
                    fill : false
                },{
                    data: c,
                    backgroundColor: [
                        color(window.chartColors.blue).alpha(0.5).rgbString(),
                    ],
                    label: '',
                    fill : false
                }],
            labels: labels
        },
        options: {
            maintainAspectRatio: false,
            responsive: true,
            title: {
                display: true,
                text: title,
                fontSize: 22
            },
            legend: {
                position: "bottom",
                display: false
            },
            scales: {
                yAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: 'T'
                        },
                        ticks: {
                            beginAtZero: true
                        }
                    }]
            }
        }
    };
series: [{
    data: [...],
    connectNulls: true
}]