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

Javascript 如何格式化Highcharts以获取特定的json数据?,javascript,jquery,json,highcharts,Javascript,Jquery,Json,Highcharts,我花了一些时间试图弄明白这一点。我通常是研究而不是提问,但我完全被难倒了。我正在尝试使用forecast.io api中的数据创建Highchart。具体来说,每小时的温度和每分钟的降水量 对于那些不知道的人。要调用forecast.io,您需要自己的API密钥。 我现在不介意分享我的,因为你可以随时自动更改它。 这里有一个指向json的链接,该链接是通过调用特定位置得到的(实际的json列表会占用太多空间,并导致我的问题变得杂乱无章) 要调用每小时温度: data.hourly.data[

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

对于那些不知道的人。要调用forecast.io,您需要自己的API密钥。 我现在不介意分享我的,因为你可以随时自动更改它。 这里有一个指向json的链接,该链接是通过调用特定位置得到的(实际的json列表会占用太多空间,并导致我的问题变得杂乱无章)

要调用每小时温度:

  • data.hourly.data[0].温度(当前小时)
  • data.hourly.data[2]。温度(从现在开始两个小时,你就明白了。)
我只是不知道如何在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) {

  }
  });
});

任何帮助都将不胜感激


此外,我还通读了Highcharts文档和示例。我想不出来。我一定错过了什么

在这里,我创建了一个函数,它将数据系列和初始时间作为参数,并使用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)
  }
  });
$.ajax({
url:“https://api.forecast.io/forecast/87a7dd82a91b0b765d2576872f2a3826/53.479324,-2.248485",
jsonp:“回调”,
数据类型:“jsonp”,
成功:功能(odata){
var dataArr=新数组();
var timeint=odata.hourly.data[0]。时间;

对于(var i=0;iYou需要绘制每分钟的数据?这很好!您知道如何在y轴上设置自定义标签,并将数据转换为适合标签吗?例如,非常低=0.002 in./hr.-0.016in./hr。低=0.017-0.99in./hr。中等=0.1in/hr-0.399in/hr。我正在尝试在一小时内获得每分钟数据的精度同时也为双重评论感到抱歉。这是一个例子。对不起,我没有收到你的问题,如果我的答案解决了你之前提出的问题,请向上投票并将其标记为正确答案…对不起,我没有足够的声誉向上投票,但我确实将其标记为正确答案。再次感谢你。