ブログでグラフを見やすくするテクニック|凡例は非表示が基本

凡例を使わないグラフテクニック

グラフを見やすくするには、なるべく文字や要素を少なくし、とにかくシンプルにすることが大事です。

下のグラフをご覧ください。

家計収支の推移(凡例比較用)

凡例の表示を切り替える

ボタンで凡例の表示を切り替えて、見た目の違いをたしかめてみてください。

凡例を非表示にした方が、直感的に見やすいですよね。

この記事では、ブログでGoogle Chartsグラフを埋めこむときに、凡例を使わないメリットテクニックを紹介します。

Google Chartsの基本的な使い方は、WordPressブログにグラフを埋めこむためのGoogleChartsの使い方をご覧ください。

ブログのグラフで凡例を使わない3つのメリット

ブログで使うグラフは、パッとみてすぐに理解できるように作らないと意味がありません。
なぜなら、考えないと分からない文章や図は読みとばされるからです。

データの意味をもれなく正確に伝える場合は、グラフに凡例や数値を書きこむ必要がありますが、ブログは論文ではありません。

正確さ分かりやすさを優先するために、凡例を使わないメリットをまとめておきます。

メリット1. とにかく見た目がシンプルになる

パッと見て、ごちゃごちゃしているグラフは見る気がなくなりますよね。
凡例を非表示にすることで、確実に見た目をスッキリさせることができます。

単純なことですが、見てもらうためには第一印象が1番大事です。

もう一度グラフを確認する

メリット2. グラフの意味が理解しやすい

一般的に、説明する対象と説明文は距離的に近いほどストレスなく読みとることができます。

それぞれの要素(棒や折れ線)が何のデータを示しているのか?
これを凡例で読み取ろうとすると、視線がどうしても要素と凡例の間で行ったり来たりすることになり、ストレスになります。

凡例を使う場合と使わない場合で比べてみてください。

もう一度グラフを確認する

メリット3. グラフの表示領域を広く使うことができる

総務省によると個人のインターネット利用の9割はスマートフォンと言われています。
スマホの小さい画面でグラフ全体を大きく表示させるために、少しでも不要な要素は排除する必要があります。

また、スマホの画面は小さいだけでなく、縦長になっています。
凡例を横に並べると、グラフ領域が極端に長細くなってしまいます。

凡例をなくすことで、特にスマホの限られた画面を有効に使うことができます。

もう一度グラフを確認する

Google Chartsで凡例を使わないためのテクニック

凡例を非表示にすることで、何のグラフなのか分からなければ本末転倒です。

シンプルさを保ちつつ、分かりやすいグラフを作るためのテクニックを解説します。

凡例を非表示にする

Google Chartsで凡例を非表示する方法は簡単です。

オプション(Configuration Options)のコードで、legend.position none を指定するだけです。

Google Charts
legend: {
  position: 'none',
},

参考まで、legend.position では次の値が指定できます。

説明
topグラフの上に凡例を表示する
bottomグラフの下に凡例を表示する
leftグラフの左に凡例を表示する
rightグラフの右に凡例を表示する【デフォルト】
inグラフの中の左上に凡例を表示する
none凡例を表示しない

注釈を使ってグラフ要素を説明する

凡例を使わないかわりに注釈を使って、棒や折れ線が何のデータを表しているのかを表示します。

注釈はGoogle Chartsで Annotations と呼ばれています。
注釈とは、グラフ要素のポイントの近くにテキストを表示する機能です。

ちなみに、マウスオーバーやタップした時にテキストを表示する機能は、ツールチップTooltip)と呼ばれています。

グラフデータに注釈用の列を追加する

冒頭に表示したグラフのデータ構造は、下のような表になっています。

日付データ収入収入
注釈
支出支出
注釈
累積貯蓄累積貯蓄
注釈
2020年4月35000030000050000
2020年5月36000035000060000
2020年6月880000収入760000支出180000
2020年7月360000300000240000
2020年8月330000380000190000
2020年9月340000300000230000
2020年10月340000320000250000
2020年11月360000310000300000
2020年12月950000780000470000
2021年1月360000320000510000
2021年2月370000330000550000
2021年3月370000300000620000累計貯蓄

テーブルの列を定義するときに、データ列の次に注釈列を追加します。

下のコードでは、「収入」列と「収入の注釈」列を追加しています。

Google Charts
data.addColumn('number', '収入');
data.addColumn({type: 'string', role: 'annotation'});

roleannotationを指定することで「この列の役割は注釈ですよ」という意味になります。

注釈をグラフの目立つところに表示させる

最初にグラフを見た人は、棒や折れ線が何のデータを表しているかを理解しようとします。
グラフの中で注目されやすいのは、高い位置にある棒や折れ線のポイントです。

一度グラフを作ってみて、目立つところに注釈を入れます。

冒頭のグラフでは、棒は最初の山になっている「6月」のところに「収入」と「支出」の注釈を入れています。

もう一度グラフを確認する

注釈のスタイルを設定する

注釈はデフォルトのままだと見栄えがよくないので、オプションでスタイルを設定します。

annotations だけでもかなり多くの項目を設定できますが、必ず指定しておいた方が良いのは、stemとtextstyleの2項目です。

annotations.stemは、データポイントからの距離(length)と引き出し線の色を設定します。
lengthの値が小さすぎると要素にテキストが重なってしまうため、3~10くらいの値で調整します。
colorは背景色と同じ色、ここでは白色に設定します。

annotations.textStyle は、注釈テキストのスタイルを設定します。
テキストが要素と重なる場合は、透明度(opacity: 0透明〜1不透明)を小数値で調整します。

Google Charts
annotations: {
   stem: {
      color: '#fff',
      length: 3,
   },
   textStyle: {
     color: '#F9BA00',
     fontSize: 14,
     bold: true,
     opacity: 0.8,
   }
}

まとめ

この記事では、ブログでGoogle Chartsグラフを埋めこむときに、凡例を使わないメリットテクニックを紹介しました。
グラフで凡例を使わないこの方法は、当ブログで紹介している他のGoogle Chartsデザインでも採用しています。

オプションの設定とか細かいことはよく分からない!という方は、用途に合わせてコピペで使えるGoogle Chartsデザイン集をご覧ください。

コメントを残す