サンキーダイアグラムを使用して ECharts でデータフローを表示する方法-jsチュートリアル-php.cn

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

PHPz

リリース： 2023-12-17 09:38:36

オリジナル

1662 人が閲覧しました

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

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

ECharts ライブラリの紹介
まず、ECharts ライブラリを紹介する必要があります。 CDN を通じてインポートすることも、ECharts ライブラリをローカルにダウンロードしてインポートすることもできます。次の例では、例として CDN インポートを使用しています:
```
<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js"></script>
```
ログイン後にコピー
コンテナの作成
サンキー図を表示する div コンテナを作成します:
```
<div id="sankeyChart" style="width: 800px; height: 600px;"></div>
```
ログイン後にコピー
データの準備
表示用のデータを準備します。データ形式は、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}
 ]
};
```
ログイン後にコピー
ノードはデータの送信元または送信先を表し、リンクはノード間の接続関係とデータの流れを表します。各ノードには名前属性が含まれている必要があり、リンクにはソース属性とターゲット属性が含まれている必要があり、値はデータトラフィックのサイズを示します。

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

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

// 设置图表配置项
var option = {
 series: [{
     type: 'sankey',
     data: data.nodes,
     links: data.links
 }]
};

// 渲染图表
chart.setOption(option);

ログイン後にコピー

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

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

// 更新数据
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 サイトの他の関連記事を参照してください。