如何格式化Highcharts以获取特定的json数据？

Question

我已经花了一些时间试图弄清楚这一点。我通常研究而不是提问，但我完全被难住了。我正在尝试使用来自 forecast.io api 的数据创建一个 Highchart。具体来说，每小时温度和分钟降水量。

对于那些不知道的人。要调用 forecast.io，您需要自己的 API 密钥。 我不介意现在分享我的，因为您可以随时自动更改它。 这是调用特定位置产生的 json 链接（实际的 json 列表会占用太多空间并导致我的问题混乱）

https://api.forecast.io/forecast/87a7dd82a91b0b765d2576872f2a3826/34.6507,-82.8612

调用每小时温度：

• data.hourly.data[0].temperature（当前小时）
• data.hourly.data[2].temperature（现在是两个小时，你明白了..）

我只是不知道如何将它包含在 highcharts javascript 中。 这是来自 Highcharts 的示例折线图，我稍作修改，但不知道从哪里开始。我尝试了很多不同的方法。

$(function () {
$('#container').highcharts({
    chart: {
        type: 'spline'
    },
    title: {
        text: 'Temp'
    },
    subtitle: {
        text: ''
    },
    xAxis: {
        type: 'datetime',
        labels: {
            overflow: 'justify'
        }
    },
    yAxis: {
        title: {
            text: ''
        },
        min: 0,
        minorGridLineWidth: 0,
        gridLineWidth: 0,
        alternateGridColor: null,
        plotBands: [{ // Light air
            from: 0.3,
            to: 1.5,
            color: 'rgba(68, 170, 213, 0.1)',
            label: {
                text: '',
                style: {
                    color: '#606060'
                }
            }
        }, { // Light breeze
            from: 1.5,
            to: 3.3,
            color: 'rgba(0, 0, 0, 0)',
            label: {
                text: '',
                style: {
                    color: '#606060'
                }
            }
        }, { // Gentle breeze
            from: 3.3,
            to: 5.5,
            color: 'rgba(68, 170, 213, 0.1)',
            label: {
                text: '',
                style: {
                    color: '#606060'
                }
            }
        }, { // Moderate breeze
            from: 5.5,
            to: 8,
            color: 'rgba(0, 0, 0, 0)',
            label: {
                text: '',
                style: {
                    color: '#606060'
                }
            }
        }, { // Fresh breeze
            from: 8,
            to: 11,
            color: 'rgba(68, 170, 213, 0.1)',
            label: {
                text: '',
                style: {
                    color: '#606060'
                }
            }
        }, { // Strong breeze
            from: 11,
            to: 14,
            color: 'rgba(0, 0, 0, 0)',
            label: {
                text: '',
                style: {
                    color: '#606060'
                }
            }
        }, { // High wind
            from: 14,
            to: 15,
            color: 'rgba(68, 170, 213, 0.1)',
            label: {
                text: '',
                style: {
                    color: '#606060'
                }
            }
        }]
    },
    tooltip: {
        valueSuffix: ' m/s'
    },
    plotOptions: {
        spline: {
            lineWidth: 4,
            states: {
                hover: {
                    lineWidth: 5
                }
            },
            marker: {
                enabled: false
            },
            tickInterval: 3600000, // one hour

        }
    },
    series: [{
        name: 'Temperature',
        data: []

    }],
    navigation: {
        menuItemStyle: {
            fontSize: '10px'
        }
    }
});
 $.ajax({
  url: "https://api.forecast.io/forecast/87a7dd82a91b0b765d2576872f2a3826/53.479324,-2.248485",
  jsonp: "callback",
  dataType: "jsonp",
  success: function(data) {

  }
  });
});

http://jsfiddle.net/nn51895/kto8yt3r/

任何帮助将不胜感激。

另外，我已通读 Highcharts 文档和示例。我想不通。我肯定错过了什么。

Answer 1

在这里，我创建了一个函数，它将数据序列和初始时间作为参数，并使用 highcharts 绘制它们。

ajax 请求获取每小时温度，如下所示：

 $.ajax({
  url: "https://api.forecast.io/forecast/87a7dd82a91b0b765d2576872f2a3826/53.479324,-2.248485",
  jsonp: "callback",
  dataType: "jsonp",
  success: function(odata) {
  var dataArr = new Array();
  var timeint = odata.hourly.data[0].time; 
  for(var i=0; i<odata.hourly.data.length; i++)
      dataArr.push(odata.hourly.data[i].temperature);
  plotLine(dataArr, timeint)
  }
  });

http://jsfiddle.net/kto8yt3r/3/

您始终可以根据需要格式化 xAxis、yAxis 和工具提示数据。

希望对您有所帮助！