Highcharts полярная диаграмма данные о ветре от 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 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/

В идеале я хотел бы, чтобы не создавать копию windDirection и windSpeed в DOM, поскольку оба набора данных достаточно велики уже.

Я видел этот вопрос/ответ на 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/

Примечание: это хорошая идея t o сортировать свои точки данных по ветру, начинать с 0.Как это: http://jsfiddle.net/02v3tduo/22/

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