ホームページ > 記事 > ウェブフロントエンド > Sankey Rose Chart を使用して ECharts でデータ フローと比率の変化を表示する方法
Sankey Rose Chart を使用して ECharts でデータ フローと比率の変化を表示する方法
- WBOYオリジナル
- 2023-12-18 13:47:45583ブラウズ
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 サイトの他の関連記事を参照してください。