自动加入Highcharts JS中缺少的数据空白

时间:2013-04-12 14:06:09

标签: javascript highcharts missing-data

我目前正在寻求在我的应用程序中实现Highcharts JS,使用月份作为x轴类别。

但是,我的数据存在差距,并希望图表自动连接差距。

例如,如果我没有3月的任何数据,我希望2月和4月用线性线连接。

使用highcharts演示,我编辑了数据以演示默认情况下当前发生的事情:

http://jsfiddle.net/kf26t/1/

data: [7.0, 10.0, null, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]

正如您所看到的,2月到4月之间的界限有所突破。

我已经考虑过删除没有类别数据的月份,但是这会产生偏差的结果,因为2月和4月将在4月和5月之间相等的距离,这将无法准确表示。

如果我要删除4个月,这个不准确的表示会被夸大:

http://jsfiddle.net/kf26t/2/

categories: ['Jan', 'Feb', 
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

我能想到的唯一解决方案是计算月份之间的平均值,但我不希望显示平均值。

在Highchart JS中是否存在填补这些空白的内置方法?如果没有,是否有一个更简洁的解决方案,我建议?


或者,有没有办法根据值分离x轴?因此,如果没有3月份,则2月和4月会出现2个月的距离。

当整数是x轴时,这也很有用。例如,如果我有“1,2,10”,我不希望这些均匀分布。

3 个答案:

答案 0 :(得分:10)

我可能遗漏了一些东西,但是通过你的例子和解释,你似乎在寻找connectNulls属性:

http://api.highcharts.com/highcharts#plotOptions.series.connectNulls

答案 1 :(得分:2)

对于这种行为,应使用Highstocks JS代替Highcharts JS。

data: [
       [Date.UTC(2013,  0, 1), 1],
       [Date.UTC(2013, 1, 1), 2 ],
       [Date.UTC(2013, 3,  1), 4],
       [Date.UTC(2013, 4,  1), 5 ],
       [Date.UTC(2013, 5, 1), 6 ],
       [Date.UTC(2013, 6, 1), 7],
       [Date.UTC(2013,  7,  1), 8],
       [Date.UTC(2013,  8,  1),9],
       [Date.UTC(2013, 9, 1), 10],
       [Date.UTC(2013, 10, 1), 11],
       [Date.UTC(2013, 11, 1), 12]
      ]

现场演示: http://jsfiddle.net/q2kSf/

答案 2 :(得分:-3)

供参考:type: 'spline'(参见Curt的现场演示)为我做了诀窍。

function createChart() {
 var chartOptions = {
  chart: 
  {
     type: 'spline',
       *//other options and stuff...*
  }
 }
}

(我修改this file以掩盖Rasberry-pi项目的短传感器停机时间)