EChartsマウスイベント処理方法の詳細な説明

イベントとは、クリック、マウスオーバー、ページの読み込み後にトリガーされる読み込みイベントなど、ユーザーまたはブラウザ自体によって実行されるアクションです。
ユーザーの操作と動作パスを記録するには、マウスイベント処理とコンポーネントインタラクション動作イベントの処理を完了する必要があります。

イベントに応答する関数はイベントハンドラーと呼ばれ、イベント処理関数またはイベントハンドルとも呼ばれます。マウスイベントは、マウスがチャート上のグラフィックをクリックしたとき (click、dblclick、contextmenu など)、またはチャート上のグラフィックの上にマウスを置いたとき (mouseover、mouseout、mousemove など) にトリガーされるイベントです。

ECharts では、ユーザーのあらゆる操作によって対応するイベントがトリガーされる可能性があります。 ECharts では、click、dblclick、mousedown、mousemove、mouseup、mouseover、mouseout、globalout、contextmenu を含む 9 つの一般的なマウスイベントがサポートされています。

その中で、クリックイベントが最もよく使用されます。一般的なマウスイベントとその説明を表に示します。

クリックイベントは、チャート要素で mousedown イベントと mouseup イベントが連続してトリガーされた場合にのみトリガーされます。 dblclick イベントは、2 つのクリックイベントが連続してトリガーされた場合にのみトリガーされます。 mousedown または mouseup のいずれかがキャンセルされた場合、クリックイベントはトリガーされません。クリックイベントが直接的または間接的にキャンセルされた場合、dblclick イベントはトリガーされません。

ある大学の2020年度の専門職入学状況を棒グラフにすると、図のようになります。

棒グラフの「人工知能」列をクリックしてマウスクリックイベントを追加すると、上図に示すようにプロンプトダイアログボックスがポップアップ表示されます。

プロンプトダイアログボックスで[OK]ボタンをクリックすると、下の図に示すように、対応するBaidu検索ページが自動的に開きます。

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

<html>

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

<本文>
	<div id="main" style="幅: 800px; 高さ: 600px"></div>
	<script type="text/javascript">
		var myChart = echarts.init(document.getElementById("main")); //準備したDOMに基づいてEChartsチャートを初期化します。var option = { //チャートの色の設定項目とデータを指定します: ['LimeGreen', 'DarkGreen', 'red', 'blue', 'Purple'],
			backgroundColor: 'rgba(128, 128, 128, 0.1)', //rgba は透明度を 0.1 に設定します
			title: { text: 「2020年度某大学入学状況まとめ」, 左: 70, 上: 9 },
			ツールチップ: { ツールチップ: { 表示: true }, },
			凡例: { データ: ['2019 年度入学者数'], 左: 422, 上: 8 },
			xAxis: { //x軸座標系を設定します。データ: ["ビッグデータ"、"クラウドコンピューティング"、"ERP"、"人工知能"、"ソフトウェア開発"、"モバイル開発"、"ネットワークテクノロジー"]
			},
			yAxis: {}, //y軸の座標系を設定します series: [{ //データシリーズ名を設定します: '登録学生数:',
				type: 'bar'、barWidth: 55、//棒グラフデータの各列の幅を設定します: [350、200、66、210、466、200、135]
			}]
		};
		myChart.setOption(option); // 指定した設定項目とデータを使用してチャートを表示します // コールバック関数はマウスクリックイベントを処理し、対応する Baidu 検索ページにジャンプします myChart.on('click', function (params) {
			var yt = alert("マウスクリックイベント、クリックした項目: " + params.name);

			ウィンドウを開きます('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
		});
		window.addEventListener("サイズ変更", 関数() {
			myChart.resize(); // チャートをウィンドウのサイズに合わせて調整します });
		myChart.setOption(option); //echarts オブジェクトのデータをロードします </script>
</本文>

</html>

ECharts では、すべてのマウスイベントにパラメーター params が含まれます。 params はクリックされたグラフィックのデータ情報を含むオブジェクトです。params の基本的なプロパティと意味を表に示します。

コールバック関数自体はメイン関数のパラメータです。コールバック関数は別のメイン関数にパラメータとして渡されます。メイン関数が実行されると、コールバック関数が実行されます。このプロセスはコールバックと呼ばれます。コールバック関数では、オブジェクト内のデータ名とシリーズ名を取得し、データ内のその他の情報をインデックス化し、チャートを更新したり、フローティングレイヤーを表示したりします。

製品の売上と出力利益のデータを使用して、図に示すように棒グラフを描きます。

左の写真の 2 番目の製品「ウールセーター」の「生産」列をクリックすると、右の写真に示すようにプロンプトダイアログボックスがポップアップ表示されます。

右の画像からは、左の画像の 2 番目の製品「ウールセーター」の「生産」列の params パラメータの属性情報を取得できます。

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

<html>

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

<本文>
	<div id="main" style="幅: 800px; 高さ: 600px"></div>
	<script type="text/javascript">
		//準備された DOM に基づいて、ECharts チャートを初期化します。var myChart = echarts.init(document.getElementById("main"));
		var option = { //チャートの色の設定項目とデータを指定します: ['LimeGreen', 'DarkGreen', 'red', 'blue', 'Purple'],
			backgroundColor: 'rgba(128, 128, 128, 0.1)', //rgba は透明度を 0.1 に設定します
			タイトル: { テキスト: '製品の売上、生産、利益統計'、左: 70、上: 9 }、
			xAxis: { //x軸座標系を設定します。データ: ["シャツ", "セーター", "シフォンシャツ", "パンツ", "ハイヒール", "ソックス"]
			},
			yAxis: {}, //y軸座標系を設定します tooltip: { //プロンプトボックスコンポーネントを設定します trigger: 'item', show: true,
				フォーマッタ: "{a} <br/>{b} : {c}"
			},
			伝説： {}、
			series: [ //データシリーズを構成する { //データシリーズ1を設定する: 売上 name: 'sales', type: 'bar',
					データ: [5, 28, 16, 20, 15, 33]
				},
				{ //データ系列2を設定: 出力名: 'output'、タイプ: 'bar'、
					データ: [15, 38, 20, 24, 20, 45]
				},
				{ //データ系列3を設定: 利益 名前: 'Profit'、タイプ: 'bar'、
					データ: [25, 15, 10, 10, 15, 22]
				}
			]
		};
		myChart.setOption(option); // 指定した設定項目とデータを使用してチャートを表示します。window.addEventListener("resize", function () {
			myChart.resize(); // チャートをウィンドウのサイズに合わせて調整します });
		//コールバック関数はマウスクリックイベントを処理し、データ情報コンテンツを表示します。myChart.on('click', function (params) {
			alert("No. " + (params.dataIndex + 1) + "製品: " + params.name + "の " +
				params.seriesName + "is:" + params.value +
				"\n\n 1--コンポーネントタイプ:" + params.componentType +
				"\n 2--シリーズタイプ:" + params.seriesType +
				"\n 3--シリーズインデックス:" + params.seriesIndex +
				"\n 4--シリーズ名:" + params.シリーズ名 +
				"\n 5--名前:" + params.name +
				"\n 6--データインデックス:" + params.dataIndex +
				"\n 7--データ:" + params.datax +
				"\n 8--データ型:" + params.dataType +
				"\n 9--値:" + params.value +
				"\n 10--色:" + params.color);
		});
		myChart.setOption(option); //echarts オブジェクトのデータをロードします </script>
</本文>

</html>

マウスクリックイベントのパラメータ params を含む棒グラフコードでは、コールバック関数を呼び出すことで、マウスイベントのパラメータ params 内の基本プロパティ (params.dataIndex、params.name、params.seriesName、params.value など) にアクセスし、下から 12 行目と 13 行目に「2 番目の製品: ウールセーターの生産量は 38 です」と表示できます。

コードの 11 行目から最後から 2 行目は、マウスイベントパラメータ params の 10 個の基本プロパティに順番にアクセスし、図 5-13 のプロンプトダイアログボックスの各行に順番に表示します。

params.data と params.dataType の値は未定義であることに注意してください。

要約する

ECharts マウスイベント処理に関するこの記事はこれで終わりです。より関連性の高い ECharts マウスイベントコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

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