2011-07-15 23 views
1

JSON数据映射的问题,我必须通过JSON与HighCharts + Ajax的

{"rows":[{"Date":"07/10/2011","Value":1206,"Action":"Drink"},  
{"Date":"07/11/2011","Value":2288,"Action":"Pie"}, 
{"Date":"07/12/2011","Value":1070,"Action":"Drink"}, 
{"Date":"07/13/2011","Value":1535,"Action":"Beer"}, 
{"Date":"07/14/2011","Value":1721,"Action":"Drink"}], 
"page":1,"total":1,"records":5} 

我试图使用带有HighCharts这个数据,但变得有点混乱返回的后续数据。

jQuery.ajax({ 
    url: fullPath + 'datamap', 
    dataType: "json", 
    type: 'POST', 
    data: "{}", 
    contentType: "application/json; charset=utf-8", 
    success: function (data) { 
     var lines = data.split('\n'); 
     $.each(lines, function(lineNo, line) { 
      var items = line.split(','); 
      var data = {}; 
      $.each(items, function(itemNo, item) { 
       if (itemNo === 0) { 
        data.name = item; 
       } else { 
        data.y = parseFloat(item); 
       } 
      }); 
      options.series[0].data.push(data); 
     }); 
    // Create the chart 
    var chart = new Highcharts.Chart(options); 

    }, 
    cache: false 
    }); 

我想表“日期”和“价值”?

回答

4

据我所知,您需要在Highcharts中显示rows值。所以首先你的初始数据是:

var chartData = data.rows; 

现在chartData只是一个对象数组。使用for遍历chartData迭代象下面这样:

var seriesData = []; 
for (var i = 0; i < chartData.length; i++) 
{ 
    var x = new Date(chartData[i].Date).getTime(); 
    var y = chartData[i].Value; 
    seriesData.push([x, y]); 
} 

这个循环之后,你将有seriesData阵列,可Highcharts使用点。现在只需渲染它:

var chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'chartContainer', 
     defaultSeriesType: 'line' 
    }, 

    xAxis: { 
     type: 'datetime' 
    }, 

    series: [{ 
     data: seriesData   
    }] 
}); 

瞧!

测试此项:http://jsfiddle.net/ebuTs/8263/

+0

非常感谢!只有一个问题 - 我想以'07/10/2011'等格式的日期作为X轴?任何方式来编辑你的代码来做到这一点? – Tom

+0

http://jsfiddle.net/ebuTs/8277/ –

+0

哇!真棒谢谢:)我最后和最后一个问题[和不朽的感谢:)]是如何得到这个作为ajax请求?即只是插入这个成功:函数(数据){' – Tom