--- title: 【Sisense Plugin】Tabberによるチャート切り替え description: 今回はTabberというプラグインをインストールして作業をしていきます。オフィシャルにサポートされているプラグインなので安心ですね。このプラグインでできることは複数のチャートをボタン1つで表示・非表示で切り替えられます。よりインタラクティブなダッシュボードの実現が可能となります。 image: https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/9ae1aa84f32eddb059a37876bc5c4bf6-2.png --- ![INSIGHT LAB_文字のみ_WHT-1](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/INSIGHT%20LAB_%E6%96%87%E5%AD%97%E3%81%AE%E3%81%BF_WHT-1.png?width=400&height=110&name=INSIGHT%20LAB_%E6%96%87%E5%AD%97%E3%81%AE%E3%81%BF_WHT-1.png) ![INSIGHT LAB_文字のみ](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/INSIGHT%20LAB_%E6%96%87%E5%AD%97%E3%81%AE%E3%81%BF.png?width=400&height=110&name=INSIGHT%20LAB_%E6%96%87%E5%AD%97%E3%81%AE%E3%81%BF.png) [![お問い合わせ](https://hubspot-no-cache-na2-prod.s3.amazonaws.com/cta/default/5935783/a4a0266e-14ad-4388-b83f-681a6f35b8a7.png)](https://hubspot-cta-redirect-na2-prod.s3.amazonaws.com/cta/redirect/5935783/a4a0266e-14ad-4388-b83f-681a6f35b8a7) - [Sisenseとは](https://service.insight-lab.co.jp/sisense) - [Sisenseナレッジ](https://knowledge.insight-lab.co.jp/sisense) - [セミナー](https://event.insight-lab.co.jp/sisense-seminar) - [トレーニング](https://service.insight-lab.co.jp/data-analytics-dojo/training_course) - [お役立ち資料](https://download.insight-lab.co.jp/sisense/download) ###### 3 分で読むことができます。 # [【Sisense Plugin】Tabberによるチャート切り替え](https://knowledge.insight-lab.co.jp/sisense/plug-in/tabber-switch-charts) 執筆者 [Turtle](https://knowledge.insight-lab.co.jp/sisense/author/turtle) 更新日時 2020年10月16日 ###### Topics: [Plugin](https://knowledge.insight-lab.co.jp/sisense/tag/plugin) ![【プラグイン】Tabberによるチャート切り替え](https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/9ae1aa84f32eddb059a37876bc5c4bf6-2.png) 目次 こんにちは！Michaelです。 さて、今日はプラグインTabberを使って複数のチャートの表示切り替えをします。 その前に同じタブ繫がりということでGoogle Chromeのタブ切り替えの話に関わる話 （全然関係ないやーん） Sisenseの利点の1つとしてはウェブベースということでタブをいくつも開けて作業が出来ることが挙げられます。 ダッシュボード作成時にelastiCubeも同時に別タブで開けて、モデリングの確認やプレビューでテーブルの中身を見たいときもあり、 画面分割で作業を並行し、ダッシュボード画面をリフレッシュ、結果を反映させるといったことで時短・作業効率アップにつながるかなと思います。 Chrome上で以下のショートカットを使って私自身、作業をすることが多いです。 - Ctrl + T タブ切り替え/タブ - Ctrl + Tab / Chrl + Shift + Tab　タブ切り替え - Ctrl + W タブを閉める - Alt + D -> Shift + Return 同じURLを別タブで開く - Ctrl押しながらクリック　違うタブで開ける - Alt + D　ULR選択/検索窓へジャンプ その他、エクセルファイルやパワーポイント、SQLクライエントツールなど他のアプリを見ながら作業する際に、 ウィンドウズ関連で多用するシュートカットのはこの辺でしょうか。 - Alt + Tab　:アプリ切り替え - ウィンドウズ　＋十字キー　:モニター分割配置 あとはこのブログのための、ウィンドウズ＋Shift+Sの画面キャプチャも欠かせませんね！ しかしショートカットで多用するウィンドウズのctrlの場所が一番端にある意味がいまだにわかりません。Caps Locksにctrlも割り当てる人もいるぐらいですから。 話がだいぶそれました。ショートカットではなくて、SisenseのTabberの話でしたね。 それでは本題へ。 ## 1. インストール 今回はTabberというプラグインをインストールして作業をしていきます。[ダウンロードはこちら](https://s3.amazonaws.com/data.sisense.com/Marketplace/WidgetsTabber/WidgetsTabber.zip)から。[オフィシャルにサポート](https://www.sisense.com/ja/marketplace/tabber/)されているプラグインなので安心安心。 前回と同じようにダウンロードし他プラグインを、Sisenseサーバーの**C:\\Program Files\\Sisense\\app\\plugins\\**に置きます。 ウィンドウズサーバーをリスタートします。 このプラグインでは複数のチャートをボタン1つで表示・非表示と切り替えることができます。 [前回のDimention Changer](https://knowledge.insight-lab.co.jp/sisense/plug-in/dimention-measure-changer)がメジャー、ディメンションの切り替え、 こちらのTabberがチャート自体の切り替え。２つを併用することによりインタラクティブなダッシュボードの実現が可能となります。 イメージとしては以下のような仕組みです。実際に存在するチャートは下の３つ。 [![チャートの切り替え例](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/Imported_Blog_Media/198c4b5401177bb4fe93864e148fe167-1024x375-2.png?width=1024&height=375&name=198c4b5401177bb4fe93864e148fe167-1024x375-2.png)](https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/198c4b5401177bb4fe93864e148fe167-2.png) Tabberのチャート名をクリックすると・・・ [![チャートの切り替え2](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/Imported_Blog_Media/f4aaafaaa3fbb632d8ccdc1a08ae1f53-1024x369-2.png?width=1024&height=369&name=f4aaafaaa3fbb632d8ccdc1a08ae1f53-1024x369-2.png)](https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/f4aaafaaa3fbb632d8ccdc1a08ae1f53-2.png) 黄色のチャートに切り替わりました！その他の青、赤は非表示になっています。 今度はチャート2を押すと・・・ [![](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/Imported_Blog_Media/20c1d1a3ee609c527f2699effc2fdefc-1024x370-2.png?width=1024&height=370&name=20c1d1a3ee609c527f2699effc2fdefc-1024x370-2.png)](https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/20c1d1a3ee609c527f2699effc2fdefc-2.png) 青のチャート2に切り替わりました！ これはTabberにより表示・非表示を制御しています。 ではここからは実際に切り替え機能を実装していきましょう！ ## 2. 使用方法 ※事前に切り替えをしたいチャートを作成しておく必要があります。 新しいウィジェットを作成して、左上のドロップダウンよりTabberを選択します。 [![Tabberドロップダウン](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/Imported_Blog_Media/9ae1aa84f32eddb059a37876bc5c4bf6-2.png?width=273&name=9ae1aa84f32eddb059a37876bc5c4bf6-2.png)](https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/9ae1aa84f32eddb059a37876bc5c4bf6-2.png) このプラグインではウィジェット編集画面の左ペインには何も表示されず、適用先のチャートなどの設定は全て「スクリプト編集」からします。 右上の点３つをクリックして、Javascriptの編集画面に入ります。 以下のコードを貼り付けます。解説していきましょう。 ``` widget.on('render',function(w, e){ e.prefixText = ''; e.suffixText = ''; e.selectedColor = '#86b817'; e.fontColor = '#cccccc'; e.elementWidth = '103%'; e.descColor = '#a5a5a5'; e.parentMarginLeft = '-15px'; e.height = 32; }); widget.tabs = [{title: "チャート1",displayWidgetIds : ["チャート1のウィジェットID"],hideWidgetIds : ["チャート2のウィジェットID", "チャート3のウィジェットID"]},{title: "チャート2",displayWidgetIds : ["チャート2のウィジェットID"],hideWidgetIds : ["チャート1のウィジェットID", "チャート3のウィジェットID"]},{title: "チャート3",displayWidgetIds : ["チャート3のウィジェットID"],hideWidgetIds : ["チャート1のウィジェットID", "チャート2のウィジェットID"]}]; ``` 上と下の２つで構成されます。上がTabberの表示上のフォントの色やウィジェットのサイズ変更。色の変更以外は基本的にこのままで構いません。   ### 上部 **e.prefixText = '';** Tabberの切り替えチャート名の前に入れる文字をここに設定。ここでは空欄 **e.suffixText = '';** Tabberの切り替えチャート名の前に入れる文字をここに設定。ここでは空欄 **e.selectedColor = '#86b817';** 選択されたチャート名の色の指定。カラーコードで。 **e.fontColor = '#cccccc';** 選択されていないチャート名の色の指定。 **e.elementWidth = '103%';** Tabberの幅の指定。ここではデフォルトの103％でOK. **e.descColor = '#a5a5a5';** ディスクリプションの色の指定。 **e.parentMarginLeft = '-15px';** 親要素の左マージンの設定。ここではデフォルトの-15pxでOK **e.height = 32;** Tabberウィジェットのデフォルトの高さ。   ### 下部 **title: “チャート名”;** 表示するチャート名をここに記述 **displayWidgetIDs:"〇〇〇";** 表示するウィジェットIDの指定（arrayなので複数指定可） ウィジェットには個々にユニークのIDが振られます。適用する側のウィジェット編集画面を開き、URLの最後にある長々とした英数字がウィジェットIDです。 **hideWidgetIds :"〇〇〇";** 非表示にするウィジェットIDの指定（arrayなので複数指定可）   ## 3.実装 今回では、３つのチャートをあらかじめに用意して、１つを表示、その他の２つを非表示にするといった切り替えを行いました。 このように複数のチャートの表示、非表示といったことも可能です。 最終的にできたコードがこちら。 ``` widget.on('render',function(w, e){ 　　e.prefixText = ''; e.suffixText = ''; e.selectedColor = '#86b817'; e.fontColor = '#cccccc'; e.elementWidth = '103%'; e.descColor = '#a5a5a5'; e.parentMarginLeft = '-15px'; e.height = 32; }); widget.tabs = [{title: "棒グラフ", displayWidgetIds : ["5ec7757ff297c502c012511f"], hideWidgetIds : ["5ec7786cf297c502c0125144", "5ec7790af297c502c0125150"] }, {title: "円グラフ", displayWidgetIds : ["5ec7786cf297c502c0125144"], hideWidgetIds : ["5ec7757ff297c502c012511f", "5ec7790af297c502c0125150"] }, {title: "散布図", displayWidgetIds : ["5ec7790af297c502c0125150"], hideWidgetIds : ["5ec7757ff297c502c012511f", "5ec7786cf297c502c0125144"] } ]; ``` できているか確認しましょう。   問題なく動きました！   ## 4.まとめ Tabberによるチャート切り替えを今日は紹介しました。これはかなり使えそうですね！ チャートを増やしすぎることにより可読性も下がるので、このようなプラグインを活用することによりダッシュボードのUX改善に繋がりそうです。 それではまた！ Viva, Sisense! Sisenseを体験してみませんか？ INSIGHT LABではSisense紹介セミナーを定期開催しています。Sisenseの製品紹介や他BI製品との比較だけでなく、デモンストレーションを通してSisenseのシンプルな操作性やプレゼンテーション機能を体感いただけます。 [![詳細はこちら](https://hubspot-no-cache-na2-prod.s3.amazonaws.com/cta/default/5935783/ff8d86bf-1184-4d92-8926-6a31a20de4b0.png)](https://hubspot-cta-redirect-na2-prod.s3.amazonaws.com/cta/redirect/5935783/ff8d86bf-1184-4d92-8926-6a31a20de4b0) - [Tweet](https://twitter.com/share) ![Turtle](https://knowledge.insight-lab.co.jp/hubfs/Sunflower.jpg) #### 執筆者 [Turtle](https://knowledge.insight-lab.co.jp/sisense/author/turtle) 可視化領域を中心とした業務に従事しています。 ###### [前の投稿](https://knowledge.insight-lab.co.jp/sisense/formula/rank-in-exam-results) [![【Formula】RANK関数を使って全体順位とクラス順位を表示する](https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/j-1024x472-2.png)](https://knowledge.insight-lab.co.jp/sisense/formula/rank-in-exam-results) ###### [【Sisense Formula】RANK関数を使って全体順位とクラス順位を表示する](https://knowledge.insight-lab.co.jp/sisense/formula/rank-in-exam-results) ###### [次の投稿](https://knowledge.insight-lab.co.jp/sisense/data-modeling/connector/csv-bitsadmin) [![【Connector】Sisenseにインターネット上のCSVを自動取り込み-1](https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/02_sisense_csv-1024x428-1.png)](https://knowledge.insight-lab.co.jp/sisense/data-modeling/connector/csv-bitsadmin) ###### [【Sisense Connector】Sisenseにインターネット上のCSVを自動取り込み-1](https://knowledge.insight-lab.co.jp/sisense/data-modeling/connector/csv-bitsadmin) RECOMMEND こちらの記事も人気です。 ###### 4 分で読むことができます。 #### [【Sisense Administaration】無料のSSL証明書"Let's Encrypt"でSSL化してみる](https://knowledge.insight-lab.co.jp/sisense/administration/ssl_lets_encrypt) ###### 2020年 10月 16日 ###### 8 分で読むことができます。 #### [【API連携】Spotify音楽データの分析①【Sisense】](https://knowledge.insight-lab.co.jp/sisense/information/spotify_music_data_1) ###### 2020年 10月 16日 ###### 2 分で読むことができます。 #### [【Sisense Widget】折れ線グラフを階段状に表示する](https://knowledge.insight-lab.co.jp/sisense/widget/step_line_chart) ###### 2020年 10月 16日 ###### 3 分で読むことができます。 #### [【Sisense Widget】Radar Chartを使ってポケモンの種族値を表示してみた](https://knowledge.insight-lab.co.jp/sisense/widget/radarchart) ###### 2020年 10月 16日 ###### 3 分で読むことができます。 #### [【Sisense Formula】CASE関数を使って条件分岐する](https://knowledge.insight-lab.co.jp/sisense/formula/case) ###### 2020年 10月 16日 ###### 3 分で読むことができます。 #### [【Sisense Widget】折れ線グラフにおける欠落値の対処法](https://knowledge.insight-lab.co.jp/sisense/widget/line-graph) ###### 2020年 10月 16日 ##### 運営会社 運営会社 - [会社概要](https://www.insight-lab.co.jp/about/company.html) - [お問い合わせ](https://contact.insight-lab.co.jp/main) ##### メニュー メニュー - Sisenseとは - [Sisenseナレッジ](https://knowledge.insight-lab.co.jp/sisense) - [セミナー](https://event.insight-lab.co.jp/sisense-seminar) - [お役立ち資料](https://download.insight-lab.co.jp/sisense/download) [![INSIGHT LAB_文字のみ_WHT-1](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/INSIGHT%20LAB_%E6%96%87%E5%AD%97%E3%81%AE%E3%81%BF_WHT-1.png?width=200&height=55&name=INSIGHT%20LAB_%E6%96%87%E5%AD%97%E3%81%AE%E3%81%BF_WHT-1.png "INSIGHT LAB_文字のみ_WHT-1")](https://www.insight-lab.co.jp/) - [プライバシーポリシー](https://www.insight-lab.co.jp/privacy.html) Copyright © 2020 INSIGHT LAB, Inc. ```json { "@context" : "https://schema.org", "@type" : "VideoObject", "contentUrl" : "https://5935783.fs1.hubspotusercontent-na2.net/hubfs/5935783/SISENSE/MP4/ezgif.com-crop_Trim.mp4", "dateModified" : "2022-05-26T20:34:34.401Z", "duration" : "PT14S", "height" : 696, "name" : "ezgif.com-crop_Trim", "thumbnailUrl" : "https://api-na2.hubspot.com/filemanager/api/v3/files/thumbnail-redirect/35824334372?portalId=5935783&size=medium", "uploadDate" : "2020-10-08T08:20:58.630Z", "width" : 1238 } ```