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

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

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

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

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

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

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

(2)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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • echartsは、マップタイミングの切り替え散布点とマルチチャートカスケードリンクを実装します。詳細な説明

<<:  MySQLパスワードを忘れた場合のいくつかの解決策

>>:  Linux touch コマンドの使用例

推薦する

MySql 5.7.17 winx64 のインストールと設定に関する詳細なチュートリアル

1. ソフトウェアをダウンロードする1. MySQL の公式サイトにアクセスし、Oracle アカウ...

MySQL 5.7 のパフォーマンスと sys スキーマの監視パラメータの説明 (推奨)

1. パフォーマンス スキーマ: はじめにMySQL 5.7 では、多数の新しい監視項目の導入、ス...

Centos に PHP7.4 と Nginx をインストールする方法

準備する1. 必要なインストールパッケージをダウンロードするhttps://www.php.net/...

MySQL でコマンドを使用して階層検索を実現する方法の詳細な説明

序文この記事は主にMySQLコマンド階層検索ヘルプの使用に関する内容を紹介します。この記事のサンプル...

Elasticsearch を使用する際の一般的な問題の解決策

1. redis で使用すると Netty の起動競合が発生するため、***Application ...

Ubuntuはポート22を開きます

シナリオssh 経由で Ubuntu サーバーに接続するには、xshell ツールを使用する必要があ...

Vueはタブを切り替えてデータの状態を維持する3つの方法を実装します

Vue でタブ切り替えを実装する 3 つの方法1. v-showはコンテンツの切り替えを制御します1...

mysql5.7のインストールとNavicateの長期無料利用の実施手順

(I) mysql5.7のインストール: ❀詳細:無料のグリーンバージョン5.7のインストール方法は...

Oracle Rownum 書き込みに似た MySQL の詳細な例

Rownum は、Oracle での独自の書き込み方法です。Oracle では、rownum を使用...

VMWare を使用して Windows 上で Linux 環境を構築する手順 (画像とテキスト)

Mac を返却して以来、元のラップトップは使用されていません。このラップトップの構成は非常に良好で...

MySQL 8.0.17 のインストールと設定のグラフィックチュートリアル

この記事は、参考のためにMySQL 8.0.17のインストールと設定のグラフィックチュートリアルを記...

SQL における参照整合性の詳細な説明 (1 対 1、1 対多、多対多)

1. 参照整合性参照整合性とは、主に外部キー制約を使用した複数のテーブル間の設計を指します。複数テ...

MySQLデータベース移行により、大量のデータを迅速にエクスポートおよびインポートできます

データベースの移行は、よく遭遇する問題です。データ量が少ない場合、移行は基本的に問題になりません。実...

ウェブページ作成における絶対パスと相対パスの違い

1. 絶対パスまず、ローカル コンピューターでは、ファイルの絶対パスは、当然、ハード ディスク上でフ...

Linux で time(NULL) 関数と localtime() を使用して現在の時刻を取得する方法

time(); 関数関数プロトタイプ: time_t time(time_t *timer)関数の目...