月と東京タワー

Piktochartの使い方 積み上げ棒グラフを作る

      2017/02/07

初心者のインフォグラフィック習得過程を晒しながら使い方を解説しています。
前回はドーナツ(半円)で進捗を示すグラフを作りました。
Piktochartの使い方 半円ドーナツグラフで目標と進捗状況を表示する

今度は棒グラフです。
ただの棒グラフではつまらないので、横棒の積み上げグラフを作ってみます。

全体(100%)の各項目の割合を示すものにします。

数値はアメリカ大統領選の本選マッチアップ、共和党の誰それvs民主党の誰それならどちらを支持するかという形式の調査から、ドナルド・トランプ、テッド・クルーズ、ジョン・ケーシックの共和党3候補が本選挙で民主のバーニー・サンダースと当たったらどちらを支持するかの調査結果を使います。

テンプレートを選ぶ

何もデザインされていないプレーンなテンプレートから作ります。

Piktochartにログインしたら、「Create your own infographic」というテンプレートにマウスオーバーして、「CREATE」をクリック。

TOOLSでCHARTSを選択する

左側の「TOOLS」ボタンをクリックすると「CHARTS」「MAPS」「VIDEOS」と3つのアイコンが表示されます。

CHARTS選択

TOOLS」をクリックして

右の編集フィールドから編集するBLOCKをクリックでアクティブにした状態で、左「CHARTS」を押します。

チャートの種類:Horizontal Barを選ぶ

横棒のグラフにしたいので、左のアイコンから「Horizontal Bar」を選びます。

積み上げグラフの作成

グラフのスタイルを決める

表示されるサンプルのグラフは、積み上げでない単純な横棒です。
これを積み上げスタイルに変更します。右上「Settings」をクリックして設定の画面を表示してください。

「Settings」の画面右真ん中あたりに「Stacked」というボタンがあるので、ここを「ON」にします。
ずっとこのボタンに気づかず、Piktochartで積み上げは作れないのかと思っていました。これで、左のグラフが積み上げスタイルに変わります。

データを入れる

上の「Data」を押して、エクセル状のシートを表示させたら、調査結果を入力してください。

ここでは、外部データをインポートしてグラフを作ることも出来ます。

エクセルデータ取り込み、Googleスプレッドシート連携それぞれの方法は、こちらに
データをインポート

すると…

グラフが変です。
縦軸と横軸が逆になっているので、これを入れ替える必要があります。

エクセル状のシート左上のセルにふたつの矢印が一緒になったアイコンがあるので、そこをクリックすると、縦横を入れ替えることが出来ます。

グラフも作りたい形に変わりました。

グラフの体裁を整える

色を変える

グラフの要素ごとのを設定します。

慣例に従って共和党は赤系民主党は青系に変えてみます。

右上「Setting」タブから「Individual Color Setting」のラジオボタンが選択されているのを確認して、要素ごとに色を選びます。
要素の色が出ている箇所をクリックするとカラーパレットが表示されるので好きな色を選ぶか、カラーコードを指定してください。

その他設定

その他、必要に応じて設定してください。

ここでは、フォントの色をグレーから黒に変更して、グラフにグリッド線を入れました。

その他の項目は

Title Position グラフタイトルの位置。グラフの上か下か
Legend 凡例を表示するかしないか
Legend Position 凡例の位置。グラフの上か下か
Axis 軸を表示するかしないか(X軸Y軸個別に指定はできないようです)

です。

グラフにタイトルをつける

グラフのタイトルを入力します。

出来ているチャートの上の「Click to Edit Title」あたりをクリックすると上にタイトル入力用の窓が出現します。

そこにグラフのタイトルを入れます。

グラフをテンプレートに貼り付ける

作ったグラフをテンプレートに貼ります。画面右上の「INSERT CHART」(もしくは「UPDATE CHART」)をクリックしてください。

積み上げグラフの位置とサイズ調整

テンプレートに貼ったグラフをクリックするとグラフ周囲に枠が出現するので、その枠をドラッグして位置とサイズを調整します。

不要なBLOCKを削除する

ここではグラフ一枚だけがあればいいので、テンプレートの下に続くBLOCKは必要ありません。
このBLOCKを削除する方法はこちらに
不要なBLOCKを削除する

インフォグラフィックを公開する

公開、共有の手順はこちらに
Piktochartの使い方 インフォグラフィックのダウンロード・公開・共有

公開したグラフはこう表示されます。

Piktochartのサーバーに自動で保存されています。編集したいときはPiktochartにログインして「My Saved Piktocharts」から作ったインフォグラフィックを探してください。

スポンサーリンク


 - Infographics