WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： もの
カテゴリー： デザイン >WEBデザイン

今回は、グラフの作り方・応用編（その1）です！
前回「複合グラフだったり、デザインで使えそうなグラフの作り方を簡単にご紹介したい」と最後に書きましたが、まとめたらかなり長くなってしまったので、分割させていただきます（汗）。
今回は「複合グラフ」の作り方をご紹介します。

前回の記事はこちら→更新もできる！Illustratorグラフ作成方法【基礎編】

複数の棒グラフの作り方

2種類の棒グラフが並んだものを作ってみましょう。前回作ったグラフはこんな感じでした（ちょっと項目を増やしました）。

このグラフを全選択して、右クリックしてください。出てきたメニューから「データ」を選択します。すると、グラフのデータが編集できるようになります。ここまでは前回にもやりました。

すでに入っている数値の列の右に、2つめのデータを入力し、右上のチェックマークをクリックするか、テンキーがあればテンキーの「Enter」を押します。

黒い棒の横に、グレーの棒が出てきました。これで、2種類の複合グラフができました！「男女別」とか「年齢別」などを表すときに使えそうです。

これだと寂しいので、色をつけましょう

前回の記事で「選択したパーツの上で「Alt」キーを押しながらもう一度選択（クリック）」すると、すべてのグラフ棒が選択できます！という話をしましたが、今回のように2種類ある場合、「黒い棒をクリック→「Alt」を押しながらもう一度クリック」で、黒いほうのグラフだけ選択、ということができます。

ついでに、凡例もつけてみました。
※なお、前回にも書きましたが、グラフのデータは適当です。

棒・折れ線複合グラフの作り方

複合グラフが作れるようになったら、さらに複雑な「棒・折れ線混合」のグラフを作ってみましょう。
まずは、グラフ全体を選択して右クリック、出てきたメニューから「設定」を選択します。

設定ウィンドウの中の「座標軸」を変えます。デフォルトでは「左側」になっています。座標軸というのは、グラフの左側にある数字のことです。
この座標軸を「両側」に変更して「OK」を押します。

右側にも数字が出てきました。この数字はピンクのほうのグラフ用です。
（凡例、かぶっちゃうので一旦消しました。。）

そうしたら、このピンクの棒グラフだけ選択し、「塗り」から「線」に変えてください。これを今から折れ線グラフにしていくのですが、「塗り」のまま折れ線にしてしまうと見づらいので、先に線にしておくといいです。
なお、折れ線に変えてからでもここは変えられるので、好きなタイミングで変えてください。

ここで気づきましたが、このまま混合グラフにしてしまうと意味的におかしくなってしまうので、データを変えました。2つのグラフがどちらも「人数」になっていますが、棒グラフが「人数」、折れ線グラフが「比率」に変更します。

すごく小さい数字になっています・・・。見づらいですね・・・。

比率は通常、100までしかないのですが、この状態だと右の数字が無駄に大きく、グラフがつぶれてしまいます。このまま折れ線にしてしまっても、下のほうに這うような見づらい折れ線になってしまいます。
ここから折れ線グラフに変換していきますが、ついでに右の数字も調整しましょう。

グラフの片方の数字だけ変える

折れ線にしたいピンクの棒グラフと、右の数字すべてを選択します。

グラフと数字、両方選択してください。
これで右クリック・・・と言いたいところですが、グラフの一部を変えるときには、右クリックのメニューに「設定」が出てきません。そこで、上部のメニューから「オブジェクト」→「グラフ」→「設定」と進んでください。

設定ウィンドウが開きました。ここで、先ほどせっかく座標軸を「両側」にしたのですが、ここを「右側」に変更します。
次に、その上のグラフアイコンがたくさん並んでいる中から、折れ線グラフを選択します。絵が分かりづらければ、アイコンの上にカーソルを置いて少し待てば、説明が出てきます。

そのあと、左上の「グラフオプション」を開いて「数値の座標軸」を選択します。

ここで、右の数字の最小値、最大値、間隔を設定します。「データから座標値を計算する」にチェックを入れ、最小値は0、最大値は100にします。間隔とは、右の数字と数字の間の空間をいくつ作るか、つまりいくつ刻みで数字を表示するかを決めるものですが、こちらはお好みです。ただし、最小値～最大値の数字で割り切れる数字にしないと小数が出てきてしまうので、注意しましょう。何度でも変更できますので、計算が苦手な方はとりあえず数字を入れてみて、うまく割り切れたら完了、でもいいかもしれません（笑）

いい感じに折れ線グラフができました！あとは色や線の太さなどをお好みで調整しましょう。

折れ線グラフの色など調整してみました

折れ線グラフが見づらかったので、白フチをつけるなど調整してみました。
また、グラフの各項目の「■」を「●」に変えました。これは完全にお好みなのですが、「■」を選択した状態で、上部メニュー「効果」→「スタイライズ」→「角を丸くする」で、10pxくらいに設定すると、●に変えることができます。

次は立体グラフです

今回は複合グラフの作り方をご紹介しました。最初に書いたとおり、思った以上に作業が複雑なため長くなってしまいました…。なので、次回に続きます。

次回はデザインで使えそうなグラフ、ということで、立体的なCGっぽいグラフの作り方をご紹介したいと思います。LPデザインなどのイメージ画像として使うこともあるので、知っておいて損はないかと思います！お楽しみに。