个人中心
gpt4 book ai didi

javascript - 来自 API 数据 (JSON) 的 Highcharts Windrose

转载 作者：行者123 更新时间：2023-12-03 08:00:53 25 4
gpt4 key购买 nike

我在这里(以及一般的网络开发)很新，所以请原谅我长期存在的任何误用...我正在尝试使用从 MesoWest Mesonet 返回的数据(以 JSON 格式)创建一个基本的风玫瑰图API服务。我正在使用 HighCharts(或尝试使用)，但无法完全使其正常工作。也许这是由于我从 API 本身获取数据的方法所致，因为我在这方面完全是业余爱好者。以下是 Javascript 代码，后面是该页面的 HTML。有人可以看一下并让我知道我做错了什么吗？当我尝试加载页面时，页面上没有显示任何内容。此外，如果您对 MesoWest 的 API 调用的细节感到好奇，就像我在这里使用的那样，请参阅 http://mesowest.org/api/docs/.js 脚本:

var windrose = {
divname: "windrosediv",
tkn: "eecfc0259e2946a68f41080021724419",
load:function()
{
    console.log('loading')
    if (!window.jQuery) {
    var script = document.createElement("script");
    script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';
    script.type = 'text/javascript';
    document.getElementByTagName("head")[0].appendChild(script);
    setTimeout(pollJQuery, 100)
    return
 }
 this.div = $("#"+this.divname);
 this.request('WBB');
 },
 pollJQuery:function()
 {
    if (!window.jQuery) {
       setTimeout(pollJQuery,100);
    } else {
        load();
    }
  },
  request:function(stn){
     console.log("making a request")
     $.getJSON(http://api.mesowest.net/v2/stations/nearesttime?callback=?',
     {
       stid:stn,
       within:1440,
                   units:'english',
       token:windrose.tkn
      }, this.receive);
  },
  receive:function (data)
     {
      console.log(data,windrose);
      stn = data.STATION[0]
      dat = stn.OBSERVATIONS
      spd += Math.round(dat.wind_speed_value_1.value)
      dir += dat.wind_direction_value_1.value
     windDataJSON = [];
for (i = 0; i < dir.length; i++) {
    windDataJSON.push([ dir[i], spd[i] 
    ]); 
        },
     }
  $(function () {
    var categories = ['0', '45', '90', '135', '180', '225', '270', '315'];
$('#container').highcharts({
      series: [{
        data: windDataJSON
    }],
    chart: {
        polar: true,
        type: 'column'
    },
    title: {
        text: 'Wind Rose'
    },
    pane: {
        size: '85%'
    },
    legend: {
        align: 'right',
        verticalAlign: 'top',
        y: 100,
        layout: 'vertical'
    },
    xAxis: {
        min: 0,
        max: 360,
        type: "",
        tickInterval: 22.5,
        tickmarkPlacement: 'on',
        labels: {
            formatter: function () {
                return categories[this.value / 22.5] + '°';
            }
        }
    },
    yAxis: {
        min: 0,
        endOnTick: false,
        showLastLabel: true,
        title: {
            text: 'Frequency (%)'
        },
        labels: {
            formatter: function () {
                return this.value + '%';
            }
        },
        reversedStacks: false
    },
    tooltip: {
        valueSuffix: '%'
    },
    plotOptions: {
        series: {
            stacking: 'normal',
            shadow: false,
            groupPadding: 0,
            pointPlacement: 'on'
        }
    }
});

});

和 HTML:

<!DOCTYPE html>
<html>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/data.js">`enter code     </script>
<script src="https://code.highcharts.com/modules/exporting.js">    </script>

<div id="container" style="min-width: 420px; max-width: 600px; height: 400px; margin: 0 auto"></div>
<p class="ex">
<script type="text/javascript" src="http://home.chpc.utah.edu/~u0675379/apiDemos/windTest.js"></script>
</p>
</html>

非常感谢这方面的任何指导，谢谢!-将

最佳答案

@W.Howard，我认为这里的问题是您如何处理和准备来自 API 的 JSON 响应。考虑使用以下 JavaScript 来检索和解析数据:

/*
 * Helper function
 * scalarMultiply(array, scalar)
 */
function scalarMultiply(arr, scalar) {
    for (var i = 0; i < arr.length; i++) {
        arr[i] = arr[i] * scalar;
    }
    return arr;
}


/*
 * getQuery(station, api_token)
 */
    function getQuery(station, mins, api_token) {

        $.getJSON('http://api.mesowest.net/v2/stations/timeseries?callback=?', {
                /* Specify the request parameters here */
                stid: station,
                recent: mins, /* How many mins you want */
                obtimezone: "local",
                vars: "wind_speed,wind_direction,wind_gust",
                jsonformat: 2, /* for diagnostics */
                token: api_token
            },
            function(data) {

                try {
                    windSpeed = data.STATION[0].OBSERVATIONS.wind_speed_set_1;
                    windDir = data.STATION[0].OBSERVATIONS.wind_direction_set_1;
                    windGust = data.STATION[0].OBSERVATIONS.wind_gust_set_1;
                } catch (err) {
                    console.log("Data is invalid. Check your API query");
                    console.log(this.url);
                    exit();
                }

                /* Convert from knots to mph */
                windSpeed = scalarMultiply(windSpeed, 1.15078);
                //windGust = scalarMultiply(windGust, 1.15078);

                /* Create and populate array for plotting */
                windData = [];
                for (i = 0; i < windSpeed.length; i++) {
                    windData.push([windDir[i], windSpeed[i]]);
                }

                /* Debug */
                // console.log(windData);
                console.log(this.url);

                plotWindRose(windData, mins);
            })
    };

我们现在拥有的是一个包含风向和风速的二维数组，我们可以将其传递给绘图函数。以下是更新后的绘图功能:

/*
 * Plot the wind rose
 * plotWindRose([direction, speed])
 */
    function plotWindRose(windData, mins) {

        /*
         * Note:
         * Because of the nature of the data we will accept the HighCharts Error #15.
         * --> Highcharts Error #15 (Highcharts expects data to be sorted).
         *     This only results in a performance issue.
         */
        var categories = ["0", "45", "90", "135", "180", "225", "270", "315"];

        $('#wind-rose').highcharts({
            series: [{
                name: "Wind Speed",
                color: '#cc3000',
                data: windData
            }],
            chart: {
                type: 'column',
                polar: true
            },
            title: {
                text: 'Wind Direction vs. Frequency (Last ' + mins/60. + ' hours)'
            },
            pane: {
                size: '90%',
            },
            legend: {
                align: 'right',
                verticalAlign: 'top',
                y: 100,
                text: "Wind Direction"
            },
            xAxis: {
                min: 0,
                max: 360,
                type: "",
                tickInterval: 45,
                tickmarkPlacement: 'on',
                labels: {
                    formatter: function() {
                        return categories[this.value / 45] + '\u00B0';
                    }
                }
            },
            yAxis: {
                min: 0,
                endOnTick: false,
                showLastLabel: true,
                title: {
                    text: 'Frequency (%)'
                },
                labels: {
                    formatter: function() {
                        return this.value + '%';
                    }
                },
                reversedStacks: false
            },
            tooltip: {
                valueSuffix: '%'
            },
            plotOptions: {
                series: {
                    stacking: 'normal',
                    shadow: false,
                    groupPadding: 20,
                    pointPlacement: 'on'
                }
            }
        });
    }

您可以在 https://gist.github.com/adamabernathy/eda63f14d79090ab1ea411a8df1e246e 处查看全部内容。祝你好运!

关于javascript - 来自 API 数据 (JSON) 的 Highcharts Windrose，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34581415/

25 4 0
文章推荐： php - 我需要在PHP中激活什么？接受 [
文章推荐： angularjs - 如何以 Angular 动态设置div的背景颜色？
文章推荐： ruby-on-rails - Rails 3中的动态错误页面
文章推荐： wordpress - 丢失/最后时使用 .htaccess 重定向无法正常工作
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com