海图极图风上升数据来自JSON

Question

我目前正在成功地绘制风速和风向，使用标准的风速线图和风向散点图。

当前的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.com中显示的非常相似，但是使用了现有的DOM对象，而不是为数据创建HTML。

使用如下所示的两个数据系列无法产生所需的输出。

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

我接着从我的数据创建了一个数据点对，它遵循用于series.data的高级图表API参考示例，生成如下输出：

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

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

理想情况下，我希望避免在DOM中创建windDirection和windSpeed的副本，因为这两个数据集已经相当大了。

我在SO 高级图表:带有JSON数据的风玫瑰图确实看到了这个问题/答案，但我不确定同样的答案是否适用于我的情况。在处理大型数据集时，提议的答案似乎非常繁琐，因为每个数据系列都需要在显示图表之前构造。

我不知道现在该怎么做。我意识到，我的数据可能需要绑定到5-10度的垃圾箱中，这样就不会因为缺少更好的术语而显得“分散”了。风玫瑰正常工作后，我就能处理好了。

Answer 1

一般来说，你想要什么还不清楚。但是我会试着回答..。

首先，您正在创建字符串而不是数组，有什么具体原因吗？只需使用：

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

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

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

然后，玩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
            }
        }
    },

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

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

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

Answer 2

我有一个简单的方法:您可以参考系列数据。

​

// Parse the data from an inline table using the Highcharts Data plugin
Highcharts.chart('container', {
    
    chart: {
        polar: true,
        type: 'column'
    },

    title: {
        text: 'Wind rose for South Shore Met Station, Oregon'
    },

    subtitle: {
        text: 'Source: or.water.usgs.gov'
    },

    pane: {
        size: '85%'
    },

    legend: {
        align: 'right',
        verticalAlign: 'top',
        y: 100,
        layout: 'vertical'
    },

    xAxis: {
        tickmarkPlacement: 'on',
        type:'category'
    },

    yAxis: {
        min: 0,
        endOnTick: false,
        showLastLabel: true,
        
        
        reversedStacks: false
    },

   
		series: [{
				"data": [
					["ios1", 12],
					["ios2", 12],
					["ios3", 12],
					["ios4", 91],
					["ios5", 11],
					["ios6", 12],
					["ios7", 18],
					["ios8",19],
					["ios9",12],
					["ios10",34],
					["ios11",11],
					["ios12",71],
					["ios13", 66],
					["ios14", 21],


				],
				"type": "column",
				"name": "<40G"
			}, {
				"data": [
					["ios1", 12],
					["ios2", 33],
					["ios3", 12],
					["ios4", 10],
					["ios5", 11],
					["ios6", 13],
					["ios7", 9],
					["ios8",20],
					["ios9",13],
					["ios10",74],
					["ios11",21],
					["ios12",72],
					["ios13", 67],
					["ios14", 22],

				],
				"type": "column",
				"name": "40-100G,"
			}, {
				"data": [
					["ios1", 12],
					["ios2", 34],
					["ios3", 23],
					["ios4", 11],
					["ios5", 31],
					["ios6", 14],
					["ios7", 10],
					["ios8", 21],
					["ios9", 14],
					["ios10", 21],
					["ios11", 21],
					["ios12", 73],
					["ios13", 68],
					["ios14", 23],

				],
				"type": "column",
				"name": "100-500G,"
			}, {
				"data": [
					["ios1", 12],
					["ios2", 45],
					["ios3", 14],
					["ios4", 12],
					["ios5", 31],
					["ios6", 15],
					["ios7", 11],
					["ios8", 22],
					["ios9", 15],
					["ios10", 22],
					["ios11", 21],
					["ios12", 74],
					["ios13", 69],
					["ios14", 24],

				],
				"type": "column",
				"name": ">500G"
			}],
    plotOptions: {
        series: {
            stacking: 'normal',
            shadow: false,
            groupPadding: 0,
            pointPlacement: 'on'
        }
    }
});

<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"></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>

​