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

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

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

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

   ログイン後にコピー

2. コンテナの作成
   サンキー図を表示する 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 サイトの他の関連記事を参照してください。