WordPress Visualizer でグラフ作成(プラグインの使い方と小技)

WordPress
スポンサーリンク

はじめに

何かを説明したいとき、グラフだと一目でわかるのでとても便利ですよね。でも、Wordpress には標準ではグラフを作成する機能は含まれておりません。

そこで今回は WordPress のグラフ作成プラグインの一つである Visualizer を使った方法を説明します!

Visualizer って?

Visualizer はグラフ作成用の WordPress プラグインとして非常にメジャーで、2020/08 現在、40,000件以上のインストール実績があります。

高機能/簡単/綺麗の三拍子が揃っていて、また日本でも使っている人が多いためネット上での情報も豊富で、非常におススメできるプラグインです。

このプラグインは基本機能は無料で、一部機能のみ有料になっています。ただ無料の部分だけでも殆どの場合では困る事はないくらいに機能が揃っていますので、一般的な使い方(棒グラフ/折れ線グラフ/パイグラフ/等々)なら普通に事足りると思います。

もし無料部分で事足りなければ Visualizer を PRO版 に更新(有料)するか、amCharts 等の javascript を使用した更に高性能なグラフ作成プラグインを導入する事になります。ただ後者はそれなりに敷居が高いので、使う際にはそれなりに覚悟が必要です。

プラグインのインストール

まずはプラグインをインストールします。Wordpress のプラグインのページにいき、「新規追加」をクリック。

プラグイン追加

プラグインのダウンロードセンター的なページに飛びますので、右上の検索窓に「visualizer」と入力。

プラグイン検索

以下のアイコンが表示されたら、「今すぐインストール」をクリック。なおインストールしたら、忘れずプラグインを「有効化」してください。

プラグイン追加

グラフの作り方

グラフ種類選択

グラフを制作する方法はいくつかありますが、基本的な方法を説明します。

まず WordPress の左側にあるメニューから、 Visualizer を選択します。

メニュー選択

「Add New」を選択します。2つ表示されていますが、どちらを選択しても大丈夫です。

グラフの新規作成

作りたいグラフの種類を選択します。なお実はこの9種以外にも6種のグラフを作る事が可能ですが、それらには「PREMIUM」の表示がありまして、PRO版(有料)の機能になっています。といっても、通常の範囲内であれば以下のグラフだけで十分だと思いますが。

グラフ種類

今回は折れ線グラフを作る想定で説明進めますので、折れ線グラフにチェックを入れた状態で、画面下部の「Next」を押します。

グラフ選択
ネクスト

数値入力

数値入力方法

数値の入力手段は6種あり、画面右側の「Source」から選択します。無料版で使用可能な方法は3つで、残り3つは鍵マークがついており、 PRO版 (有料版)限定の機能になっています。

数値入力方法選択
種類データ入力方法
Import data from fileExcell (CSV) ファイルから取り込み
Import data from URLGoogle Spreadsheet か JSON を取り込み
Manual Data外部ソフト/サービスに頼らず手打ち

今回は Excell エクセル(CSVファイル)を使った方法で進めますが、簡単にですがのこり2つの手打ち方法も説明しますで、Excell を持ってない方は参考もらえると幸いです。

データ量が多いなら間違いなく Excell を使った方が楽ですが、データ数が少ないなら、手打ちの方が手軽に楽につくれるかもしれません。場合に応じて使い分けてください。

手打ち

外部ソフトやサービスを使わず手打ちする場合は、画面右側のメニューから「Manual Date」を選択します。

数値の入力は「Text, Simple」の2種類が選べますが、通常は「Simple」の使用でいいでしょう。入力方式を選択したら「Edit Data」を選択。

数値入力方法選択

以下のような画面で手打ちで入力できます。「Label」や「Data Type」の詳細については、エクセルから読み込む方法のほうで説明していますので、そちらを参考にしてください。

またグラフが2本以下でいい場合(折れ線グラフの場合は折れ線が1~2本の場合)は、「Data Type」で「exclude」を選択してください。これで不要な裂と判断されます。

数値入力

データ入力が完成したら、右側の「Show Chart」を選択します。これで左側に意図したグラフが表示されば完成です。

数値入力

Excell エクセル(CSVファイル) を使った方法

「Import data from file」を選択し、「line.csv」をクリック、「line.csv」をダウンロードします。

iine.csvを選択

使っているブラウザーによって若干異なりますが、Firefox の場合は以下のように表示されます。

iine.csvをダウンロード

先程ダウンロードしたファイルをエクセルで開きます。なお CSV ファイルにはサンプルとして、初めから以下のようにデータが入っているので、それをベースに書き換えて使用する事になります。

基本的に1列目には見出し(北海道、岩手、福島、のような文字列)を記載します。ただし1列目(エクセルのセルA1)のみ「X」を記入します。

2列目以降が少しわかりづらいかもしれませんが、データのタイプ(型)を記載します。(北海道、岩手、福島、のような)文字列なら「String」、(0, 5, 100 のような)数値なら「number」を記載します。データのタイプ(型)は「string, number, Boolean, date, datetime, timeofday」から選べますが、殆どの場合は「string, number」の2種類だけで事足りると思われます。

Excelで編集
行数内容記載例
1行目見出しを記載します。北海道, 岩手, 福島、等々
2行目その列のデータの形を記載string, number, 等々
3行目以降数値を記載します。83456, 15278, 13782

今回は日本の国内総生産(GDP)をグラフにしたいので、下記のようにように変更しました。なお今回の場合、グラフの線は1本だけで事足りるため、「Blanket1, Blanket2」の列は削除しました。

Excelで編集

次に CSVファイルの「文字コード」を「UTF-8」に変換します。文字コードの詳細は割愛しますが、(本当は違うのですが誤解を恐れず言えば)日本語/英語/フランス語のような、言語の種類であるといえます。

Web の世界では「UTF-8」が事実上の標準になっており、また「Visualizer」でも「UTF-8」を使用する必要があるため、変換してあげる必要があります。

今回の場合だと、先程更新した「[line.csv] を右クリック>プログラムから開く>メモ帳」として、メモ帳で開きます。もし「メモ帳」が表示されない場合は、「その下にある「別のプログラムを選択」」を押して、メモ帳を表示させます。

文字コード変換

メモ帳で「line.csv」を開いたら「ファイル>名前を付けて保存」とし、

文字コード変換

画面下部の「文字コード」から「UTF-8」を選択し、「保存」します。その時上書きするかどうか聞かれますが、気にせず上書きしてください。

文字コード変換

Wrodpress の画面に戻り先のファイルを読み込みます。「参照>先程の line.csv を選択 > Import」と選択。

line.csvアップロード

このように、無事に左側にグラフが表示されたら完成です。

グラフ描写

グラフの設定

はじめに

先の操作でグラフが生成されました。これでも十分に綺麗なのですが、見せ方を変えたいときに、画面右側にある「Setting」を使用します。なおできる事は沢山がありすぎるため、使用頻度が高いものに限って紹介します。

グラフ設定

グラフタイトルを表示する

「General Settings > Title > Chart Title」へ移動し、タイトルを入力します。この部分は「Visualizer」の管理画面で表示されるグラフタイトルになりますので、あとから見て分かりやすい名前にすることをおススメします。

グラフが増えてきたとき、あとから何処につかった何のグラフだったか分からなくなると目も当てられません。

グラフタイトル表示

縦/横のラベル(名称)を表示する

グラフ下側の見出しを付けたいときは「Horizontal Axis Settings > General Settings > Axis Title」へ移動し、ラベルの名前を入力します。

ラベル名称を表示

グラフ左側の見出しを付けたいときは「Vertical Axis Settings > General Settings > Axis Title」へ移動し、ラベルの名前を入力します。

ラベル名称を表示

軸(数値)の最大値/最小値を指定する。

グラフの最大値を変更したい場合は「Vertical Axis Settings > View Window > Maximum Value」へ移動し、設定したい最大値を入力します。

グラフ設定

グラフの最大値を変更したい場合は「Vertical Axis Settings > View Window > Minimum Value」へ移動し、設定したい最小値を入力します。

この機能はデータの変動量が狭すぎて通常だと分かりずらい場合等に、途中の個所を省略したりする場合に使用できます。もしくは逆に、省略されてしまっているけどゼロから表示したい場合にも使えます。

グラフ設定

最後に

好みの通りのグラフが完成したら、右下の「Create chart」を選択します。

グラフ生成

無事にグラフが生成されました。

完成したグラフ

ブログへの挿入

先程グラフを作成しましたが、当然ながらそれだけでは意味がありませんので、ブログに挿入してみたいと思います。

まずは段落やタイトルを挿入する場合と同じように、「ブロックの追加」を選択します。

グラフ挿入

いつもの画面が表示されます。ここに「Visual Chart」が表示されていればそれを、表示されていなければ「ブロックの検索」のところに「Visual」と入力して表示させてください。

グラフ挿入
グラフ挿入

新規でグラフを作るのか、または既に作ってあるグラフを選択するのか聞かれます。今回の場合は既に作ってあるグラフを使用しますので、下側にある「Display an existing chart」を選択します。

グラフ挿入方法選択

ブログに表示させたいグラフにある「上矢印」の部分を選択します。

グラフ選択

グラフが無事に表示されました。これで完成です!!

(なお下のグラフは画像ではなく、Visualizerプラグインで描写しているグラフになります。)

所感

グラフって便利なんですけど、残念ながら WordPress の初期機能には含まれていません。でもこのプラグインを使えば簡単にグラフを生成できますので、皆さんも試してみてください!簡単に説明しやすくなりますよ!

コメント

タイトルとURLをコピーしました