【Excel対応】WordPressグラフ・プラグイン「Visualizer」の使い方|棒グラフ・円グラフ・レーダーチャートも簡単に作れる!

JIN:Rで絞り込み検索をつける場合の注意点
初心者

WordPressのページにグラフを入れたい。
無料のプラグインでおすすめを教えて欲しい!

無料で使える高機能なグラフ作成プラグイン「Visualizerの使い方を紹介します。Visualizerはシンプルな棒グラフ以外にも、円グラフ、散布図、折れ線グラフなどをページに挿入できます!

目次

【概要】WordPressグラフ・プラグイン「Visualizer」について

VisualizerプラグインはWordPress公式プラグインディレクトリーに公開している無料プラグインです。

次の画像はVisualizerプラグインで作成できるグラフの一覧です。

Visualizerのグラフ
Visualizerプラグインのグラフ一覧

【基礎知識】Visualizerについて

一部の機能は有料ですが、無料版だけで十分な機能です。

Visualizer
プラグイン名Visualizer: Tables and Charts Manager for WordPress
価格無料(一部有料)
開発者Themeisle
日本語対応なし
ダウンロードWordPress公式ディレクトリー
WordPressグラフ作成プラグイン

一部機能はVisualizer PROという名称の有料パッケージのみで利用できます。
個人ユーザーは7ドル(約800円)です。
Visualizer PRO販売サイト

作成できるグラフの種類

  • 円グラフ
  • 散布図
  • 折れ線グラフ
  • 棒グラフ
  • レーダーチャート
  • 箱ひげ
  • 世界地図

Visualizer公式Youtubeチャンネル

VisualizerのPR動画です。

英語のみです。

Visualizerプラグインのインストール方法、Excelデータの読み込みの流れなどが分かります。

かんた

英語の音声で日本語字幕はありませんが、使い勝手が伝わります。

Visualizerプラグインの使い方を解説

Visualizerプラグインの使い方を解説

Visualizerプラグインの使い方をステップごとに解説していきます。

無料版の解説です。

円グラフの作り方

Visualizerは色んなタイプのグラフを作成可能ですが、今回は円グラフを作る方法を紹介します。

STEP
管理メニューを開く

Visualizerプラグインを有効化するとダッシュボードのメニュー一覧にVisualizer専用メニューが追加されます。

Visualizer」→「Add New Chart」をクリック。

グラフを新規作成
STEP
グラフの種類を選ぶ

任意のグラフタイプを選択するステップです。今回は円グラフを作成します。

円グラフ(Pie/Donut)」を選択し、ページ下の「Next」をクリック。

グラフの種類を選択する画面
STEP
データの入力方法

グラフのデータを入力するステップです。Visualizerでは次の2つの方法でデータを入力できます。

データの入力方法

  1. マニュアル(手動での入力)
  2. CSVファイルの読み込み

マニュアル(手動での入力)

画面右下の「Manual Data」をクリック。

手動でデータを入力する

Text」を「Simple」に変更し「Edit Data」をクリック。

入力モードをSimpleに変更

データを手動で入力します。

初期設定で表示されるData Typeは変更せず、「Value」のみ入力。

家賃で8万円、食費で4.5万円~といった家計の出費をデータにしてみました。

数字に「,」は不要です。数値だけを入力しましょう。

データ入力が完了したら次のステップです。

Show Chart」をクリック。

show Chartをクリックでグラフを作成

円グラフが出力されます。

Create Chart」をクリック。

データを修正したい場合は再び「Edit Data」をクリックすると先程の編集画面に戻ります。

STEP
ページにグラフを挿入する

作成したグラフをページに挿入するステップです。

グラフの左下に表示される「ハサミのアイコン」をクリック。

グラフを固定ページに挿入するステップ

アイコンをクリックすると「ショートコードがコピー出来た!」というメッセージが表示されます。そのままOKをクリックして進めてください。

グラフを設置したいページを開きます。固定ページでも投稿でもOKです!

先程コピーしたショートコードを貼り付けます。

クラシックエディターの場合

そのままエディター上にショートコードを貼り付ければOK!

グラフ出力用のショートコードをクラシックエディターに貼り付ける

ブロックエディターの場合

そのままコピペでOKです。

ブロックエディターのショートコード

ページを保存しグラフが表示させるかを確認してください。

かんた

以上で作業は完了です。

この例では円グラフを作る方法を解説しました。その他棒グラフやレーダーチャートについても同様の方法で作成できます。

グラフを再編集する方法

一度作成したグラフを再編集する方法を紹介します。

サイドバーの「Visualizer」をクリック。

グラフを再編集

作成したグラフの一覧が表示されます。

再編集したいグラフにある「ペンのアイコン」をクリック。

グラフの一覧が表示される

編集画面が開きます。任意の編集が可能です。

編集作業が完了したら「Show Chart」をクリックした後、「Save Chart」をクリック。

Show Chartをクリックしないとデータが保存されない仕様です。

Excelデータをグラフにする方法

Visualizerプラグインはマイクロソフトの定番ソフト「Excel(エクセル)」で作成したデータをグラフに変換する方法を解説します。

STEP
新規にグラフを作る

新規にグラフを作成します。

Add New Chart」からグラフを作成し任意の種類を選択。

グラフを新規に作る
グラフを新規に作る

この例では「円グラフ」を選択して進めていきます。

STEP
CSVファイルをダウンロードする

読み込み用のCSVファイルをダウンロードします。

CSVファイルは下記画像の赤い印のpie.csv部分です。ちょっと見つけにくいですよね。

pie.csv」をクリック。

STEP
CSVファイルを編集する

ダウンロードしたCSVファイルにデータを入力します。

CSVファイルはExcelなどのソフトで編集可能です。pie.csvファイルをExcelで開くと次のようなフォーマットになっています。

pie.csvフォーマットのサンプル

CSVファイルの編集はExcelでなくてもOKです。PCに標準でインストールされているメモ帳などのテキストエディターで代用可能です。

フォーマットに従いデータを編集し保存。

入力したサンプル

文字化け防止のため、文字コードをUTF-8(BOM付き)で保存。

ファイルを選択」でpie.csvを選択した後、「Import」をクリック。

以上の作業でCSVデータの読み込みは完了です。

グラフのデザインを調整する方法

グラフのデザインを調整するオプションを紹介します。

グラフの編集画面に移動後、「Settings」タブをクリック。

グラフのデザインオプション

「円グラフ」の例でオプションを紹介します。

General Settings

グラフ全般の設定オプションです。

オプション

  • グラフタイトルのフォントカラー
  • フォントサイズ
  • フォントの位置
  • フォントの向き

Pie Settings

円グラフ固有のオプションです。

オプション

  • 3Dの有無
  • グラフに表示する内容
  • スタートアングル
  • ボーダーの色

Slices Settings

Valueごとに個別の設定ができます。

オプション

  • スライスの色(valu)
  • 中心地からのオフセット(0.1~1.0)

Chart Size & Placement

グラフの大きさを調整するオプション。

オプション

  • グラフのサイズ(heightとwidthの設定)

Frontend Actions

一覧ページに表示した場合のオプションです。

オプション

  • 表示するオプションの制限

複数のユーザーで管理している場合に有効なオプション。

まとめ

WordPress記事にグラフを挿入できるvisualizerプラグインを紹介しました。

無料なのにめちゃくちゃ高機能なプラグインです。

ぜひ活用してみてください!

よかったらシェアしてね!
  • URLをコピーしました!
目次