JSFiddle - React, Tailwind, and code Playground

by abubelinha

HTML

<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/exporting.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/json2/20130526/json2.min.js"></script>
<script language="javascript">

</script>
<div id="container" style="width: 100%; height: 800px; margin: 0 auto"></div>

JavaScript

function catgrados(grados,ngrupos=8,base=0) {
    // categoría 1 significa N (por E e por W tamén)
    var categories = [
    'N','N-E','NNE','NE-N','NE','NE-E','ENE','E-N', 
    'E','E-S','ESE','SE-E','SE','SE-S','SSE','S-E', 
    'S','S-W','SSW','SW-S','SW','SW-W','WSW','W-S', 
    'W','W-N','WNW','NW-W','NW','NW-N','NNW','N-W'];
    // base = valor del rango más bajo (0 o 1, normalmente)
    var grupo=(grados>(360-360/ngrupos/2) ? base : parseInt(
    Math.min(359.999,grados+360/ngrupos/2) / (360/ngrupos)) 
    + base);
    var mediana=(grupo-base) * 360/ngrupos;
		return([grupo,mediana]);
		return(grupo);
    // a mediana en grados deste grupo sería = (grupo-base) * 360/ngrupos
}
// code to create a data set that looks like data: [[5, 2], [6, 3], [8, 2]]
    var direction, values, directionJSON, valuesJSON, windDataJSON;
    direction = "[202,229,218,208,230,202,205,213,223,227,239,250,237,240,248]";
    values = "[9,13.4,12,9.7,6.6,12.1,10.2,12.2,4.6,9,6.6,6.6,8.7,8.3,9.7]";
    directionJSON = JSON.parse(direction);
    valuesJSON = JSON.parse(values);
    roseDataJSON = [];
    for (i = 0; i < directionJSON.length; i++) {
        roseDataJSON.push([ directionJSON[i], valuesJSON[i] ]);
    }
    roseDataJSON=[[42,1+20],[315,16],[337,2+20],[45,8+20],[65,2+20],[67,20],[90,109],[100,1+20],[105,2+20],[112,89],[135,129],[202,40],[225,52],[247,31],[270,19],[292,11],[157,118],[160,2+20],[180,78]];
    roseDataJSON=[[0,0],[45,31],[90,201],[135,247],[180,120],[225,83],[270,30],[315,18]];
    roseDataJSON=[[0,0],[1,0],[45,9],[67.5,22],[90,110],[112.5,91],[135,129],[157.5,120],[180,78],[202.5,40],[225,52],[247.5,31],[270,19],[292.5,11],[315,16],[337.5,2]];
    //roseDataJSON=[[42,1+20],[315,16],[337,2+20],[45,8+20],[65,2+20],[67,20],[90,109],[100,1+20],[105,2+20],[112,89],[135,129],[202,40],[225,52],[247,31],[270,19],[292,11],[157,118],[160,2+20],[180,78]];
    
    // ordenar polo primeiro valor de cada par (dirección cardinal),
    //  por se o array non está aínda...