表示するデータが多い場合、1 つのチャートに表示しても効果はよくありません。このとき、2 つのチャートをリンクして表示することを検討できます。 ECharts は複数のチャートを接続する機能を提供します。接続された複数のチャートはコンポーネント イベントを共有し、画像を保存するときに自動結合を実現できます。マルチチャートリンクは長方形システムでのツールチップリンクをサポートします EChart でマルチチャート連携を実現するには、次の 2 つの方法を使用できます。 (1)各EChartsオブジェクトを同じグループ値に設定し、EChartsオブジェクトのconnectメソッドを呼び出すときにグループ値を渡すことで、複数のEChartsオブジェクトを使用してリンク関係を確立します。形式は次のとおりです。
(2)EChartsのconnectメソッドを直接呼び出します。パラメータはリンクする必要がある複数のEChartsオブジェクトで構成される配列です。形式は次のとおりです。
既存のマルチチャートのリンクを解除する場合は、次の形式で disConnect メソッドを呼び出すことができます。
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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
1. ソフトウェアをダウンロードする1. MySQL の公式サイトにアクセスし、Oracle アカウ...
1. パフォーマンス スキーマ: はじめにMySQL 5.7 では、多数の新しい監視項目の導入、ス...
準備する1. 必要なインストールパッケージをダウンロードするhttps://www.php.net/...
序文この記事は主にMySQLコマンド階層検索ヘルプの使用に関する内容を紹介します。この記事のサンプル...
1. redis で使用すると Netty の起動競合が発生するため、***Application ...
シナリオssh 経由で Ubuntu サーバーに接続するには、xshell ツールを使用する必要があ...
Vue でタブ切り替えを実装する 3 つの方法1. v-showはコンテンツの切り替えを制御します1...
(I) mysql5.7のインストール: ❀詳細:無料のグリーンバージョン5.7のインストール方法は...
Rownum は、Oracle での独自の書き込み方法です。Oracle では、rownum を使用...
Mac を返却して以来、元のラップトップは使用されていません。このラップトップの構成は非常に良好で...
この記事は、参考のためにMySQL 8.0.17のインストールと設定のグラフィックチュートリアルを記...
1. 参照整合性参照整合性とは、主に外部キー制約を使用した複数のテーブル間の設計を指します。複数テ...
データベースの移行は、よく遭遇する問題です。データ量が少ない場合、移行は基本的に問題になりません。実...
1. 絶対パスまず、ローカル コンピューターでは、ファイルの絶対パスは、当然、ハード ディスク上でフ...
time(); 関数関数プロトタイプ: time_t time(time_t *timer)関数の目...