javascript - HighCharts - getJson 到 HighCharts 双轴

Question

我想通过调用本地 webService 来显示 HighCharts 双轴图表，该服务返回 Json(下面给出的示例)。

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代码- 调用 webService(我想使用 getJson)- 将 JSON 输出转换为所需的 HighCharts 数据，以便可以显示双轴图表

Answer 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/