Ниже приведен html-файл, в котором есть возможность создать диаграмму «Роза ветров» с такими же точными данными и атрибутами. Проблема в том, что есть два вызова для создания диаграмм роз ветров new Highcharts.StockChart(commonOptions) и Highcharts.chart('container'). Если вы посмотрите на обе диаграммы, вы увидите, что они создают разные диаграммы (главным образом в том, как отображаются подсказки). Первый вызов отображает все всплывающие подсказки и одновременно, а второй вызов создает обычные всплывающие подсказки. Должны быть какие-то опции, которые вызывают это, но после многих часов не смогли найти его.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/highcharts-more.js"></script>
<script type="text/javascript">
window.onload = function() {
var categories = ['N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE', 'SSE', 'S', 'SSW', 'SW', 'WSW', 'W', 'WNW', 'NW', 'NNW'];
var commonOptions = {
chart: {
renderTo: 'container',
polar: true,
type: 'column'
},
xAxis: {
min: 0,
max: 360,
tickInterval: 22.5,
tickmarkPlacement: 'on',
labels: {
formatter: function() {
return categories[parseInt(this.value / 22.5)] ;
}
}
},
yAxis: {
min: 0,
endOnTick: false,
reversedStacks: false
},
plotOptions: {
series: {
stacking: 'normal',
shadow: false,
groupPadding: 0,
pointPlacement: 'on'
}
},
rangeSelector: {enabled:false},
navigator: {enabled: false},
scrollbar: {enabled: false},
series: [{ name:"a",
data: [{x: 0, y: 5}, {x: 22.5,y: 3}, {x: 45,y: 4}, {x: 67.5, y: 2}, {x: 90,y: 9}, {x: 112.5, y: 2}, {x: 135,y: 8}, {x: 157.5,y: 9}, {x: 180,y: 2}]}, {
name:"b",
data: [{x: 0,y: 2}, {x: 22.5,y: 6}, {x: 45,y: 1}, {x: 67.5,y: 9}, {x: 90,y: 9}, {x: 112.5,y: 3}, {x: 135,y: 5}, {x: 157.5,y: 3}, {x: 180,y: 7}]}, {
name:"C",
data: [{x: 0,y: 5}, {x: 22.5,y: 3}, {x: 45,y: 4}, {x: 67.5, y: 2}, {x: 90,y: 9}, {x: 112.5,y: 2}, {x: 135,y: 8}, {x: 157.5,y: 9}, {x: 180,y: 2}]}]
var chart = new Highcharts.StockChart(commonOptions);
});
Highcharts.chart('container1', {
chart: {
polar: true,
type: 'column'
},
xAxis: {
min: 0,
max: 360,
tickInterval: 22.5,
tickmarkPlacement: 'on',
labels: {
formatter: function() {
return categories[this.value / 22.5];
}
}
},
yAxis: {
min: 0,
endOnTick: false,
reversedStacks: false
},
plotOptions: {
series: {
stacking: 'normal',
shadow: false,
groupPadding: 0,
pointPlacement: 'on'
}
},
rangeSelector: {enabled:false},
navigator: {enabled: false},
scrollbar: {enabled: false},
series: [{ name:"a",
data: [{x: 0, y: 5}, {x: 22.5,y: 3}, {x: 45,y: 4}, {x: 67.5, y: 2}, {x: 90,y: 9}, {x: 112.5, y: 2}, {x: 135,y: 8}, {x: 157.5,y: 9}, {x: 180,y: 2}]}, {
name:"b",
data: [{x: 0,y: 2}, {x: 22.5,y: 6}, {x: 45,y: 1}, {x: 67.5,y: 9}, {x: 90,y: 9}, {x: 112.5,y: 3}, {x: 135,y: 5}, {x: 157.5,y: 3}, {x: 180,y: 7}]}, {
name:"C",
data: [{x: 0,y: 5}, {x: 22.5,y: 3}, {x: 45,y: 4}, {x: 67.5, y: 2}, {x: 90,y: 9}, {x: 112.5,y: 2}, {x: 135,y: 8}, {x: 157.5,y: 9}, {x: 180,y: 2}]}]
});
}
</script>
</head>
<body>
<div id="container" style="min-width: 420px; max-width: 600px; height: 400px; margin: 0 auto"></div>
<div id="container1" style="min-width: 420px; max-width: 600px; height: 400px; margin: 0 auto"></div>
</body>
</html>