EChartsマルチチャート連携機能の実装プロセス

表示するデータが多い場合、1 つのチャートに表示しても効果はよくありません。このとき、2 つのチャートをリンクして表示することを検討できます。

ECharts は複数のチャートを接続する機能を提供します。接続された複数のチャートはコンポーネントイベントを共有し、画像を保存するときに自動結合を実現できます。マルチチャートリンクは長方形システムでのツールチップリンクをサポートします

EChart でマルチチャート連携を実現するには、次の 2 つの方法を使用できます。

（１）各EChartsオブジェクトを同じグループ値に設定し、EChartsオブジェクトのconnectメソッドを呼び出すときにグループ値を渡すことで、複数のEChartsオブジェクトを使用してリンク関係を確立します。形式は次のとおりです。

myChart1.group = 'group1'; //最初のEChartsオブジェクトのグループ値を設定します
myChart2.group = 'group1'; // 2番目のEChartsオブジェクトに同じグループ値を設定します
echarts.connect('group1'); //EChartsオブジェクトのconnectメソッドを呼び出すときに、グループ値を渡します

（２）EChartsのconnectメソッドを直接呼び出します。パラメータはリンクする必要がある複数のEChartsオブジェクトで構成される配列です。形式は次のとおりです。

echarts.connect([myChart1,myChart2]);

既存のマルチチャートのリンクを解除する場合は、次の形式で disConnect メソッドを呼び出すことができます。

echarts.disConnect('group1');

2019年と2020年のとある大学の専門職入学状況を用いて、図のような棒グラフの連動図を描きます。

図からわかるように、上部と下部に 2 つの棒グラフがあり、それぞれ 2019 年と 2020 年の 2 年間の入学概要を表しています。複数のチャートがリンクされているため、2019 年または 2020 年の人工知能専攻の列にマウスを移動すると、2019 年と 2020 年の人工知能専攻の対応する詳細プロンプトボックス (ツールヒント) が自動的にポップアップ表示されます。

<html>

<ヘッド>
	<メタ文字セット="utf-8">
	<script type="text/javascript" src='js/echarts.js'></script>
</head>

<本文>
	<div id="main1" スタイル="幅: 600px; 高さ: 400px"></div>
	<div id="main2" スタイル="幅: 600px; 高さ: 400px"></div>
	<script type="text/javascript">
		//準備された DOM に基づいて、ECharts チャートを初期化します。var myChart1 = echarts.init(document.getElementById("main1"));
		var option1 = { //最初のチャートの色の設定項目とデータを指定します: ['LimeGreen', 'DarkGreen', 'red', 'blue', 'Purple'],
			backgroundColor: 'rgba(128, 128, 128, 0.1)', //rgba は透明度を 0.1 に設定します
			title: { text: '2019年度某大学専門職入学者数概要', 左: 40, 上: 5 },
			ツールチップ: { ツールチップ: { 表示: true }, },
			凡例: { データ: ['2019 年度入学者数'], 左: 422, 上: 8 },
			x軸: [{
				データ: ["ビッグデータ", "クラウドコンピューティング", "Oracle", "ERP", "人工知能",
					「ソフトウェア開発」、「モバイル開発」、「ネットワーク技術」]、axisLabel:{interval: 0}
			}],
			y軸: [{ type: 'value', }],
			series: [{ //最初のグラフのデータシリーズを設定します name: '2019 Enrollment',
				type: 'bar'、barWidth: 40、//棒グラフデータの各列の幅を設定します: [125、62、45、56、123、205、108、128]、
			}]
		};
		//準備された DOM に基づいて、ECharts チャートを初期化します。var myChart2 = echarts.init(document.getElementById("main2"));
		var option2 = { //2番目のチャートの色の設定項目とデータを指定します: ['blue', 'LimeGreen', 'DarkGreen', 'red', 'Purple'],
			backgroundColor: 'rgba(128, 128, 128, 0.1)', //rgba は透明度を 0.1 に設定します
			title: { text: 「2020年度某大学入学状況まとめ」, 左: 40, 上: 8 },
			ツールチップ: { 表示: true },
			凡例: { データ: ['2020 年度入学者数'], 左: 422, 上: 8 },
			x軸: [{
				データ: ["ビッグデータ", "クラウドコンピューティング", "Oracle", "ERP", "人工知能",
					「ソフトウェア開発」、「モバイル開発」、「ネットワーク技術」]、axisLabel:{interval: 0}
			}],
			y軸: [{ type: 'value', }],
			series: [{ //2番目のグラフのデータシリーズを設定します name: '2020 Enrollment',
				type: 'bar'、barWidth: 40、//棒グラフデータ内の各列の幅を設定します: [325、98、53、48、222、256、123、111]、
			}]
		};
		myChart1.setOption(option1); //myChart1 オブジェクトのデータをロードします。 myChart2.setOption(option2); //myChart2 オブジェクトのデータをロードします。 //マルチチャートのリンク設定方法 1: 各 echarts オブジェクトのグループ値を個別に設定します。 myChart1.group = 'group1';
		myChart2.group = 'グループ1';
		echarts.connect('グループ1');
	//マルチチャートリンク設定方法2: リンクする必要があるechartsオブジェクトmyChart1とmyChart2を直接渡す
	//echarts.connect([myChart1,myChart2]);
	</スクリプト>
</本文>

</html>

ある大学の2016年から2020年までの各専攻の入学状況を用いて、図のように円グラフと棒グラフの連動図を描きます。

図からわかるように、上は円グラフ、下は棒グラフです (棒グラフはツールボックスを使用して折れ線グラフに変換することもできます)。マウスを円グラフのセクター上に移動すると、円グラフに詳細ツールチップが表示され、セクターの対応する年度に在籍する学生数と、各年度に在籍する学生総数に対する割合が表示されます。同時に、棒グラフ (または折れ線グラフ) に詳細ツールチップが表示され、対応する年度に各専攻に在籍する学生数に関する詳細データが表示されます。

ソースコードは次のとおりです。

<html>

<ヘッド>
	<メタ文字セット="utf-8">
	<script type="text/javascript" src='js/echarts.js'></script>
</head>

<本文>
	<div id="main1" スタイル="幅: 600px; 高さ: 400px"></div>
	<div id="main2" スタイル="幅: 600px; 高さ: 400px"></div>
	<script type="text/javascript">
		//準備された DOM に基づいて、ECharts チャートを初期化します。var myChart1 = echarts.init(document.getElementById("main1"));
		var option1 = { //最初のチャートの設定項目とデータを指定します。option1 color: ['red', 'Lime', 'blue', 'DarkGreen', 'DarkOrchid', 'Navy'],
			backgroundColor: 'rgba(128, 128, 128, 0.1)', //背景色を設定します。rgba は透明度を 0.1 に設定します
			title: { text: 'ある大学の各専攻の入学状況の経年的分析', x: 'center', y: 12 },
			ツールチップ: { トリガー: "item", フォーマッタ: "{a><br/>{b}:{c}({d}%)" },
			伝説： {
				方向: '垂直'、x: 15、y: 15、
				データ: ['2016', '2017', '2018', '2019', '2020']
			},
			series: [{ //最初のグラフのデータ系列を設定します name: 'Total number of people:', type: 'pie',
				半径: '70%'、中心: ['50%'、190]、
				データ： [
					{ 値: 1695、名前: '2016' }、{ 値: 1790、名前: '2017' }、
					{ 値: 2250、名前: '2018' }、{ 値: 2550、名前: '2019' }、
					{ 値: 2570、名前: '2020' }]
			}]
		};
		myChart1.setOption(option1); // 指定された構成項目とデータを使用して円グラフを表示します // 準備された DOM に基づいて ECharts グラフを初期化します var myChart2 = echarts.init(document.getElementById("main2"));
		var option2 = { //2番目のチャートの色の設定項目とデータを指定します: ['red', 'Lime', 'blue', 'DarkGreen', 'DarkOrchid', 'Navy'],
			backgroundColor: 'rgba(128, 128, 128, 0.1)', //背景色を設定します。rgba は透明度を 0.1 に設定します
			tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, //プロンプトボックスコンポーネントを設定します legend: { //凡例コンポーネントを設定します left: 42, top: 25,
				データ: ['ビッグデータ'、'Oracle'、'クラウドコンピューティング'、'人工知能'、'ソフトウェアエンジニアリング']
			},
			toolbox: { //2番目のチャートのツールボックスコンポーネントを設定します。show: true、orient: 'vertical'、left: 550、top: 'center'、
				特徴：
					マーク: { 表示: true }、復元: { 表示: true }、saveAsImage: { 表示: true }、
					magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] }
				}
			},
			x軸: [{
				タイプ: 'カテゴリ',
				データ: ['2016', '2017', '2018', '2019', '2020']
			}], //2 番目のグラフの x 軸座標系を設定します yAxis: [{ type: 'value', splitArea: { show: true } }], //2 番目のグラフ シリーズの y 軸座標系を設定します: [ //2 番目のグラフのデータ シリーズを設定します {
					名前: 'ビッグデータ'、タイプ: 'バー'、スタック: '合計金額'、
					データ: [301, 334, 390, 330, 320], バー幅: 45,
				},
				{ 名前: 'Oracle'、タイプ: 'bar'、スタック: 'Total'、データ: [101, 134, 90, 230, 210] },
				{ 名前: 'クラウドコンピューティング'、タイプ: 'バー'、スタック: '合計金額'、データ: [191, 234, 290, 330, 310] },
				{ 名前: '人工知能'、タイプ: 'バー'、スタック: '合計'、データ: [201, 154, 190, 330, 410] },
				{ 名前: 'ソフトウェア エンジニアリング'、タイプ: 'バー'、スタック: '合計'、データ: [901、934、1290、1330、1320] }
			]
		};
		myChart2.setOption(option2); // 指定した設定項目とデータを使用して積み上げ棒グラフを表示します // マルチチャート連携設定方法 1: 各 echarts オブジェクトのグループ値を個別に設定します myChart1.group = 'group1';
		myChart2.group = 'グループ1';
		echarts.connect('グループ1');
 	    //マルチチャートリンク設定方法2: リンクする必要があるechartsオブジェクトmyChart1とmyChart2を直接渡す
	    //echarts.connect([myChart1,myChart2]);
	</スクリプト>
</本文>

</html>

要約する

ECharts マルチチャート連携の実装に関するこの記事はこれで終わりです。ECharts マルチチャート連携の関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: