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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

凡例を非表示にする

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

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

legend: {
  position: 'none',
},

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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