--- title: 【Sisense Widget】折れ線グラフを階段状に表示する description: 今回は、折れ線グラフを階段状に表示して、いわゆる「階段チャート（Step Line Chart）」を作成する方法について紹介します。そこまで使用頻度の高いテクニックではありませんが、階段状に変化する値（入場料など）を可視化する際に便利なテクニックです。 --- [Sisenseナレッジ - INSIGHT LAB](https://knowledge.insight-lab.co.jp/sisense) # [【Sisense Widget】折れ線グラフを階段状に表示する](https://knowledge.insight-lab.co.jp/sisense/widget/step_line_chart) 作成者: [Turtle](https://knowledge.insight-lab.co.jp/sisense/author/turtle)｜2020年10月16日 こんにちは。Turtleです。 昨日、健康診断を受けてきた。自宅にはヘルスメーターが無いため体重は基本的に健康診断でしか把握しかできないTurtleは、「太っていたらどうしよう...」と当日を迎えるまで不安な気持ちでいっぱいだったのだが、結果的には3kg痩せていた。 Sato-Gはこの話について「コロナ太りの人が多い中、痩せるか...」とのこと。コロナでほとんど家から出ていないし、元々インドア派のぼくが何故痩せていたのか... [このとき](https://knowledge.insight-lab.co.jp/sisense/widget/widget-background)くらいに買ったヨガマットのおかげかな？ ...さて、話を本題に。今回は、**折れ線グラフを階段状に表示する**方法について紹介する。そこまで使用頻度が高いテクニックではないが、今回のようなデータを取り扱う際には役立つテクニックだと思う。 ## 1. 確認 今回取り扱うデータは以下のようになっている。 ・2000年～2020年のとあるテーマパークの入場料のデータ ・1年に一度入場料の見直し、その後1年は入場料の変更はない ・入場料の変化の有無に関わらず毎年入場料が記録されている このデータを見てピンとくる方は、当該テーマパークに対する愛が相当大きいのだろうなあと思う。ちなみに、ぼくは人生で一度しか行ったことがない（聞いてない）。 ...話が逸れたので戻しますね。今回は、上図データを使用して、入場料の金額推移を可視化するということをやっていく。「おいおい、そんなの誰でもできるじゃないか」という声がたくさん聞こえてくるが、気にせずやっていくよ！ ## 2. ウィジェット作成 ### 折れ線グラフの作成 先ほどのデータをビルドし、以下のように設定すると、入場料の推移を表す折れ線グラフが完成する。 ・ウィジェット：**折れ線グラフ** ・X-軸：**年** ・値：入場料=**SUM(入場料)** なるほど、入場料は右肩上がりで増加しているね。なんとこの20年間で約3000円も増加している。数値で見るといまいちピンとこないけど、折れ線グラフにして可視化することでより分かりやすくなるのが利点。 だけど、上のグラフには改善した方が良いところがある気がするよね...？ ### 問題点の確認 折れ線グラフは優れたものだけど、注意しなければいけないことがある。下図に記載しているように、**「本来変化がない部分なのに、変化していると誤解してしまう可能性」**はあるはずだ。 上図の例でいうと、「2010/06くらいはちょうど￥6000くらいかな？」という誤解を生む可能性は十分にある。ところが先ほどデータを確認した皆さんなら分かると思うが、2010年は1年間ずっと￥5800であり、2011年になるまでにまったく変化していない。 対策として、データポイントをつけて値の存在するところを表示したり、折れ線グラフではなく棒グラフにしたり...といったことが考えられるが、今回は、**折れ線グラフを階段状にする**ことで解決したいと思う。 具体的なイメージは以下の通り。 それではやっていこう。 ### 改善（階段状に表示） 実は、折れ線グラフを階段状に表示させることは非常に簡単。データモデルや数式を変更する必要はまったくなく、Sisenseを少しでも触ったことがある方なら一瞬で終わる。 ①ウィジェットの編集画面で、「メニュー」→「スクリプト編集」を選択して、スクリプトの編集画面を開く。 ➁スクリプト編集画面を開いたら、下のスクリプトをコピペして保存を押す。 ``` widget.on('processresult', function(se,ev){ ev.result.plotOptions.series.step = true; }) ``` ③ウィジェット編集画面に戻り、リフレッシュする。 これで折れ線グラフの階段表示が完成。どう？簡単でしょ？ これで先ほど確認したような「2010/06くらいはちょうど￥6000くらいかな？」という誤解を生む可能性はなくなった。そんなに気にするところではないかもしれないけど、意外とこういうところって大事だとTurtleは思うんだよね。（聞いてない） ## 3. まとめ 今回は、折れ線グラフを階段状に表示する方法について紹介した。特に今回のようなデータを可視化する場合は、通常の折れ線グラフよりも階段状に表示したグラフの方が適切だと思う。 特別にデータモデルや数式を変更する必要もなく、簡単な手順ですぐ作成できるので、是非皆さんも試してみてください。 以上、今回は簡単な内容ですいません。それでは！ [完全な記事を表示](https://knowledge.insight-lab.co.jp/sisense/widget/step_line_chart) ```json { "@context" : "http://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "Turtle" }, "dateModified" : "2020-11-18T01:43:36.917Z", "datePublished" : "2020-10-16T07:15:29Z", "headline" : "【Sisense Widget】折れ線グラフを階段状に表示する", "image" : { "@type" : "ImageObject", "height" : 434, "url" : "https://download.insight-lab.co.jp/hubfs/Imported_Blog_Media/53498860c0452dbde0d8ce5a33734bd7-1024x434-2.png", "width" : 1024 }, "mainEntityOfPage" : "https://knowledge.insight-lab.co.jp/sisense/widget/step_line_chart", "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "height" : 60, "url" : "/hs/hsstatic/content_shared_assets/static-1.4092/img/default-amp-logo.png", "width" : 60 }, "name" : "Sisenseナレッジ" } } ```