HCDコンサルティング(旧・中川勉社会保険労務士事務所FPウェブシュフ)のブログ

表のデータをグラフ化するWordPressプラグイン「WordPress Charts and Graphs Lite」

2013-08-06_1201
エクセルやGoogleドライブのスプレッドシートなどのデータをグラフ化してくれるWordpressプラグイン「Visualizer」を紹介します。@web_shufuはグラフをサイト上にきれいに描画できるツールを探していましたが、最終的にこのプラグインに落ち着きそうです。

インストール・有効化

Visualizerのインストールはとても簡単です。

WordPress管理画面左サイドバーから「プラグイン」⇒「新規追加」と進んで、「WordPress Charts and Graphs Lite」と打ち込み、インストール・有効化します。

9種類のグラフが描ける

Visualizerは9種類のグラフに対応しています。

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

@web_shufuは最初の2つくらいしか使いそうにありませんが、これだけあればグラフを多用する人のニーズにも応えられそうです。

CSVファイルをインポートしてグラフ化

VisualizerのいいところはCSVファイルのインポートでデータ入力を行うところです。

エクセル・Googleドライブスプレッドシートなど、自分が使い慣れた表計算ソフトで入力したデータを簡単にグラフ化できます。

CSVファイルのインポートはWordpress管理画面左サイドバー「メディア」⇒「Visualizer library」から行います。

以下の画面で「Add new」をクリック。
2013-08-06_1126

円グラフのラジオボタンをチェックして「Next」をクリック。
2013-08-06_1128

すると右側に「Upload CSV file」というコーナーが出てきます。PC上のCSVファイルもウェブ上のCSVファイルも自由にアップロードできます。
2013-08-06_1129

データの入力方法とCSVファイルのアップロード方法については開発元が記事を書いてくれています。

[img-link url=”http://web.archive.org/web/20131027133941/http://visualizer.madpixels.net:80/knowledgebase/how-can-i-populate-data-from-google-spreadsheet/” title=”How can I populate data from Google Spreadsheet? – WordPress VisualizerWordPress Visualizer”]

完成したグラフはショートコードで貼り付け

CSVファイルをアップロードした後「Next」を押すと以下の画面になります。「Create Chart」を押します。
2013-08-06_1139

すると以下のようにグラフ貼り付け用のショートコードが表示されます。
2013-08-06_1140

あとは記事中のグラフを表示したい場所にこのショートコードを貼り付けるとOK。こんな感じになります。

[visualizer id=”2266″]

データを多用するブロガーにオススメ

データというのは記事に客観性を与え信用性を増すために必要不可欠ですが、単なる数字の羅列では無味乾燥です。

しかし、グラフ形式でデータを表示することで、ビジュアル要素が加わって一挙に読みやすくなります。

数字にこだわる硬派な記事を沢山書くブロガーさんにVisualiserはとてもオススメです。

なお、データを読みやすくするにはグラフとともに表も重要です。

WordPressの記事中にエクセルやGoogleドライブのスプレッドシートなどのデータで作った表を貼り付けるなら「Table Press」が便利です。

以下の記事を参考に。

[img-link url=”https://webshufu.com/people-without-knowledge-on-html-and-css-can-draw-table-with-tablepress-plugin/” title=”WordPressでテーブル・表を作成するプラグイン7個まとめ|Web Shufu”]


投稿日

カテゴリー:

投稿者:

 最終更新日:

タグ: