Plotly.jsでレーダーチャートを表示するためには、用意するデータにてtypeプロパティを’scatterpolar’に指定します。また、thetaプロパティにラベル名、rプロパティに値を指定します。

また、layoutの設定でレンジ幅の指定や、回転の設定が必要になるかもしれません。

サンプル:フロッピーやハードディスクの比較


let graph = "myDiv";
let data = [];
let layout = {};
let config = {};

let theta = [
    '最低価格',
    'コストパフォーマンス',
    'ランダム',
    'シーケンシャル'
];
data = [
    {
        type: 'scatterpolar',
        name: 'FD',
        r: [10, 1, 1, 2],
        theta: theta,
        fill: 'toself'
    },
    {
        type: 'scatterpolar',
        name: 'SD',
        r: [7, 7, 7, 7],
        theta: theta,
        fill: 'toself'
    },
    {
        type: 'scatterpolar',
        name: 'HDD',
        r: [1, 10, 5, 10],
        theta: theta,
        fill: 'toself'
    },
    {
        type: 'scatterpolar',
        name: 'SSD',
        r: [5, 8, 10, 10],
        theta: theta,
        fill: 'toself'
    },

]

layout = {
    polar: {
        radialaxis: {
            visible: true,
            range: [0, 10],
//                        angle: 90,
//                        tickangle:0
        },
        angularaxis: {
//                        rotation:90
        }
    },
    showlegend: true
}

Plotly.newPlot("myDiv", data, layout);

参考

Plotly公式サイト

Radar Charts | JavaScript | Plotly