2013-02-12 55 views
1

多個系列的閱讀和測試,因爲幾天後(並已張貼在這裏,但有錯誤的問題)我真的需要你,因爲我一次又一次地失敗......Highcharts從JSON

我的目標:具有多系列上相同的圖(和在將來許多圖表) 我的數據源:一個MySQL和JSON輸出:

"[{"name":"Station 1","data":"1360191600,398.625"},{"name":"Station 1","data":"1360192500,398.625"},{"name":"Station 1","data":"1360193400,398.25"},{"name":"Station 1","data":"1360194300,397.375"},{"name":"Station 1","data":"1360195200,397.5"},{"name":"Station 1","data":"1360196100,397.5"},{"name":"Station 1","data":"1360199700,396.75"},{"name":"Station 1","data":"1360200600,397"}... 

這些數據是一個例子,因爲在正常時間我有許多臺和一些僅與時間戳數據。

我現在最大的失敗就是將這些信息發送到系列:[]選項。

我有嘗試一些循環是這樣的:

  data=JSON.parse(data) ; 
      var series = []; 
      series.data = []; 
      $.each(data,function(i,ligne) { 

       var string = JSON.stringify(ligne); 
       var obj = $.parseJSON(string); 
       //var index_serie = obj.name.slice(0,1) ; 
       console.log(obj) ; 
       points=(obj.data) ; 
       series.name=obj.name ; 
       series.data.push(points) ; 
      }) ; 
      options.series.push(series) ; 
      console.log(options.series) ; 

      var chart = new Highcharts.Chart(options); 

圖表的選項在AJAX調用之前定義。

我嘗試使用其他格式的json,例如[「name」:「station1」,「data」:「[1321654,10],[5465 ...但我有困難在我的[]中添加[] SQL quesry和GROUP_CONCAT有一定的限制(2014字)

那麼幫助我,以渲染多個系列,包括其名稱等

感謝您的幫助來創建一個漂亮環......

回答

2

燦你是否改變了這個「幾乎」JSON到「另一個」JSON?也許是這樣的:

[{ 
    "name":'station 1', 
    "data": [ [360191600,398.625], [360191600,398.625], [360191600,398.625] ... [360191600,398.625] ] 
}, { 
    "name":'station 2', 
    "data": [ [360191600,398.625], [360191600,398.625], [360191600,398.625] ... [360191600,398.625] ] 
}] 

如果沒有,你必須添加一些解析爲你的價值觀,例如:

data = JSON.parse(data); 
var names = []; 
$.each(data, function (i, ligne) { 
    var ind = names.indexOf(ligne.name), 
     splited = ligne.data.split(','), 
     x = parseFloat(splited[0]), 
     y = parseFloat(splited[1]); 
    if (ind == -1) { 
     /*series name spotted first time need to add new series */ 
     ind = names.push(ligne.name) - 1; 
     options.series.push({ 
      data: [], 
      name: ligne.name 
     }); 
    } 
    if(!isNaN(x) && !isNaN(y)){ 
     options.series[ind].data.push([x,y]);  
    } 
}); 

和工作的jsfiddle:http://jsfiddle.net/3bQne/40/

+0

噢!非常thka你!它與我的「幾乎」工作非常好,但我承認不明白如何工作ind = names.push(ligne.name) - 1;我仍然有2件小事:當我重新啓動ajax並且我有一個奇怪的UTC pb時,圖表不會重置:我的時間戳記在轉換器中給我正確的日期/時間(http://www.timestamp.fr/) )但是我有一個小時的高分結果。 – Semaphore 2013-02-12 18:41:31

+0

'Array.push()'返回新數組的長度,所以要獲取最後一個元素的索引,我們需要將長度減1。然後我們可以在'options.series [ind]'中正確使用它。 要重新載入圖表,您必須或調用'chart.destroy()',然後創建新圖表或調用每個series.setData()'系列。關於時間戳 - 嘗試設置'useUTC:false'。 – 2013-02-13 11:11:14