WordPressのページにグラフを入れたい。
無料のプラグインでおすすめを教えて欲しい!
無料で使える高機能なグラフ作成プラグイン「Visualizer」の使い方を紹介します。Visualizerはシンプルな棒グラフ以外にも、円グラフ、散布図、折れ線グラフなどをページに挿入できます!
【概要】WordPressグラフ・プラグイン「Visualizer」について
VisualizerプラグインはWordPress公式プラグインディレクトリーに公開している無料プラグインです。
次の画像はVisualizerプラグインで作成できるグラフの一覧です。
【基礎知識】Visualizerについて
一部の機能は有料ですが、無料版だけで十分な機能です。
Visualizer | |
---|---|
プラグイン名 | Visualizer: Tables and Charts Manager for WordPress |
価格 | 無料(一部有料) |
開発者 | Themeisle |
日本語対応 | なし |
ダウンロード | WordPress公式ディレクトリー |
作成できるグラフの種類
- 円グラフ
- 散布図
- 折れ線グラフ
- 棒グラフ
- レーダーチャート
- 箱ひげ
- 世界地図
Visualizer公式Youtubeチャンネル
VisualizerのPR動画です。
Visualizerプラグインのインストール方法、Excelデータの読み込みの流れなどが分かります。
英語の音声で日本語字幕はありませんが、使い勝手が伝わります。
Visualizerプラグインの使い方を解説
Visualizerプラグインの使い方をステップごとに解説していきます。
円グラフの作り方
Visualizerは色んなタイプのグラフを作成可能ですが、今回は円グラフを作る方法を紹介します。
Visualizerプラグインを有効化するとダッシュボードのメニュー一覧にVisualizer専用メニューが追加されます。
「Visualizer」→「Add New Chart」をクリック。
任意のグラフタイプを選択するステップです。今回は円グラフを作成します。
「円グラフ(Pie/Donut)」を選択し、ページ下の「Next」をクリック。
グラフのデータを入力するステップです。Visualizerでは次の2つの方法でデータを入力できます。
データの入力方法
- マニュアル(手動での入力)
- CSVファイルの読み込み
マニュアル(手動での入力)
画面右下の「Manual Data」をクリック。
「Text」を「Simple」に変更し「Edit Data」をクリック。
データを手動で入力します。
初期設定で表示されるData Typeは変更せず、「Value」のみ入力。
家賃で8万円、食費で4.5万円~といった家計の出費をデータにしてみました。
データ入力が完了したら次のステップです。
「Show Chart」をクリック。
円グラフが出力されます。
「Create Chart」をクリック。
作成したグラフをページに挿入するステップです。
グラフの左下に表示される「ハサミのアイコン」をクリック。
アイコンをクリックすると「ショートコードがコピー出来た!」というメッセージが表示されます。そのままOKをクリックして進めてください。
グラフを設置したいページを開きます。固定ページでも投稿でもOKです!
先程コピーしたショートコードを貼り付けます。
クラシックエディターの場合
そのままエディター上にショートコードを貼り付ければOK!
ブロックエディターの場合
そのままコピペでOKです。
ページを保存しグラフが表示させるかを確認してください。
以上で作業は完了です。
この例では円グラフを作る方法を解説しました。その他棒グラフやレーダーチャートについても同様の方法で作成できます。
グラフを再編集する方法
一度作成したグラフを再編集する方法を紹介します。
サイドバーの「Visualizer」をクリック。
作成したグラフの一覧が表示されます。
再編集したいグラフにある「ペンのアイコン」をクリック。
編集画面が開きます。任意の編集が可能です。
編集作業が完了したら「Show Chart」をクリックした後、「Save Chart」をクリック。
Excelデータをグラフにする方法
Visualizerプラグインはマイクロソフトの定番ソフト「Excel(エクセル)」で作成したデータをグラフに変換する方法を解説します。
新規にグラフを作成します。
「Add New Chart」からグラフを作成し任意の種類を選択。
読み込み用のCSVファイルをダウンロードします。
CSVファイルは下記画像の赤い印のpie.csv部分です。ちょっと見つけにくいですよね。
「pie.csv」をクリック。
ダウンロードしたCSVファイルにデータを入力します。
CSVファイルはExcelなどのソフトで編集可能です。pie.csvファイルをExcelで開くと次のようなフォーマットになっています。
CSVファイルの編集はExcelでなくてもOKです。PCに標準でインストールされているメモ帳などのテキストエディターで代用可能です。
フォーマットに従いデータを編集し保存。
「ファイルを選択」で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プラグインを紹介しました。
無料なのにめちゃくちゃ高機能なプラグインです。
ぜひ活用してみてください!
- 【3選】WordPress絞り込み検索プラグイン
- 【デメリット有り】WP Rocketプラグインをレビュー|口コミ・評判を調査
- 【高速化ならこれ】爆速プラグイン「WP Rocket」の購入方法
- WordPress無料プラグインの見つけ方
- WordPress絞り込み検索プラグイン「VK Filter Search Pro」の使い方
- 【レビュー】絞り込み検索プラグイン「VK Filter Search Pro」のメリット・デメリット
- 棒・円・チャートなどのグラフを作成できる無料WordPressプラグイン「Visualizer」
- カウントダウンタイマーを設置できる無料プラグイン
- WordPress本体・プラグインをグレードダウンするプラグイン
- カラムブロック・カバーブロックにリンクを設定するプラグイン
- WING Affinger6(アフィンガー6)とSWELLの違いを比較
- THE THOR(ザ・トール)とSWELLの違いを比較
- SWELLと賢威8をレビュー。何が違うの?テーマを比較!
- SWELLとJIN:Rの違いを比較
- SANGOとSWELLの違いを比較
- SWELLとSTREETISTの違いを比較
- CocoonとSWELLの違いを比較。テーマ切り替えのメリット・デメリットを経験者が解説
- DIVERとSWELLの違いを比較【初心者向けのWordPressはどっち?】
- SWELLとEMANON Proの違いを徹底レビュー
- WordPress「SWELL」を徹底比較レビュー|ネットの評判・デメリットも解説
- STORK19とSWELLの違いを比較【それぞれのメリット・デメリットをWeb制作業者が解説します】
- SWELLとHummingbird(ハミングバード)の違いを比較