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

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

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

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

Это выглядит какchart.js имеет два варианта, которые не совсем соответствуют требованиям:

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

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

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

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

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

 Tarun Lalwani27 июн. 2018 г., 14:41
Можете ли вы привести пример изображения того, какой график вы ожидаете?

Ответы на вопрос(2)

Решение Вопроса
Демо и код:

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

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

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

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

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

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

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

 Rishabh Shah26 окт. 2018 г., 20:13
Спасибо за помощь. Можете ли вы помочь мне в этих ниже вопросов? Я взял ссылку на ваш пример. 1)stackoverflow.com/questions/53011177/... 2)stackoverflow.com/questions/53006335/... 3)stackoverflow.com/questions/52994989/...

проверьте пример ссылки ниже:

////////////////////////////////////////////////////////////// 
        //////////////////////// 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

Ваш ответ на вопрос