エクセルやGoogleスプレッドシートなどのデータを円・棒・線グラフに生成するプラグイン「Visualizer」

2016

4.4

数値を使って、論理的な記事を書きたい場合には、グラフ形式でデータを表示することで、記事に客観性を与え信用性を増す事が出来ます。
また、グラフもデザイン性の高いものであると視覚的にもわかりやすくなります。

そこで、エクセルやGoogleスプレッドシートなどのデータをグラフ化してくれるWordpressプラグイン「Visualizer」を紹介します。

「Visualizer」とは

このようなグラフをCSVファイルをアップロードすることで作成することができます。

visual05

また、作成できるグラフの種類は下記の9種類になります。

  • 円グラフ
  • 折れ線グラフ
  • 面グラフ(エリアチャート)
  • ジオチャート
  • 縦棒グラフ(バーチャート)
  • 横棒グラフ(コラムチャート)
  • ゲージチャート
  • 散布図(スキャッターチャート)
  • ロウソク足(キャンドルスティックチャート)

「Visualizer」のインストール

管理画面から「Visualizer」を検索してインストールして下さい。
VIsual01

もしくは、下記のサイトからプラグインをダウンロードし、wp-content/pluginsディレクトリにインストールしてください。

visual02

visualizer

「visualizer」の使い方

プラグインをインストールすると、ダッシュボードの「メディア」の下に「Visualizer Library」という項目が表示されます。

visual03

クリックすると下記のような設定画面が表示されますので、「Add New」をクリックし、新しいグラフを作成します。
VIsual04

まずは、グラフの種類を選択してください。選択したら「NEXT」をクリックします。
visual06

今回は標準的な「折れ線グラフ」で作成してみます。下記のような画面が表示されますので、「From Computer」をクリックし、CSVファイルを読み込みます。
visual07

CSVファイルの作成の仕方

では、読み込むためのCSVファイルを作成します。

エクセルでもスプレッドシートでもいいので、データを作成してください。
今回はGoogleスプレッドシートでTCDサイトの月間PV数を表にしてみたいと思います。

下記の用に表を作成しました。

visual07

保存するときは【CSV】ファイルで保存するようにしてください。
スプレッドシートでは、「ファイル」→「形式を指定してダウンロード」→「カンマ区切りの値」より保存してください。
visual08

ただし、このままファイルを読み込むと文字化けや日本語が表示されないということがあります。
そのためテキストエディタなどで「UTF-8」形式に変換ください。

データの読み込み

作成したファイルを「From Computer」をクリックし、読み込みます。
するとこのように表示されます。
visual09

表の設定

続いて、「Advanced」をクリックし、表の設定を行います。
visual10

設定項目は下記のようになっています。
General Settings
一般的な設定
Horizontal Axis Settings
横軸の設定
Vertical Axis Settings
縦軸の設定
Lines Settings
線の設定
Series Settings
系列の設定
Layout & Chart Area
レイアウトの設定

「General Settings」よりまずはタイトルの設定をします。

Titleを入力するとグラフが消えたようになりますが、色の設定がリセットされるためで、カラーを後ほど設定すれば問題ありません。
visual11

お好みでフォントサイズや位置も設定下さい。

続いて、「Horizontal Axis Settings」「Vertical Axis Settings」より、各軸のタイトルの設定をします。

visual12

最後に「Series Settings」より系列のカラーを設定します。

visual13

以上で下記のようなグラフが完成いたしました。
visual14

まとめ

「Visualizer」は、グラフのビジュアルが美しく、グラフ上へマウスカーソルをのせると数値を表示してるなど、高機能なグラフを作成可能です。
CSVファイル(UTF-8)のデータを読み込むため、データを手入力する必要もありません。設定が英語のみで多少戸惑うこともありますが、今回の記事を参考に綺麗なグラフを投稿に表示してみてください。

関連記事

デザインプラス採用サイト
Wordpress使い方大全集

過去アーカイブ