Napisałem kod, ale mam problem z usunięciem funkcji getData(). Jak prawidłowo powinno wyglądać zapytanie AJAX dla skryptu PHP, a jak dla adresu? Chodzi o ten fragment kodu:
Kod w całości wygląda tak, ale nie uruchamia się nawet z funkcją getData() i jej definicją. Coś pokręciłem. Dziękuję za cierpliwość.
Kopiuj
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Dokument bez tytułu</title>
<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>
<script src="https://code.jquery.com/jquery-3.0.0.js" integrity="sha256-jrPLZ+8vDxt2FnE1zvZXCkCcebI/C8Dt5xyaQBjxQIo=" crossorigin="anonymous"></script>
<script type="text/javascript">
// helper przerabiający {} => []
const toArray = obj => Object.keys(obj).map(key => obj[key])
// funkcja przyjmująca wartość speed i zwracająca odpowiedni przedział
// dla podanej warości, dla przykładu:
// const intervals = [0.5, 2, 4, 6, 8, 10];
// getWindSpeedInterval(0.1, intervals) => '< 0.5'
// getWindSpeedInterval(12, intervals) => '> 10'
// getWindSpeedInterval(5.3, intervals) => '4 - 6'
const getWindSpeedInterval = (speed, intervals) => {
const min = intervals[0];
const max = intervals[intervals.length - 1];
if (speed < min) return `< ${min}`;
if (speed > max) return `> ${max}`;
const intervalStart = intervals.find((x, idx, array) => {
return (speed - x) * (speed - array[idx + 1]) <= 0
});
const intervalEnd = intervals[intervals.indexOf(intervalStart) + 1];
return `${intervalStart} - ${intervalEnd}`;
};
const directions = [
"N", "NNE", "NE", "ENE", "E", "ESE", "SE",
"SSE", "S", "SSW", "SW", "WSW", "W", "WNW",
"NW", "NNW"
];
const url = 'http://zbysiusp.dyndns.org/serwer_www/METEO3/data_compass_test.php?callback=?';
$.ajax({
type: 'POST',
dataType: 'json',
url: 'data_compass.php',
data: {
json: getData()
},
}).then(data => {
// przerabiamy dane z formatu
// [{czas_datetime...}, {czas_datetime...}] na format wymagany przez chart =>
// {
// name: '2 - 4',
// 1.5 odpowiada "N", 4.5 odpowiada "NNE", 3.0 odpowiada "NE" itd.
// data: [1.5, 4.5, 3.0, 0 ... ]
// }
const chartData = data.reduce((next, {
wind_speed_average: speed, // zmieniamy nazwę na speed
compass: direction // zmieniamy nazwę na direction
}) => {
// pobieramy przedział dla aktualnej prędkości wiatru
const interval = getWindSpeedInterval(speed, [0.5, 2, 4, 6, 8, 10]);
if (typeof next[interval] === 'undefined') {
next[interval] = {
name: interval,
data: new Array(directions.length).fill(0)
};
}
const directionIndex = directions.indexOf(direction);
next[interval]['data'][directionIndex] += parseFloat(speed);
return next;
}, {});
// powyższa operacja wyprodukowała nam {}, a my potrzebujemy żeby była to []
const seriesData = toArray(chartData);
Highcharts.chart('container', {
chart: {
polar: true,
type: 'column'
},
plotOptions: {
series: {
stacking: 'normal',
shadow: false,
groupPadding: 0,
pointPlacement: 'on'
}
},
title: {
text: 'Wind Rose'
},
xAxis: {
tickmarkPlacement: 'on',
categories: directions
},
yAxis: {
title: {
text: 'Frequency'
},
reversedStacks: false
},
series: seriesData,
});
});
</script>
</head>
<body>
<div id="container" style="min-width: 420px; max-width: 600px; height: 400px; margin: 0 auto"></div>
</body>
</html>
MySQL 
JavaScript 