Question

有人能让我开始使用高价图表将以下远程JSON数据渲染成折线图吗？我想在成功的ajax fetch上立即渲染一个简单的折线图，但下面数据中的日期包括每小时值。

container：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

Answer 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显示折线图。

外部JSON到Highcharts线图 - 日期解析问题

1 个答案: