来自JSON的Highcharts极地风图数据上涨 [英] Highcharts polar chart wind rose data from JSON

问题描述

我现在用风速标准线图和风向散点图成功绘制了风速和风向。 当前 windSpeed 和 windDirection DOM对象如下所示：

  windDirection =[202,229,218,208,230]; 
 windSpeed =[9,13.4,12,9.7,6.6]; 
  

实际上这两个变量都有数百个（如果不是数千）数据点。每个 windDirection 数据点对应于同一位置的 windSpeed 数据点，并且有相同数量的 windDirection 和 windSpeed 数据集中的数据点。

目标是将这些数据绘制成具有标准N，NNE，NE，ENE，E，ESE，SE，SSE，S，SSW，SW，WSW，W，WNW，NW，NNW风玫瑰标签的风玫瑰。非常像 Highcharts Polar Wind Rose演示 @ highcharts.com中所示，但利用现有的DOM对象而不是为数据创建HTML表格。

使用如下所示的两个数据序列不会产生所需的输出。 b

 系列：[{
 data：windDirection 
}，{
 data：windSpeed 
} 
] 
  

我继续从我的数据中创建一个数据点对，它遵循为series.data创建的Highcharts API参考例如产生如下输出：

  data：[[windDirection1，windSpeed1]，[windDirection2，windSpeed2]，等等] 
  

该方法也失败了。您可以在JSFiddle中查看它： http://jsfiddle.net/02v3tduo/19/

理想情况下，我希望避免创建 windDirection 和 windSpeed



我在SO Highcharts：带有JSON数据的Wind Rose图表，但我不确定相同的答案适用于我的情况。在处理大型数据集时，所提出的答案似乎非常麻烦，因为每个数据系列都需要在显示图表之前构建。

我不知道在这一点上继续。我意识到我的数据可能需要分成5-10个分档，因此缺乏更好的术语看起来并不分散。我可以在风玫瑰花正常工作后处理分档。

总的来说，目前还不清楚你要求的是什么。然而，我会尽力回答。

首先，您是创建字符串而不是数组，任何具体的原因呢？只需使用：

  windDirectionJSON = JSON.parse（windDirection）; 
 windSpeedJSON = JSON.parse（windSpeed）; 
 windDataJSON = []; 
 for（i = 0; i< windDirectionJSON.length; i ++）{
 windDataJSON.push（[windDirectionJSON [i]，windSpeedJSON [i]]）; 
 
 $ / code> 

现在，定义要在xAxis上显示的类别数组：

$ b $

  var categories = ['N'，'NNE'，'NE'，'ENE'，'E'，'ESE'，'SE '，'SSE'，'S'，'SSW'，'SW'，'WSW'，'W'，'WNW'，'NW'，'NNW']; 
  

然后，玩弄xAxis：

 xAxis：{
 min：0，
最大值：360，//最大值= 360degrees 
类型：，
 tickInterval：22.5 ，//显示每个第16个标签
 tickmarkPlacement：'on'，
标签：{
格式化程序：function（）{
返回类别[this.value / 22.5] +'° ; //返回标签
} 
} 
}，
  

和工作示例： http://jsfiddle.net/02v3tduo/21/

注意：最好按照风向对数据点进行排序，从0开始。像这样： http://jsfiddle.net/02v3tduo/22/

  windDataJSON.sort（function（a，b）{return a [0]  -  b [0];}）; 
  

I am currently successfully plotting wind speed and wind direction using a standard line graph for wind speed and a scatter plot for wind direction.

The current windSpeed and windDirection DOM objects look like this:

windDirection = "[202,229,218,208,230]";
windSpeed = "[9,13.4,12,9.7,6.6]";

In reality both those variables hold hundreds, if not thousands, of data points. Each windDirection data point corresponds to the windSpeed data point at the same location, and there are an equal number of windDirection and windSpeed data points in the data set.

The goal is to plot this data onto a wind rose which has the standard N, NNE, NE, ENE, E, ESE, SE, SSE, S, SSW, SW, WSW, W, WNW, NW, NNW wind rose labels. Very much like shown in the Highcharts Polar Wind Rose demo @ highcharts.com but utilizing the existing DOM objects rather than creating HTML tables for the data.

Using two data series like shown below did not produce the desired output.

series: [{
            data: windDirection
        },{
            data: windSpeed
        }
]

I proceeded to create a data point pair from my data which follows the Highcharts API Reference for series.data example which produced output like this:

data: [[windDirection1,windSpeed1], [windDirection2,windSpeed2], and so on]

That approach failed as well. You can view it at JSFiddle: http://jsfiddle.net/02v3tduo/19/

Ideally I would like to avoid creating a copy of windDirection and windSpeed in the DOM because both data sets are fairly large already.

I did see this question/answer at SO Highcharts: Wind Rose chart with JSON data but I am not sure that the same answer applies in my case. The proposed answer seems very cumbersome when dealing with large data sets as each of the data series would need to be constructed prior to showing the chart.

I don't know how to proceed at this point. I realize that my data probably needs to be binned into 5-10 degree bins so it doesn't look as "scattered" for the lack of a better term. I can deal with the binning after the wind rose works properly.

解决方案

In general, it's not clear what you are asking for. However I'll try to answer..

First of all, you are creating string instead of array, any specific reason for that? Simply use:

windDirectionJSON = JSON.parse(windDirection);
windSpeedJSON = JSON.parse(windSpeed);
windDataJSON = [];
for (i = 0; i < windDirectionJSON.length; i++) {
    windDataJSON.push([ windDirectionJSON[i], windSpeedJSON[i] ]);
}

Now, define array of categories to be displayed on xAxis:

var categories = ['N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE', 'SSE', 'S', 'SSW', 'SW', 'WSW', 'W', 'WNW', 'NW', 'NNW'];

Then, play around with xAxis:

    xAxis: {
        min: 0,
        max: 360, // max = 360degrees
        type: "",
        tickInterval: 22.5, // show every 16th label
        tickmarkPlacement: 'on',
        labels: {
            formatter: function () {
                return categories[this.value / 22.5] + '°'; // return text for label
            }
        }
    },

And working example: http://jsfiddle.net/02v3tduo/21/

Note: it's good idea to sort your data points by wind-direction, to start from 0. Like this: http://jsfiddle.net/02v3tduo/22/

windDataJSON.sort(function(a,b) { return a[0] - b[0]; });

这篇关于来自JSON的Highcharts极地风图数据上涨的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！