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 Polar Wind Rose demo @ highcharts.com中所示，但使用现有的DOM对象而不是为数据创建HTML表。

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

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

我继续从我的数据创建一个数据点对，该数据点跟在Highcharts API Reference for series.data示例之后，产生如下输出：

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

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

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

我确实在SO Highcharts: Wind Rose chart with JSON data看到了这个问题/答案，但我不确定在我的情况下是否适用相同的答案。在处理大型数据集时，建议的答案看起来非常麻烦，因为在显示图表之前需要构建每个数据系列。

我不知道如何继续这一点。我意识到我的数据可能需要被分成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>

来自JSON的Highcharts极地图风玫瑰数据

2 个答案: