Sankey Rose Chart を使用して ECharts でデータ フローと比率の変化を表示する方法
ECharts は、データをより鮮明かつ直感的に表示できるビジュアル データ表示ライブラリです。中でも、Sankey Rose チャートは、データ フローの方向と割合の変化を示すのに非常に役立ちます。この記事では、具体的なコード例を示しながら、ECharts で Sankey Rose Chart を使用する方法を紹介します。
- はじめに
サンキー ローズ チャートは、内円と外円、扇形の長さの同心円を通じてデータを明確な階層構造で表示する特別なローズ チャートです。多次元データフローを表示します。 ECharts では、Sankey Rose Chart を使用して、さまざまな次元間の比率と、時間の経過に伴う比率間の関係を表示できます。さらに、データ量が多く、ディメンションが多すぎる場合、ECharts はユーザーの視覚的な対話を容易にするスクロール表示とサムネイル プレビューもサポートしています。
- 実装
以下では、ECharts で Sankey ローズ チャートを使用して、初期化、データの設定、スタイルの設定など、データ フローの方向と割合の変更を表示する方法を紹介します。インタラクティブエフェクト 4 ステップ待ちます。
2.1 初期化
初期化では、ECharts の js ファイルを導入し、新しいキャンバス コンテナを作成します。具体的なコードは次のとおりです。
<!-- 引入ECharts插件 --> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <!-- 定义画布容器 --> <div id="sankey-rose" style="width: 800px;height: 600px;"></div>
2.2 データの設定
データの設定には、ノードとエッジの定義が含まれます。ノードはデータ内の特定の属性を指します。たとえば、販売データのサンキー ローズ図では、ノードは製品タイプまたは販売地域になります。エッジは、データの論理関係を表す、異なるノード間の接続とフローの方向を指します。具体的なコードは次のとおりです。
// 设置节点
var data = {
nodes: [
{name: 'A'},
{name: 'B'},
{name: 'C'},
{name: 'D'},
{name: 'E'}
],
// 设置边
links: [
{
source: 'A',
target: 'B',
value: 10
},
{
source: 'B',
target: 'C',
value: 20
},
{
source: 'C',
target: 'D',
value: 30
},
{
source: 'D',
target: 'E',
value: 40
}
]
}; このうち、nodes にはすべてのノードが含まれており、各ノードはオブジェクトであり、name はノードの名前 (文字列) を表します。タイプ）。 links にはすべてのエッジが含まれており、各エッジはオブジェクトです。source はソース ノードの名前を表し、target はターゲット ノードの名前を表します。 value はデータ(数値型)の値を表します。
series を構成することでスタイルを実現できます。具体的なコードは次のとおりです。
// 设置样式
var option = {
series: [{
type: 'sankey',
data: data.nodes,
links: data.links,
layoutIterations: 32,
lineStyle: {
color: 'source',
curveness: 0.5
},
label: {
color: '#000',
formatter: '{b}'
}
}]
};type はチャートの種類を表し、data と links はそれぞれ以前に定義したグラフの種類に対応します。 ノードとリンク。 layoutIterations は、レイアウトの反復回数を表します。値が大きいほど、レイアウトの密度が高くなります。通常は 32 に設定されます。 lineStyle はエッジのスタイルを表し、color はエッジの色を表します。ここでは、ソース ノードの色を使用するように設定されています。curveness は、エッジの円弧。曲線を表すために 0.5 に設定します。 labelはノードラベルのスタイルを表し、formatterはノードラベルの表示内容を表し、ここではノードの名前を使用するように設定されています。
toolbox を構成することでインタラクティブな効果を実現できます。具体的なコードは次のとおりです。
// 设置交互效果
option.toolbox = {
feature: {
dataZoom: {},
restore: {},
saveAsImage: {}
}
};feature は複数の対話型ツールを含むオブジェクトです。 dataZoom はズーム ツールを表し、restore は復元ツールを表し、saveAsImage は保存ツールを表します。これらのツールは、ユーザーがデータを切り替え、クエリし、エクスポートするのに役立ちます。
- 完全なコード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>桑基玫瑰图示例</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<div id="sankey-rose" style="width: 800px;height: 600px;"></div>
<script>
// 初始化
var myChart = echarts.init(document.getElementById('sankey-rose'));
// 设置数据
var data = {
nodes: [
{name: '华东地区'},
{name: '华南地区'},
{name: '华北地区'},
{name: '东北地区'},
{name: '中西部地区'},
{name: '电子产品'},
{name: '家用电器'},
{name: '食品饮料'},
{name: '化妆品'},
{name: '家居生活'}
],
links: [
{
source: '华东地区',
target: '电子产品',
value: 300
},
{
source: '华东地区',
target: '家用电器',
value: 200
},
{
source: '华东地区',
target: '食品饮料',
value: 100
},
{
source: '华南地区',
target: '化妆品',
value: 400
},
{
source: '华南地区',
target: '家居生活',
value: 500
},
{
source: '华北地区',
target: '电子产品',
value: 200
},
{
source: '华北地区',
target: '家用电器',
value: 150
},
{
source: '东北地区',
target: '家用电器',
value: 100
},
{
source: '东北地区',
target: '化妆品',
value: 50
},
{
source: '中西部地区',
target: '电子产品',
value: 120
},
{
source: '中西部地区',
target: '食品饮料',
value: 80
},
{
source: '中西部地区',
target: '家居生活',
value: 200
}
]
};
// 设置样式
var option = {
series: [{
type: 'sankey',
data: data.nodes,
links: data.links,
layoutIterations: 32,
lineStyle: {
color: 'source',
curveness: 0.5
},
label: {
color: '#000',
formatter: '{b}'
}
}]
};
// 设置交互效果
option.toolbox = {
feature: {
dataZoom: {},
restore: {},
saveAsImage: {}
}
};
// 渲染图表
myChart.setOption(option);
</script>
</body>
</html>- 結論
以上がSankey Rose Chart を使用して ECharts でデータ フローと比率の変化を表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7530
15
1379
52
82
11
21
76
ECharts と Java インターフェイス: 折れ線グラフ、棒グラフ、円グラフなどの統計グラフを迅速に実装する方法。
Dec 17, 2023 pm 10:37 PM
ECharts と Java インターフェイス: 折れ線グラフ、棒グラフ、円グラフなどの統計グラフを迅速に実装する方法。特定のコード例が必要です。インターネット時代の到来により、データ分析の重要性がますます高まっています。統計グラフは非常に直感的で強力な表示方法であり、データをより明確に表示できるため、データの意味やパターンをより深く理解できるようになります。 Java 開発では、ECharts と Java インターフェイスを使用して、さまざまな統計グラフをすばやく表示できます。 ECharts は Baidu によって開発されたソフトウェアです
PHPインターフェイスとEChartsを使用して視覚的な統計グラフを生成する方法
Dec 18, 2023 am 11:39 AM
データの視覚化がますます重要になっている今日の状況において、多くの開発者は、さまざまなツールを使用してさまざまなチャートやレポートを迅速に生成し、データをより適切に表示し、意思決定者が迅速な判断を下せるようにしたいと考えています。この文脈では、Php インターフェイスと ECharts ライブラリを使用すると、多くの開発者が視覚的な統計グラフを迅速に生成するのに役立ちます。この記事では、Php インターフェイスと ECharts ライブラリを使用して視覚的な統計グラフを生成する方法を詳しく紹介します。具体的な実装ではMySQLを使用します。
ECharts と Python インターフェイスを使用してダッシュボードを描画する手順
Dec 18, 2023 am 08:40 AM
ECharts と Python インターフェイスを使用してダッシュボードを描画する手順には、特定のコード サンプルが必要です 概要: ECharts は、Python インターフェイスを通じてデータ処理とグラフィック描画を簡単に実行できる優れたデータ視覚化ツールです。この記事では、ECharts と Python インターフェイスを使用してダッシュボードを描画する具体的な手順とサンプル コードを紹介します。キーワード: ECharts、Python インターフェイス、ダッシュボード、データ視覚化 はじめに ダッシュボードは、データ視覚化の一般的に使用される形式であり、
マップ ヒート マップを使用して ECharts で都市の熱を表示する方法
Dec 18, 2023 pm 04:00 PM
マップ ヒート マップを使用して ECharts で都市熱を表示する方法 ECharts は、マップ ヒート マップなど、開発者が使用できるさまざまなチャート タイプを提供する強力なビジュアル チャート ライブラリです。マップ ヒート マップを使用すると、都市や地域の人気を示すことができ、さまざまな場所の人気や密度を迅速に把握するのに役立ちます。この記事では、ECharts でマップ ヒート マップを使用して都市の熱を表示する方法を紹介し、参考となるコード例を示します。まず、地理情報を含むマップ ファイル、EC が必要です。
カレンダー チャートを使用して ECharts に時間データを表示する方法
Dec 18, 2023 am 08:52 AM
カレンダー チャートを使用して ECharts で時間データを表示する方法 ECharts (Baidu のオープン ソース JavaScript チャート ライブラリ) は、強力で使いやすいデータ視覚化ツールです。折れ線グラフ、棒グラフ、円グラフなど、さまざまな種類のグラフが提供されています。カレンダー チャートは、ECharts の非常に特徴的で実用的なチャート タイプであり、時間関連のデータを表示するために使用できます。この記事では、ECharts でカレンダー チャートを使用する方法を紹介し、具体的なコード例を示します。まず、使用する必要があります
ECharts と golang テクニカル ガイド: さまざまな統計グラフを作成するための実践的なヒント
Dec 17, 2023 pm 09:56 PM
ECharts および golang テクニカル ガイド: さまざまな統計チャートを作成するための実践的なヒント、具体的なコード例が必要です はじめに: 最新のデータ視覚化の分野では、統計チャートはデータ分析と視覚化のための重要なツールです。 ECharts は強力なデータ視覚化ライブラリですが、golang は高速で信頼性が高く、効率的なプログラミング言語です。この記事では、ECharts と golang を使用してさまざまな種類の統計グラフを作成する方法を紹介し、このスキルを習得するのに役立つコード例を示します。準備
ECharts と PHP インターフェイスを使用して統計グラフを生成する方法
Dec 18, 2023 pm 01:47 PM
ECharts と PHP インターフェイスを使用して統計グラフを生成する方法 はじめに: 最新の Web アプリケーション開発において、データの視覚化は非常に重要なリンクであり、データを直観的に表示および分析するのに役立ちます。 ECharts は、強力なオープンソースの JavaScript チャート ライブラリであり、さまざまなチャート タイプと豊富なインタラクティブ機能を提供し、さまざまな統計チャートを簡単に生成できます。この記事では、ECharts と PHP インターフェイスを使用して統計グラフを生成する方法と、具体的なコード例を紹介します。 1. EChaの概要
ECharts は jQuery に依存しますか?徹底した分析
Feb 27, 2024 am 08:39 AM
ECharts は jQuery に依存する必要がありますか?詳細な解釈には、特定のコード例が必要です。ECharts は、豊富なチャート タイプと対話型関数を提供する優れたデータ視覚化ライブラリであり、Web 開発で広く使用されています。 ECharts を使用するとき、多くの人は「ECharts は jQuery に依存する必要があるのか?」という疑問を持つでしょう。この記事ではこれについて詳しく説明し、具体的なコード例を示します。まず、明確にしておきたいのですが、ECharts 自体は jQuery に依存しません。
