Я пытаюсь построить скорость ветра на графике холста, используя Charts.js. Данные (скорость и направление ветра) поступают из URL-адреса JSON. С кодом все работает нормально и сюжет выглядит так:
Я смог добавить стрелки с помощью плагинов из Charts.js, функций formatter
и rotation
, но я хотел бы, чтобы стрелки поворачивались в соответствии с углом направления ветра, который исходит из JSON.
Файл JSON имеет следующий формат:
Пока часть кода выглядит так:
Current = Date.now();
$.getJSON("https://api.openweathermap.org/data/2.5/onecall?lat = {LAT}&lon = {LONG}&dt = " + Current + "&appid = {MY API CODE}", function(data) {
$.each(data.hourly, function(key, value) {
var d = new Date(value.dt * 1000);
minutes = "0" + d.getMinutes()
var date_corrected = d.getFullYear() + "-" + [d.getMonth() + 1] + '-' + d.getDate() + ' ' + [d.getHours()] + ':' + minutes.substr(-2);
dataOpen1.push({
x: date_corrected,
y: value.wind_speed
});
dataOpen2.push({
x: date_corrected,
y: value.wind_deg
});
});
var WIND = new Chart(vant, {
plugins: [ChartDataLabels],
type: 'line',
data: {
labels: dataOpen1.map(x => x.x),
datasets: [{
data: dataOpen1.map(y => y.y),
label: 'Viteza vantului ',
borderColor: "#3e95cd",
fill: true
}, ]
},
options: {
plugins: {
datalabels: {
backgroundColor: 'white',
borderRadius: 20,
borderWidth: 3,
borderDashOffset: 20,
color: 'black',
font: {
size: 18
},
formatter: function(value) {
return '\u27a3'
},
rotation: function(ctx) {
return ctx.dataset.data[ctx.dataIndex] * 25;
},
padding: 0
}
},
});
});
Поэтому я хотел бы получить значения из dataOpen2
(с направлением ветра) и использовать их для установки угла поворота стрелок для каждого набора данных. Я знаю, что код должен быть здесь:
rotation:
function(ctx) {
.......
return ctx.dataset.data[ctx.dataIndex] * 25;
},
Но я понятия не имею, как это сделать.
Согласно выпуску в репозитории github для CHARTJS https://github.com/chartjs/Chart.js/issues/5667
Возможно, вам потребуется настроить данные следующим образом:
dataOpen1.push({
x: date_corrected,
y: value.wind_speed
d: value.wind_deg
});
И затем вы можете изменить с помощью плагина datalable свою функцию как
rotation: function(ctx) { return ctx.dataset.data[ctx.dataIndex].d; }