2017-08-25 111 views
0

我想通過調用本地webService來返回Json(示例如下),以顯示HighCharts雙軸圖表。HighCharts - getJson到HighCharts雙軸

的HighChart應繪製以下數據點:

  • y軸左:地塊的 '運動'
  • y軸右:地塊 'endValue值'
  • x軸:地塊在 'DateLabel'

的json Web服務調用:http://localhost/api/getData?format=jsonp

這將返回弗洛翼JSON:

{ 
    "LastUpdated": "/Date(-62135596800000-0000)/", 
    "TotalTime": "0s584ms", 
    "MonthlyData": { 
    "GroupId": 9, 
    "CurrencyId": 3, 
    "Returns": [ 
     { 
     "Movement": -0.008536959525287496, 
     "MovementLabel": "-0.85 %", 
     "DateLabel": "Jan-10", 
     "Date": "/Date(1264892400000-0000)/", 
     "EndValue": 16012000.007666545 
     }, 
     { 
     "Movement": -0.04846365302964577, 
     "MovementLabel": "-4.85 %", 
     "DateLabel": "Feb-10", 
     "Date": "/Date(1267311600000-0000)/", 
     "EndValue": 15235999.994984308 
     }, 
     { 
     "Value": -0.0034129684178402725, 
     "ValueLabel": "-0.34 %", 
     "DateLabel": "Mar-10", 
     "Date": "/Date(1269986400000-0000)/", 
     "StartValue": 15235999.994984308, 
     "EndValue": 15184000.008187212, 
     "CashFlows": 0 


     } 
    ] 
    } 
} 

什麼是需要 jQuery代碼 - 使該呼叫到web服務(我想用的getJSON) - 的JSON輸出變換到所需HighCharts數據,使得雙軸圖表可顯示

回答

1

要獲得JSON,您可以使用jQuery.ajax()函數。至於將數據拆分爲兩個鏈接到不同yAxis的系列,您需要解析您的數據。看看下面的例子。

API參考:
http://api.jquery.com/jquery.ajax/
http://api.highcharts.com/highcharts/xAxis.categories
http://api.highcharts.com/highcharts/yAxis.opposite

例子:
http://jsfiddle.net/dna9wqsg/

+0

什麼一個真棒答案。喜歡你在JsFiddle中重新創建JSON生成器和完整代碼的事實。真棒! –

+0

謝謝。我很高興它對你有幫助。乾杯! –

+0

你知道爲什麼0值沒有被推入圖嗎?如果按照JSFiddle查看highChart,則零值不會放入線圖中? –