HighCharts - getJson 到 HighCharts 双轴

Posted 2023-05-08

【中文标题】HighCharts - getJson 到 HighCharts 双轴

【英文标题】：HighCharts - getJson to HighCharts dual axes

【发布时间】：2018-02-03 09:05:51

【问题描述】：

我想通过调用返回 Json 的本地 webService 来显示 HighCharts 双轴图表。

HighChart 应绘制以下数据点：

y 轴左侧：绘制“运动” y 轴右侧：绘制“EndValue” x 轴：绘制“日期标签”

我的 Json 网络服务调用：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 数据，以便显示双轴图表

【参考方案1】：

要获取 JSON，您可以使用 jQuery.ajax() 函数。至于将数据拆分为链接到不同 yAxis 的两个系列，您需要解析您的数据。看看下面的例子。

API 参考：http://api.jquery.com/jquery.ajax/http://api.highcharts.com/highcharts/xAxis.categorieshttp://api.highcharts.com/highcharts/yAxis.opposite

示例：http://jsfiddle.net/dna9wqsg/

【讨论】：

多么棒的答案。喜欢您在 json 生成器中重新创建 JSON 和在 JsFiddle 中的完整代码这一事实。太棒了！

谢谢。我很高兴它对你有帮助。干杯！

你知道为什么0值没有被推入图表吗？如果我按照 JSFiddle 查看 highChart 零值不会放入折线图中？

怎么样？据我所知，0 值被推入数据中没有任何问题。示例：jsfiddle.net/ch31dm6z.