2013-01-02 88 views
-1

任何人都可以让我开始使用高斯图表将以下远程JSON数据呈现为折线图吗?我现在只想呈现一个简单的线图,表示成功的ajax获取,但下面数据中的日期包含每小时的值。外部JSON到Highcharts折线图 - 日期分析问题

poolprice

容器:panelone

[{"date":"11/24/2012 19","price":"126.44"},{"date":"11/24/2012 18","price":"244.31"},{"date":"11/24/2012 17","price":"90.83"},{"date":"11/24/2012 16","price":"38.78"},{"date":"11/24/2012 15","price":"70.56"},{"date":"11/24/2012 14","price":"80.83"},{"date":"11/24/2012 13","price":"45.0"},{"date":"11/24/2012 12","price":"47.15"},{"date":"11/24/2012 11","price":"54.53"},{"date":"11/24/2012 10","price":"59.03"},{"date":"11/24/2012 09","price":"42.67"},{"date":"11/24/2012 08","price":"43.04"},{"date":"11/24/2012 07","price":"43.53"},{"date":"11/24/2012 06","price":"42.93"},{"date":"11/24/2012 05","price":"38.57"},{"date":"11/24/2012 04","price":"31.83"},{"date":"11/24/2012 03","price":"29.27"},{"date":"11/24/2012 02","price":"24.46"},{"date":"11/24/2012 01","price":"24.21"},{"date":"11/23/2012 24","price":"22.34"},{"date":"11/23/2012 23","price":"22.34"},{"date":"11/23/2012 22","price":"29.66"},{"date":"11/24/2012 20","price":"57.83"},{"date":"11/25/2012 02","price":"79.58"},{"date":"11/25/2012 01","price":"79.3"},{"date":"11/24/2012 24","price":"76.95"},{"date":"11/24/2012 23","price":"176.27"},{"date":"11/24/2012 22","price":"86.83"},{"date":"11/24/2012 21","price":"67.63"}] 

谢谢:)

AC

+0

有很多演示显示了预期的json格式。 http://www.highcharts.com/stock/demo/ –

回答

1

的数据没有排序,并附带了Highstock无法解析的日期格式。日期必须被解析成Date对象,转换为Highstock使用的时间戳并进行排序。

// Parse data into (unordered) array of timestamp and value 
var newData = new Array(); 
for (var i = 0; i < rawData.length; i++) { 
    var row = rawData[i]; 
    var date = new Date(row.date.substring(6, 10), parseInt(row.date.substring(0, 2)) - 1, row.date.substring(3, 5), row.date.substring(11, 13), 0, 0); 
    var data = [date.getTime(), parseFloat(row.price)]; 
    newData.push(data); 
} 

// Sort the data by time. Thanks to Ben Blank: http://stackoverflow.com/questions/5199901/how-to-sort-an-associative-array-by-its-values-in-javascript 
var tuples = new Array(); 
for (var key in newData) { 
    tuples.push([key, newData[key]]); 
} 

tuples.sort(function(a, b) { 
    a = a[1]; 
    b = b[1]; 
    return a < b ? -1 : (a > b ? 1 : 0); 
}); 

var orderedData = []; 
for (var i = 0; i < tuples.length; i++) { 
    var key = tuples[i][0]; 
    var value = tuples[i][1]; 
    orderedData.push(value); 
} 

This fiddle显示你的折线图。

+0

谢谢OyvindK,你花了很多时间在这个答案上,并做了一个很好的工作。 – ac360