Question

我试图在forecast.io api中显示有关Highcharts的信息。在本网站的其他人的帮助下，我找到了如何使用简单的线条或面积图调用数据;但是，我无法弄清楚如何使用columnRange图表。我想显示每日最低和最高温度预测。因此，顶部列将显示今天的最小和最大温度，下一列将是明天，依此类推。

从forecast.io：

调用今天的最小值和最大值

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

明天会有一个＆＃34; 1＆＃34;而不是0.第二天会有一个＆＃34; 2＆＃34;。

我还没有弄清楚如何制作一个每天都能做到这一点的功能。我有一个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 - 您需要阅读此内容。

如何格式化Highcharts columnRange以获取温度Min和Max的json数据

1 个答案: