Automatically join missing data gaps in Highcharts JS

问题

I'm currently looking to implement Highcharts JS into my application, using months as the x-axis categories.

However, I have gaps in my data, and wish for the chart to automatically connect the gaps.

For example, if I don't have any data for March, I want February and April to connect with a linear line.

Using the highcharts demo, I have edited the data to demonstrate what currently happens by default:

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]

As you can see, there is a break in the line between February and April.

I've considered removing the months with no data from the categories, but then this will give a skewed result as February and April will be an equal distance away from each other as April and May, which won't give an accurate representation.

If I am to remove 4 months, this inaccurate representation is exaggerated:

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

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

The only solution I can think of is to calculate the average between the months, but I don't wish to display averages.

Is there any built-in way of filling in these gaps in Highchart JS? If not, is there a neater solution to what I have suggested?

Alternatively, is there a way of seperating the x-axis based on value? So if there is no March month, February and April appear the distance of 2 months away.

This would also be useful when integers are the x-axis. For example if I had "1, 2, 10", I wouldn't want these to be evenly spread.

回答1:

I may be missing something, but by your example and explanation, you seem to be looking for the connectNulls property:

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

回答2:

For this type of behaviour Highstocks JS should be used instead of 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]
      ]

Live Demo: http://jsfiddle.net/q2kSf/

回答3:

for reference: type: 'spline' (see Curt's Live Demo) did the trick for me.

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

(i modified this file to mask short sensor downtime for a raspberry-pi project)

来源：https://stackoverflow.com/questions/15973457/automatically-join-missing-data-gaps-in-highcharts-js

标签

javascript

Highcharts

missing-data