如何格式化 Highcharts columnRange 以获取温度最小值和最大值的 json 数据

Question

我正在尝试从 forecast.io api 显示有关 Highcharts 的信息。在这个网站上其他人的帮助下，我想出了如何使用简单的折线图或面积图来调用数据；但是，我不知道如何使用 columnRange 图表。我想显示每日最低和最高温度预报。因此，第一列将显示今天的最低和最高温度，下一列将显示明天，依此类推。

从 forecast.io 调用今天的最小值和最大值：

• data.daily.data[0].temperatureMin
• data.daily.data[0].temperatureMax

明天会有“1”而不是 0。后天会有“2”。

我无法弄清楚如何制作一个每天都执行此操作的函数。我有一个 jsfiddile，其中包含我的 forecast.io API 密钥。这需要从源调用。

无论如何，任何帮助将不胜感激！ http://jsfiddle.net/nn51895/gjw9m1qo/2/

（你会看到我的 x 轴标签真的搞砸了..）

$(function () {

$('#container').highcharts({

    chart: {
        type: 'columnrange',
        inverted: true
    },

    title: {
        text: ''
    },

    subtitle: {
        text: ''
    },

    xAxis: {

    },

    yAxis: {
        title: {
            text: ''
        }
    },

    tooltip: {
        valueSuffix: '°F'
    },

    plotOptions: {
        columnrange: {
            dataLabels: {
                enabled: true,
                formatter: function () {
                    return this.y + '°F';
                }
            }
        }
    },

    legend: {
        enabled: false
    },

    series: [{
        name: 'Daily Min and Max',
        data: 'ChartData',
        pointStart: new Date().getTime(),
       pointInterval:90000000,

    }]

  });

});

$.ajax({
 url: "https://api.forecast.io/forecast/87a7dd82a91b0b765d2576872f2a3826/53.479324,-2.248485",
 jsonp: "callback",
 dataType: "jsonp",
 success: function(chart) {

  var dataArr = new Array();
   var height = chart.xAxis[0].height;
  var pointRange = chart.daily.data[0].temperatureMax - chart.daily.data[0].temperatureMin;
   var max = chart.daily.data[0].temperatureMax;
   var min = chart.daily.data[0].temperatureMin;
   var pointCount = (max - min) / pointRange;
    var timeint = chart.daily.data[0].time; 
 for(var i=0; i<chart.daily.data.length; i++)
  dataArr.push(chart.daily.data[i].temperatureMin);

 plotChart(dataArr, timeint)


 }
 });

Answer 1

首先，如评论中所说：

success: function (chart) {
    ...
    var height = chart.xAxis[0].height;
}

出于某种未知原因，您正试图从图表中获取 xAxis 的高度。同时你chart变量是指来自AJAX调用的数据。我希望这很清楚，所以删除该行或更改为：

success: function (chart) {

    var myChart = $('#container').highcharts();
    var dataArr = new Array();
    var height = myChart.xAxis[0].height;
}

第二件事，那个选项：

        data: 'ChartData',

错了，应该有一个空数组，因为Highcharts需要数组来存储数据，而不是一些字符串：

        data: [],

现在，修复这些错误后，您应该转到this demo 并创建相同的数据格式。这是 Highcharts 所需格式的示例。

更多关于series.data的信息可以在API reference中找到——你需要阅读这篇文章。