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和工具提示数据。

希望这有帮助！

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

1 个答案: