图表区域图以错误的方式显示NULL值

时间:2018-12-05 04:20:03

标签: angularjs highcharts


我有一个像这样的系列数据[null,0,null,null,null,null,0.86,null,0,null]
如您所见,其中只有三点。
但是它显示如下, enter image description here

请在此处查看demo

Highcharts.chart('container', {
chart: {
    type: 'area',
    spacingBottom: 30
},
title: {
    text: 'Fruit consumption *'
},


xAxis: {
    categories: ["Term 3_week1","Term 3_week2","Term 3_week3","Term 3_week4","Term 3_week5","Term 3_week6","Term 3_week7","Term 3_week8","Term 3_week9","Term 3_week10"]
},
yAxis: {
    title: {
        text: 'Y-Axis'
    }
},

plotOptions: {

    area: {
        fillOpacity: 0.5
    }
},
credits: {
    enabled: false
},
series: [{
    name: 'John',
    data: [null,0,null,null,null,null,0.86,null,0,null]
}]

});

我很困惑为什么这样显示。

有人可以帮忙吗? 谢谢

1 个答案:

答案 0 :(得分:2)

首先,如果您在firefox上观看演示,它将仅显示3点,没有任何区域。

现在您可以尝试像这样使用connectNulls Api Doc

chart: {
    type: 'scatter',
    spacingBottom: 30
},
plotOptions: {
    area: {
        fillOpacity: 0.5,
        connectNulls:true
    }
},

修改:新型图表

Updated Fiddle