サンキー ダイアグラムを使用して ECharts でデータ フローを表示する方法

サンキー ダイアグラムを使用して ECharts でデータ フローを表示する方法

はじめに:
データの視覚化はデータ分析の重要な部分であり、複雑なデータを通過させることができます。グラフなどで視覚的に表示します。 ECharts は、複数のチャート タイプをサポートする強力なデータ視覚化ライブラリであり、その中でも Sankey Diagram はデータの流れの関係を非常に直観的に表示できます。この記事では、サンキー ダイアグラムを使用して EChart でデータ フローを表示する方法を紹介し、具体的なコード例を示します。

1. ECharts ライブラリの紹介
   まず、ECharts ライブラリを紹介する必要があります。 CDN を通じてインポートすることも、ECharts ライブラリをローカルにダウンロードしてインポートすることもできます。次の例では、例として CDN インポートを使用しています:

   <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js"></script>

2. コンテナの作成
   サンキー図を表示する div コンテナを作成します:

   <div id="sankeyChart" style="width: 800px; height: 600px;"></div>

3. データの準備
   表示用のデータを準備します。データ形式は、ECharts Sankey チャートの要件に準拠する必要があります。以下にサンプルデータを示します。

   var data = {
    nodes: [
        {name: '节点1'},
        {name: '节点2'},
        {name: '节点3'},
        {name: '节点4'}
    ],
    links: [
        {source: '节点1', target: '节点2', value: 100},
        {source: '节点1', target: '节点3', value: 200},
        {source: '节点2', target: '节点3', value: 150},
        {source: '节点3', target: '节点4', value: 120}
    ]
   };

   ノードはデータの送信元または送信先を表し、リンクはノード間の接続関係とデータの流れを表します。各ノードには名前属性が含まれている必要があり、リンクにはソース属性とターゲット属性が含まれている必要があり、値はデータ トラフィックのサイズを示します。

4. チャートの初期化
   ECharts ライブラリ メソッドを使用して Sankey チャートを初期化します:

   var chart = echarts.init(document.getElementById('sankeyChart'));
   
   // 设置图表配置项
   var option = {
    series: [{
        type: 'sankey',
        data: data.nodes,
        links: data.links
    }]
   };
   
   // 渲染图表
   chart.setOption(option);

5. カスタマイズされた構成
   ニーズに応じて、カスタマイズできますグラフのスタイルと構成を定義します。一般的に使用される設定項目の一部を以下に示します。
6. tooltip: マウスをノードまたは接続線上に置いたときのプロンプト ボックスの設定。
7. color: ノードと接続線の色の構成。
8. label: ノード名と接続線データの表示設定。
9. layout: チャートのレイアウトの設定。ノードの位置を調整することでチャートの表示モードを変更できます。

10. データ更新
    データを動的に更新する必要がある場合は、次の方法で実行できます:

    // 更新数据
    data.nodes.push({name: '节点5'});
    data.links.push({source: '节点4', target: '节点5', value: 80});
    
    // 更新图表配置
    option.series[0].data = data.nodes;
    option.series[0].links = data.links;
    
    // 重新渲染图表
    chart.setOption(option);

概要:
これEChartsでデータを更新する方法を紹介した記事 データフローの表示にはサンキーダイアグラムを使用しますが、EChartsライブラリを導入し、コンテナの作成、データの準備、チャートの初期化を行うことで、データフローの関係を視覚的に表示することができます。同時に、カスタム構成とデータ更新方法についても学びました。読者がデータ視覚化分析に ECharts をより効果的に使用するのに役立つことを願っています。

以上がサンキー ダイアグラムを使用して ECharts でデータ フローを表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。