Какой самый эффективный способ реализовать радарный график с 50 точками в произвольных местах с использованием chart.js

Рассмотрим последовательность данных по следующим строкам:

data = [{angle:1.2,value:1.2},...,{angle:355.2: value:5.6}];

Я хотел бы отображать эти данные на радиально масштабированном графике (т.е. Круговые полосы, указывающие, насколько высока величина каждой точки), чтобы показать угол vs значение. Углы будут изменяться на небольшую, но неконтролируемую величину для каждого набора данных, но всегда будет ~ 50 из них, расположенных достаточно равномерно вокруг диаграммы.

Похоже, у chart.js есть два варианта, которые не совсем соответствуют счету:

Радарный график, который, как представляется, требует метки для каждой точки, но без очевидного способа контроля, где применяются эти метки.
Разброс xy, который я мог бы рассчитать координаты x/y, но не имеющий радиального масштаба, чтобы визуализировать значение каждой точки.

Есть ли способ объединить два, возможно, или какой-то вариант, который я пропустил, чтобы контролировать их для достижения результата, который я ищу здесь?

Изменить - например, это показывает данные, но не имеет радиальной шкалы:

https://jsfiddle.net/7d7ghaxx/4/

** Edit2 - Это то, что я ожидал увидеть в результате:

Ответ 1

Демо и код:

https://stackblitz.com/edit/js-jp4xm4?file=index.js

Объяснение:

Использовал диаграмму рассеяния для построения точек
Добавлен (написал) плагин chartjs, который преобразует точки от полярности в декартовую на beforeUpdate поэтому вам не нужно беспокоиться о преобразовании перед каждым обновлением
Сделанная сетка x & y (не оси по происхождению) скрыть добавлением gridLines : { color: 'transparent' } и ticks : { display: false }
Сделано min и max (варианты в ticks) обеих осей равны, так что оргин находится в центре
Добавлена radialLinear шкала для полярной сетки

(Обновление 1)

Добавлен обратный вызов метки всплывающей подсказки, чтобы показать подсказку как (r, θ) вместо значения по умолчанию (x, y)

(Обновление 2)

Добавлен (написал) плагин beforeDraw чтобы заполнить ctx светло-голубым цветом, как захотел OP

PS: (Указывая только на то, чтобы быть немного конкурентоспособным), я использовал chartjs (в отличие от других ответов), потому что OP хочет решение chartjs, как оно четко написано в вопросе: "using chart.js". Там могут быть решения лучше, чем chartjs, но это не имеет значения.

Ответ 2

Вы можете использовать D3 js. Диаграммы полезны для радиолокационной диаграммы. Посмотрите пример ниже:

////////////////////////////////////////////////////////////// 
        //////////////////////// Set-Up ////////////////////////////// 
        ////////////////////////////////////////////////////////////// 

        var margin = {top: 100, right: 100, bottom: 100, left: 100},
            width = Math.min(700, window.innerWidth - 10) - margin.left - margin.right,
            height = Math.min(width, window.innerHeight - margin.top - margin.bottom - 20);

        ////////////////////////////////////////////////////////////// 
        ////////////////////////// Data ////////////////////////////// 
        ////////////////////////////////////////////////////////////// 

        var data = [
                  [//Yourchart values
                    {axis:"",value:0.052},
                    {axis:"",value:0.052},
                    {axis:"",value:0.012},
                    {axis:"",value:0.012},
                    {axis:"",value:0.022},
                    {axis:"",value:0.052},
                    {axis:"",value:0.052},
                    {axis:"",value:0.021}           
                  ]
                ];
        ////////////////////////////////////////////////////////////// 
        //////////////////// Draw the Chart ////////////////////////// 
        ////////////////////////////////////////////////////////////// 

        var color = d3.scale.ordinal()
            .range(["#6cbb69","#CC333F","#00A0B0"]);

        var radarChartOptions = {
          w: 500,
          h: 300,

          maxValue: 0.15,
          levels: 5,
          roundStrokes: true,
          color: color
        };
        //Call function to draw the Radar chart
        RadarChart(".radarChart", data, radarChartOptions);

https://codepen.io/Nighamza/pen/bKmjGE