ECharts レーダー チャート: 多次元データを表示する方法

ECharts レーダー チャート: 多次元データを表示する方法、特定のコード例が必要です

はじめに:
データ視覚化の分野では、レーダー チャートが使用されます。は、多次元データの分布および比較関係を表示するために使用される、一般的に使用されるグラフのタイプです。 ECharts は、強力なオープンソース データ視覚化ライブラリとして、レーダー チャートを含むさまざまな種類のチャートを提供します。この記事では、ECharts を使用してレーダー チャートを描画する方法と、対応するコード例を紹介します。

1. レーダー チャートの概要
レーダー チャートは、スパイダー ウェブ チャートまたはスター チャートとも呼ばれ、複数の同心円と接続された線で構成される多角形によって多次元データを表します。レーダー チャートでは、各次元のデータ値が対応する同心円上に表示され、接続線は各次元間の関係を表します。同心円の面積や異なるデータ間の接続線の長さを観察することで、各次元の大きさや相関度を直感的に比較できます。

2. ECharts レーダー チャートの基本構成
ECharts を使用してレーダー チャートを描画するには、まず ECharts 関連のスクリプトを HTML ページに導入する必要があります:

<script src="echarts.min.js"></script>

次に、レーダー チャートの表示用 DOM 要素:

<div id="radarChart" style="width: 600px; height: 400px;"></div>

次に、JavaScript コードを通じて DOM 要素を取得し、ECharts インスタンスを作成します:

var chart = echarts.init(document.getElementById('radarChart'));

次に、次の基本構成項目を定義する必要があります。レーダー チャートを作成し、それを ECharts インスタンスの setOption メソッドに渡します。

var option = {
    radar: {
        indicator: [
            { name: '维度1', max: 100 },
            { name: '维度2', max: 100 },
            { name: '维度3', max: 100 },
            // ... 其他维度
        ],
        center: ['50%', '50%'], // 雷达图的中心位置
        radius: '60%', // 雷达图的半径大小
    },
    series: [{
        type: 'radar',
        data: [
            {
                value: [80, 90, 70], // 各个维度的数据值
                name: '数据组1'
            },
            // ... 其他数据组
        ]
    }]
};
chart.setOption(option); // 设置雷达图的配置项

これで、単純なレーダー チャートの描画が完了しました。

3. サンプル コードと効果のデモ

次に、具体的な例を使用して、ECharts を使用して多次元データのレーダー チャートを描画する方法を示します。中国語、数学、英語、体育、芸術の 5 つの側面の得点を含む生徒の総合評価フォームがあるとします。ここで、これらのスコアをレーダー チャートの形式で表示して比較したいと思います。

まず、対応するデータを準備する必要があります:

var indicator = [
    { name: '语文', max: 100 },
    { name: '数学', max: 100 },
    { name: '英语', max: 100 },
    { name: '体育', max: 100 },
    { name: '艺术', max: 100 }
];
var data = [
    {
        value: [90, 80, 85, 70, 75],
        name: '张三'
    },
    {
        value: [85, 95, 75, 80, 90],
        name: '李四'
    },
    {
        value: [95, 90, 80, 85, 80],
        name: '王五'
    }
];

次に、次のコードを通じてレーダー チャートを生成できます:

var chart = echarts.init(document.getElementById('radarChart'));

var option = {
    radar: {
        indicator: indicator,
        center: ['50%', '50%'],
        radius: '60%'
    },
    series: [{
        type: 'radar',
        data: data
    }]
};

chart.setOption(option);

最後に、それを確認できます。 HTML ページを対応するレーダー チャート効果に変換します。

結論:

この記事では、ECharts を使用してレーダー チャートを描画する方法を紹介し、具体的なコード例を示します。レーダーチャートの基本構成項目を設定することで、多次元データの分布やコントラストを柔軟に表示できます。 ECharts は、さまざまなデータ視覚化のニーズを満たす豊富な機能とスタイルのカスタマイズ オプションを提供します。この記事が、読者が ECharts レーダー チャートの描画方法をよりよく理解し、応用できるようになれば幸いです。 ###

以上がECharts レーダー チャート: 多次元データを表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。