--- title: 【Sisense Widget】棒グラフでSisenseのウィジェットの基本を学ぶ -後編 description: 今回は『棒グラフでSisenseのウィジェットの基本を学ぶ』の後編、ウィジェットデザイナーの右ペインの設定を中心に進める。 image: https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/12-1024x345-Oct-07-2020-03-14-57-04-AM.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) ###### 5 分で読むことができます。 # [【Sisense Widget】棒グラフでSisenseのウィジェットの基本を学ぶ -後編](https://knowledge.insight-lab.co.jp/sisense/widget/columnchart_2) 執筆者 [Turtle](https://knowledge.insight-lab.co.jp/sisense/author/turtle) 更新日時 2020年10月16日 ###### Topics: [Widget](https://knowledge.insight-lab.co.jp/sisense/tag/widget) ![【Widget】棒グラフでSisenseのウィジェットの基本を学ぶ -後編](https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/12-1024x345-Oct-07-2020-03-14-57-04-AM.png) 目次 本記事は『棒グラフでSisenseのウィジェットの基本を学ぶ』の後編、 ウィジェットデザイナーの右ペインの設定を中心に進めます。   ## 1.２軸グラフの作成 前編では「値」を2つ設定した棒グラフ、積み上げ棒グラフを作成してみた。 しかし、前者で紹介するのをうっかり忘れていた機能がある。 それは２軸にのグラフの時に棒グラフを２つ並べるだけではなく、片方を折れ線グラフなどの異なるタイプのグラフと混合させることができるということ。 ウィジェットの基本を学ぶの前編で作成した積み上げ棒グラフに下に以下の設定でグラフを作成する。 **・カテゴリ：**　　カテゴリ名称 **・値１：**　　　　注文金額　　SUM(注文金額) **・値２：**　　　　顧客数　　　COUNT(会員番号) 「値」右上のメニューから「系列の種類」からグラフのタイプを選択する。 （今回は「顧客数」から選択） また、２軸にして目盛線が２つ必要な場合は、右軸は左軸とはスケールの異なる目盛線を設定することができる。 **・自動** 「自動」を選択すると、通常は棒グラフが追加される **・線** 折れ線グラフが追加される **・スプライン** 滑らかな折れ線 **・エリア** 面グラフ **・エリアスプライン** 滑らかな面グラフ **・列** 棒グラフ [![](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/Imported_Blog_Media/01_2axis1-1024x561-Oct-07-2020-03-15-10-46-AM.png?width=1024&height=561&name=01_2axis1-1024x561-Oct-07-2020-03-15-10-46-AM.png)](https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/01_2axis1-Oct-07-2020-03-14-48-34-AM.png) 尚、２軸で表示される棒または線はレイヤを持っており、「値」の上からレイヤが下となる。 エリアスプラインに切り替えたときの表示。参考まで。 [![](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/Imported_Blog_Media/02_2axis2-1024x559-Oct-07-2020-03-14-51-12-AM.png?width=1024&height=559&name=02_2axis2-1024x559-Oct-07-2020-03-14-51-12-AM.png)](https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/02_2axis2-Oct-07-2020-03-14-58-64-AM.png) ## 2.ウィジェットデザイン ウィジェットデザインで設定できるプロパティについて解説していく。 ### 2.1 列の種類 「クラシック」「積み上げ」「積み上げ100」からスタイルを選択する。 まずはクラシック表示 [![](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/Imported_Blog_Media/03_classic-1024x516-Oct-07-2020-03-15-00-11-AM.png?width=1024&height=516&name=03_classic-1024x516-Oct-07-2020-03-15-00-11-AM.png)](https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/03_classic-Oct-07-2020-03-15-02-01-AM.png) 次は積み上げ表示 [![](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/Imported_Blog_Media/04_stacked-1024x520-Oct-07-2020-03-15-05-51-AM.png?width=1024&height=520&name=04_stacked-1024x520-Oct-07-2020-03-15-05-51-AM.png)](https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/04_stacked-Oct-07-2020-03-14-40-82-AM.png) それでこれが積み上げ100。これは積み上げの相対表示だね。いわゆる帯グラフ。 [![](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/Imported_Blog_Media/05_stacked2-1024x516-Oct-07-2020-03-14-54-63-AM.png?width=1024&height=516&name=05_stacked2-1024x516-Oct-07-2020-03-14-54-63-AM.png)](https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/05_stacked2-Oct-07-2020-03-14-38-06-AM.png) ### 2.2 凡例 凡例の位置の設定 [![](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/Imported_Blog_Media/06_legend-1024x472-Oct-07-2020-03-14-41-72-AM.png?width=1024&height=472&name=06_legend-1024x472-Oct-07-2020-03-14-41-72-AM.png)](https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/06_legend-Oct-07-2020-03-14-40-02-AM.png) ### 2.3 値ラベル トグルをONにすると、チャート上の値を表示できるようになる。 「相対値」は内訳をチャート内に表示、「合計値」はチャートの上に表示する。 [![](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/Imported_Blog_Media/07_label-1024x472-Oct-07-2020-03-15-09-09-AM.png?width=1024&height=472&name=07_label-1024x472-Oct-07-2020-03-15-09-09-AM.png)](https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/07_label-Oct-07-2020-03-14-57-83-AM.png) ### 2.4 値ラベルの向き 値ラベルの表示角度を選択する。ここで選択できるのは、「横」「斜め」「縦」の３つ。 [![](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/Imported_Blog_Media/08_label2-1024x472-Oct-07-2020-03-14-56-18-AM.png?width=1024&height=472&name=08_label2-1024x472-Oct-07-2020-03-14-56-18-AM.png)](https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/08_label2-Oct-07-2020-03-15-03-12-AM.png) ### 2.5 X軸 以下の設定を行う **・グリッド線の有無** **・ラベル表示の有無** **・タイトル** **・間隔** [![](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/Imported_Blog_Media/09_axis-1024x523-Oct-07-2020-03-14-46-11-AM.png?width=1024&height=523&name=09_axis-1024x523-Oct-07-2020-03-14-46-11-AM.png)](https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/09_axis-Oct-07-2020-03-14-50-21-AM.png) ### 2.6 Y軸 以下の設定を行う **・グリッド線の有無** **・対数目盛への切り替え** **・ラベル表示の有無** **・タイトル** **・最小** **・最大** **・間隔** [![](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/Imported_Blog_Media/10_Y-axis-1024x739-Oct-07-2020-03-15-11-43-AM.png?width=1024&height=739&name=10_Y-axis-1024x739-Oct-07-2020-03-15-11-43-AM.png)](https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/10_Y-axis-Oct-07-2020-03-14-35-14-AM.png) ### 2.7 自動ズーム これはX軸の表示値が多すぎる場合にウィジェットの下にズームバーを表示し、表示範囲を調整する機能 [![](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/Imported_Blog_Media/11_zoom-1024x739-Oct-07-2020-03-15-00-92-AM.png?width=1024&height=739&name=11_zoom-1024x739-Oct-07-2020-03-15-00-92-AM.png)](https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/11_zoom-Oct-07-2020-03-14-38-93-AM.png) [![](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/Imported_Blog_Media/12-1024x345-Oct-07-2020-03-14-57-04-AM.png?width=1024&height=345&name=12-1024x345-Oct-07-2020-03-14-57-04-AM.png)](https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/12-Oct-07-2020-03-14-53-79-AM.png) ### 2.8 Y2-軸 「値」を２つ以上設定した場合に以下の２つめ（以上）の軸に対して以下の設定を個別に行うことができる。 **・対数目盛への切り替え** **・ラベル表示の有無** **・タイトル** **・最小** **・最大** **・間隔** [![](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/Imported_Blog_Media/13_Y2-1024x683-Oct-07-2020-03-14-59-34-AM.png?width=1024&height=683&name=13_Y2-1024x683-Oct-07-2020-03-14-59-34-AM.png)](https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/13_Y2-Oct-07-2020-03-14-51-98-AM.png) ## 3.ウィジェットフィルタ ダッシュボードフィルタとは別に各ウィジェットに個別のフィルタ設定を行うことができる。 ### 3.1 ダッシュボードフィルタ [![](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/Imported_Blog_Media/14_filter-Oct-07-2020-03-14-55-27-AM.png?width=221&height=640&name=14_filter-Oct-07-2020-03-14-55-27-AM.png)](https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/14_filter-Oct-07-2020-03-14-55-27-AM.png) ウィジェットにダッシュボードフィルタを反映させるかどうかの設定。 デフォルトはONだが、OFFにするとこのウィジェットだけだ独立したフィルタ条件となる。 また「ダッシュボードフィルタ」の何を反映させるかをどれぞれ設定することもできる。 ### 3.2 スライス/フィルターとハイライトの切り替え フィルタを適用した時の表示モードを切り替える **・スライス/フィルター** ウィジェット上で絞り込んだ時に、絞られた範囲のみ表示する。 [![](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/Imported_Blog_Media/15_filter1-1024x482-Oct-07-2020-03-15-07-37-AM.png?width=1024&height=482&name=15_filter1-1024x482-Oct-07-2020-03-15-07-37-AM.png)](https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/15_filter1-Oct-07-2020-03-15-09-69-AM.png) **・ハイライト** ウィジェット上で絞り込んだ時に、絞られた範囲を強調表示する（全体表示は変わらない）。 [![](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/Imported_Blog_Media/16_filter2-1024x495-Oct-07-2020-03-14-37-22-AM.png?width=1024&height=495&name=16_filter2-1024x495-Oct-07-2020-03-14-37-22-AM.png)](https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/16_filter2-Oct-07-2020-03-15-08-27-AM.png) ### 3.3 ウィジェットフィルタ デフォルトではカテゴリとして設定した項目と区切り基準で設定された項目のみがフィルタとして表示される さらに\[＋\]アイコンをクリックして任意も項目をフィルタとして追加できる。 下記は「都道府県」で"北海道"を選択したケースで、閲覧するユーザは編集モードに入らない限り、このフィルタを変更することができない。 よって、裏で選択されていることになるから、このウィジェットは常に「北海道の注文」しか対象にしないことになる。 [![](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/Imported_Blog_Media/17_add_filter-1024x509-Oct-07-2020-03-14-49-22-AM.png?width=1024&height=509&name=17_add_filter-1024x509-Oct-07-2020-03-14-49-22-AM.png)](https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/17_add_filter-Oct-07-2020-03-14-36-25-AM.png) 数式を使用せずに、フィルタとして条件を入れることができるので、例えば、性別毎の円グラフを並べて表示したい場合などは、ウィジェットフィルタで性別=男性と性別＝女性と別々に設定した円グラフを準備すればよい。 このフィルタの追加は、結構用途が広いと思う。 ## 4. まとめ 以上、カラムチャートを例にウィジェットデザイナーの使い方を解説した。 もちろん、ウィジェットによって設定項目は異なるが、今回の内容を把握していれば、問題ないだろう。 ウィジェットフィルタでフィルター項目を追加できると、他のBI製品では数式内で設定している条件を画面上でクリックしながらできてしまう。 これはユーザフレンドリーだと思う。 これが便利だと思った人は多分、色んなBIを触ってる人ですね。 ではまた！ 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/widget/columnchart_1) [![【Widget】棒グラフでSisenseのウィジェットの基本を学ぶ -前編](https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/28_addmeasure4-1024x589-Oct-07-2020-03-10-24-71-AM.png)](https://knowledge.insight-lab.co.jp/sisense/widget/columnchart_1) ###### [【Widget】棒グラフでSisenseのウィジェットの基本を学ぶ -前編](https://knowledge.insight-lab.co.jp/sisense/widget/columnchart_1) ###### [次の投稿](https://knowledge.insight-lab.co.jp/sisense/widget/formulafilter) [![【Formula】数式にフィルター設定](https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/14_chart3-1024x547-Oct-07-2020-03-12-24-12-AM.png)](https://knowledge.insight-lab.co.jp/sisense/widget/formulafilter) ###### [【Sisense Formula】数式にフィルター設定](https://knowledge.insight-lab.co.jp/sisense/widget/formulafilter) 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.