如何格式化Highcharts columnRange以獲得溫度Min和Max的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: [],

現在，修復這些錯誤之后，您應該轉到此演示並創建相同的數據格式。 這是Highcharts所需格式的示例。

可以在API參考中找到有關series.data更多信息-您需要閱讀此內容。