CSVファイルからチャートやグラフがつくれるWordPressプラグイン「M Chart」

WordPressサイトにチャートやグラフを設置できるプラグイン「M Chart」をご紹介いたします。CSVデータを読み込んで、そのままチャート化できます。

このようなチャートをさくっと作成して、投稿記事や固定ページに設置できるプラグインです。

それでは早速みていきましょう。

「M Chart」の機能概要

2023年11月現在、チャート生成系のプラグインの中でも最もインストール数の多いプラグインです。機能概要は以下の通り。

• チャートのデータをCSV形式でインポート/エクスポートできる
• チャートのタイプが豊富
• 管理画面内でチャートをプレビューできる
• カスタム投稿タイプ形式でチャートを管理できる
• ショートコードで任意の箇所に設置できる

管理画面でプレビューできる点と、CSVでデータをインポート/エクスポートできる点は、非常に使い勝手がいいですね。

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

管理画面から「M Chart」を検索してインストールするか、下のボタンからもダウンロード可能です。プラグインファイルを wp-content/pluginsディレクトリにアップした後、管理画面から有効化してください。

M Chart

プラグインのインストールにつきましてはこちらで詳しく解説しています。

チャートのつくり方

以下の手順でチャートやグラフを作成できます。余談ですが、チャートというのは、厳密には円グラフや棒グラフ、折れ線グラフなどを含めた図表の総称のようです。

1. データの設定
2. チャートの設定
3. 埋め込む

データの設定

ダッシュボードの左側に「チャート」という項目が追加されているので、まずは「チャートを追加」を押します。ここでチャートのタイトルを入力して、元となるデータを入力します。

タイトル下部の「ここに翻訳を入力してください」という部分は簡単な説明書きと思っていただければ問題ないです。
例：月別の会員数の推移を表した折れ線グラフです（未入力でも使えます）。

手入力はもちろん、CSVデータでインポートできるのが便利ですね。例えば、このような感じです。

基本的には、項目を縦に並べ、それぞれの右側に値を入力していくといいです。

簡易的な例ですが、MacのnumbersでCSVデータを作成するとしたら、このような感じです。

このデータの設定部分が「M Chart」のもっとも便利な機能のひとつといっていいでしょう。項目と数値が入力してあるCSVデータさえあれば、簡単にチャート化できます。

チャートの設定

データの入力が終わったら、ほぼできたも同然ですが、チャートのデザインを設定していきます。リアルタイムプレビューされるので、つくりやすいです。

↑の項目別に紹介いたします。

チャートのタイプ

タイプやThemeと書いてある部分で、チャートのタイプやデザインを決めます。

シンプルな折れ線グラフ（ライン）のほか、バーや円グラフ、ドーナツ型、レーダー式のチャートまで豊富なパターンから選べます。

Themeを切り替えると、カラーが変更されます。

高さ（サイズ）の設定

高さでは、出力されるチャートのサイズを設定します。ミニマム300pxに制限されているようです。チャートのデザインによって変更してみてましょう。

行/列のどちらでデータを解析するかを選ぶ

「でデータを解析する」という部分では、データをチャートに反映させる際に「行か列」のどちらを基準にするのかを選択できます。

このように横軸でチャートのデータを入力しているのであれば、「行」で解析します。

初期値は「行」になっています。

ラベル・凡例の有無

「Show labels」「凡例を表示」というチェックボックスでは、それぞれの表示/非表示を設定できます。

チャートのタイプで「ライン」などを選択時に表示される「Shared tooltip」ですが、チェックの有無に関わらず、ツールチップに変化がないため用途は不明です。

ツールチップとは、チャートにカーソルを合わせた際に表示される情報です（下記赤枠箇所のことです）。

縦軸・横軸のタイトル・単位

チャートの縦軸、横軸のタイトルと単位を設定します。あらかじめ複数の単位を用意してくれていますが、適当なものが無い場合は「会員数（人）」のようにタイトルに含めてしまえば問題ないです。

チャートのタイプによっては、「Force vertical axis minimum：」という項目が出現し、ここにチャートの最低値を設定できます。

ここまで設定が済んだら、右上にある「公開」を押して完成です。

埋め込む

完成したチャートをページに表示させるには、専用のショートコードを埋め込みます。

ショートコードは、編集画面の下部にあります。これを任意の投稿記事や固定ページにコピペすればチャートが表示されます。

また、M chartで作成したチャートは、画像としてメディアライブラリに保存されます。以下の箇所で、保存される画像を確認できます。

初期設定では自動で画像が生成され、保存されるようになっていますが、不要な方は下記箇所より自動生成を無効化できます。

チャートを作成するたびに、メディアライブラリに画像が増えていくので、特にこだわりが無ければ無効化しておくのがオススメです。

まとめ

いろんなタイプのチャートをCSVデータから生成してくれるWordPressプラグイン「M Chart」をご紹介いたしました。

手入力でもCSVデータでも値を設定しやすくて便利ですね。作成途中のチャートをプレビューできる点も使いやすいと思います。データを元にチャートやグラフをつくりたいときに便利なプラグインです。

ちなみに、ここまで高機能ではありませんが、弊社ではチャートが作成できるWordPressテーマも取り扱っています。

>> WordPressテーマ「Beyond」のチャート生成機能について

また、WordPressプラグインではありませんが、折れ線グラフがつくれる無料ツールもまとめています。ご興味のある方はどうぞご覧ください。