WordPress　グラフ作成・表示のプラグイン「M Chart」が良いです

2017年4月13日2021年5月11日プラグイン

本来、このブログで扱う記事内容では無いのですが、素直に感動したプラグインがあったので紹介します。折れ線グラフや棒グラフなどを記事内に表示するプラグインは多くありますが、大概外部からCSVのデータを読み込ませて表示します。しかしこのプラグイン、WordPressの記事作成時にセル入力が可能で、記事作成のみで完結出来る事が非常に魅力です。

※バージョン1.7から別途「M Chart Highcharts Library」のインストールも必要になっています（記事最後に追記しています）。

グラフ作成、表示プラグイン「M Chart」

プラグインは「M Chart」です。日本語にはまだ対応していませんが、難しい語句はないので問題は無いと思います。このプラグインで作成したグラフの記事は以下の記事です。

2017年12月、横棒タイプのグラフを使用して記事を書きました。

作成したグラフはWordPressの記事作成時にデータ入力しました。CSVの読み込みはしていませんが、出来ない訳ではありません。CSVでのインポートやエクスポートも可能です。また外部ソースのURLの指定も可能です。「M Chart」のプラグインページは以下です。

2019年11月追記

M-chartプラグインが日本語にも対応しました（設定、グラフ記事作成とも）。一部英語表記もありますが、だいぶ分かり易くなったと思います。

プラグインの様子

プラグイン検索で「M Chart」を検索、インストールと有効化すると左メニューに「Charts」という項目が出来ます。「Add Chart」でグラフ用記事を作成しますが、他の記事と違い作成するグラフの専用記事といった感じで、作成した記事を「公開」してもブログに表示される事はありません。

「Add Chart」でグラフの新規作成を始めると以下の画面になります。

エクセルのような表が表示され、セルに数値を入力出来ます。入力を行っていくと下にグラフのプレビューも表示されます。

2017年12月追記　上記画面で「1行A列」に何も記載せず、1行B列に「燃費」と記載しています。グラフは1行目から記載すると上手く表示されず、2行目からの記載で表示されました。1行B列の「燃費」はグラフ線の名称になり、カーソールやタッチで触れると表示されます。複数のグラフ線を描く時には必要かと思います。

グラフの種類も棒グラフ、円グラフなどがありますが、あまり凝った演出は出来ない様です。

Typeでグラフの種類、Themeで色、Heightはグラフの「画像」高さです。Parse date inはセルの入力方向（？）で、今回は下方向に数値を書いていきましたが横方向へデータがある時にはここでcolumns（列）かrows（行）の選択が出来ます。また縦、横の名前を付けますがその横のUnitsで単位が選択できます。別途設定も可能ですが、名前で書いてしまっても良いような・・・。

完成したグラフはショートコードで別記事に貼る事が出来ます。さらに画像として保存して貼る事も可能です。ショートコードで貼る時は設定のEmbedsのチェックを入れると、貼り付ける記事内にさらにフレームで「グラフ記事全体」が表示されます。グラフのみであればチェックは不要です。

「M Chart」の魅力

このプラグインの魅力は何といっても記事作成でセル入力が出来る事。CSVも読み込めますし面倒であれば、エクセルなどから列や行をコピーして貼り付ける事も出来ます。また後からデータを足したい時もM Chartの記事編集でセルに追加するだけなので、いちいちCSVファイルで更新する必要がありません。私の様に燃費記録を付けるにはピッタリです。

気が付いた点について幾つか。上記Embedsの設定は記事毎には出来ない様です。またセル内のデータに抜けがあるとデータが前詰めになってX、Yでズレが発生するようです。デザインの種類を含めて、今後に期待です。

2017年5月16日追記

グラフの記事を作成して投稿（更新を含む）すると、そのグラフの画像が自動的にライブラリーに保存されます。私はコードで別記事に貼っているので画像は不要なのですが、「画像を保存しない」という設定が無いのですね。頻繁にグラフの記事から数値を追加して更新する場合は、画像が溜まっていくので削除が面倒かもしれません。外部からCSVなどでデータを読む場合は記事自体は更新しないので画像は保存されないと思います。

2017年6月18日追記

大事な事を書いていませんでした。スマホでも問題無く表示出来ます。タッチすればそのポイントのデータもホップアップで表示されます。

2017年7月17日追記

5月16日に追記した内容ですが、「画像を保存しない」設定はありました。左メニューの「Chats」から「settings」で、Performanceの「No Images」にチェックを入れるとグラフ画像は作成されなくなります。さらにグラフ記事作成中のプレビューも無効に出来る様です。

2018年8月5日追記

先日、「M Chart」が1.7にバージョンアップされましたがプラグイン自体の仕組みが変わった様で、新たに「M Chart Highcharts Library」のインストールが必要になっています。これまでバージョン1.7以前の「M Chart」を使用している場合は、1.7にアップデートするとグラフは表示出来なくなります。ただし「M Chart」で作成したグラフ記事自体は残っているので、データが消えている訳ではありません。

「M Chart」を1.7にアップデートすると、上記の様に「M Chart Highcharts Library」が必要という通知が出ました。Libraryをインストールしないまま「M Chart」でのグラフ記事やシュートコードを貼った記事を見てみると、プラグインエラーを示す文字列が大量に表示されました。

「M Chart」の設定ページを見てみても、上記の様に項目がほとんど表示されません。

Libraryは「M Chart Highcharts Library」のページ内からダウンロードする様に案内されています。上記で記載されている箇所のリンクをクリックして「Plugin.zip」をダウンロードします。WordPressのプラグインページで「新規追加」から「Plugin.zip」をアップロードします。

インストールされた「M Chart Highcharts Library」プラグインを有効化します。

再び「M Chart」の設定ページにある「Library」で「Highcharts」を選択してセーブを行うと、バージョン1.7以前と同じ様に設定の項目が表示され、グラフ記事やショートコードを貼った記事でのグラフ表示が可能となりました。グラフ記事やショートコードを貼った記事自体の修正は必要ありません。

「M Chart」のプラグインページでは1.7へのアップデート前にLibraryをインストールする様に書かれています。私はこれに気が付かず、先に「M Chart」を1.7にアップデートしてしまいました。後からLibraryをインストールして設定画面の「Library」で「Highcharts」を選択し、セーブを行った際にプラグインエラーを示す表示が出てしまいました。ただ改めて設定画面を開くとそれ以降はエラーは表示されずに、グラフなども表示されています。何か問題が出て1度「M Chart」自体を削除する場合は、グラフ記事で作成したデータのバックアップを行っておいた方が良いと思います。

またこれまで作成してあったグラフ記事に「Highcharts」というタグが付加されていました。私は不要なのでタグ一覧から削除しました。※この「Highcharts」タグはグラフ記事に追記等を行って更新しても、改めてタグが付いてしまいます。ちょっと面倒です。

2021年5月11日追記

「M Chart」が1.8、「M Chart Highcharts Library」が1.1にバージョンアップされました。今回はLibraryのデフォルトである「chart.js」側に色々機能が加わった為のアップデートの様に見えます。これまで「chart.js」側にはあまり機能が無く、その代わりとして「Highcharts」を利用する形でしたが、「chart.js」でも様々なグラフの種類やテーマの使用が可能となっています。

元々は「chart.js」だけだった「M Chart」でしたが、一時期「chart.js」の機能がかなり無くなってしまい、その為の「M Chart Highcharts Library」でしたが、「chart.js」で再び機能が増えてくれば、いずれ「M Chart Highcharts Library」は不要になるのかもしれません。

1.8では「Show Library～」にチェックを入れると、チャート記事一覧にどちらのライブラリーを使用しているかの項目が表示される様になります。またグラフ画像を作成する場合の大きさも変更出来る様になりました。

※以降はM-chart本体、及びLibraryのアップデート（更新）で発生した不具合状況（私の場合）を書いています。現状で問題の無い場合は読み飛ばして下さい。また現在のM-chart本体、Libraryでは解決されている問題もあります。

2018年8月21日追記

M-Chartのバージョンが「1.7.1」になりましたが、バージョンアップを行うと「M Chart Highcharts Library」のPHPに関するエラー文字列が表示されてしまい、その後のWordPress管理画面での操作が出来なくなってしまいました。仕方が無いのでサーバーから直接M-Chartのプラグインをフォルダごと削除した所、管理画面は通常状態になりました。新しいバージョンに不具合があるのかと思い、それまでの「1.7」を再度インストールし直しましたが、結局LibraryのPHPエラーが同じ様に表示されてしまい、復旧出来ませんでした。Libraryの方のバージョンアップは現状（1.0）行われていません。

8月5日追記の時に、「先にLibraryをインストールしてからM-Chartをアップデート」をしておらず、その時にもエラーが表示されていたので、1度M-ChartとLibraryの両方を削除しました。そして先にLibraryをインストールして有効化し、その後M-Chartの「1.7」をインストールしてみると今回はエラー表示もなく完了しました。グラフの記事やデータもそのまま残っています。また先の「1.7.1」へのアップデート時はLibraryは有効化したまま行ったので、今度はLibraryのプラグインを停止させてからM-Chartを改めて「1.7.1」に更新し、再びLibraryを有効化すると、エラー表示も無く完了しました。更新時はLibraryを停止させた方が良い様ですが、また次のバージョンでどうなるか分からないので、覚えておく必要がありそうです。また今回を機にグラフデータはバックアップを取っておきました（エクセルへのコピペですが）。

なお古いバージョンのプラグインを入手するには、各プラグインページの「Download」ボタンにリンクされているアドレスの、バージョン表記を該当するバージョンにすればダウンロード出来ます。M-Chartの「1.7」であれば「https://downloads.wordpress.org/plugin/m-chart.1.7.zip」です。

・・・上記の修正を行ってから「サイト内検索」でグラフ用記事の題名に含まれる語句で検索すると、そのグラフ用記事も検索結果に出ていました（通常の記事一覧やサイトマップには出ていません）。以前までは検索でもグラフ用記事については出なかったと思っていましたが、1.7へのバージョンアップで変わってしまったのでしょうか？私の場合、車の燃費記事などを書いていますが、グラフ用記事の題名も「燃費」を含んでいるので、検索で題名がヒットしてしまいます。とりあえず題名を関連しない語句にしてしまえば良いかと思っています。

2018年8月26日追記

M-chartとM Chart Highcharts Libraryがそれぞれバージョン1.7.2と1.1として、WordPressの更新ページに表示されました。先週の事もあったので念の為、先にLibraryを停止させてからLibraryを更新、続けてM-chart本体の更新を行いました。どちらの更新もエラー表示などなく完了し、Libraryを改めて有効にしても問題は出ませんでした。ただしLibraryの方はバージョンアップ後のバージョン表記が「1.0」のままです。また今回のアップデート内容にアップデート時の問題に関わる様な修正は無い様です。やはり個別の問題でしょうか。

2018年8月29日追記

WordPressの更新ページにM-chartのバージョン1.7.3と、26日に「1.1」に更新した後もバージョン表記が「1.0」のままだったLibraryは改めて「1.1」の更新があるという表示がされました。26日同様にLibraryを停止させた後、今回は間違えてM-chart本体も停止させてしまいました。その後はLibraryを更新して有効化すると以前の様にエラー表示・・・。仕方が無いのでまたサーバーからプラグインのLibraryフォルダーごと削除し、先にM-chart本体を更新して有効化、その後「M Chart Highcharts Library」からLibraryのファイルをダウンロードしてWordPressに新規インストール、有効化しました。どうもインストールや更新の順番によってエラーが出てしまい、ちょっと面倒です。

「M Chart Highcharts Library」のサイトでこの問題も認識されている様で、プラグイン作者さんも次のバージョンで修正されると書いています。・・・今回がそのバージョンでは無い？直ってないから次ですよね。

• 新規インストール時はLibraryを先にインストールして有効化、その後M-chart本体をインストールして有効化。
• 更新時はLibraryを停止させて更新、M-chart本体は有効のまま更新。その後Libraryを有効化。

一応、備忘録。でも毎回何かちょっと違う気がします。

2018年9月22日追記

本日、M-chart本体が「1.7.4」、Libraryが「1.2」への更新がありました。毎回更新の度に問題が出ていたのですが、今回はこの問題は修正されている事を期待して、M-chart本体とLibraryのプラグインは両方有効にしたまま、さらにWordPressの更新ページで両方同時にチェックを入れて更新してみました。結果は問題無く更新出来ました。ただし新規インストール時は先にLibraryのインストールと有効化を行い、後からM-chart本体のインストールと有効化を行う手順がプラグインのHPに記載されています。

またグラフ記事を更新すると勝手に追加されていた「Highcharts」タグは、今回のバージョンで追加されなくなり、以前の状態に戻りました。ただしサイト内検索でグラフ用記事の題名に含まれる語句を検索すると、検索結果にそのグラフ用記事も出てしまうのは変わっていません。

※2018年11月2日、M-chart本体のみ「1.7.5」への更新がありました。本体とLibraryの両方を有効にしたままの更新でも問題はありませんでした。もう安心して良さそうです。

2018年9月27日追記

本日、M-chartの作者様からメールを頂きました。バージョン1.7からの変更に伴い、問題があったお詫びと現在何か他に問題があれば連絡して下さいとの事。正直、作者さんから直接連絡が来るとは思いませんでした。なんと丁寧な方でしょうか。

There is no problem now.
I use it very conveniently.
Thank you.

日本語のWebページで通じているのかな？

2019年8月28日追記

久しぶりにM-chartとLibraryの更新がありました。2つ同時にプラグイン更新を行うと、WordPressの「update.php」にエラーがあると表示されてしまいました。その後プラグイン一覧を確認すると、Libraryの方は更新によって最新の「1.0.4」がインストールされたのですが、同じく「1.0.4」のアップデートがあるという表示が引き続き出ていました。もう一度そのまま更新してみましたが状況は変わらず。このままでもグラフ記事は正しく表示されていましたが、一旦Libraryを停止して削除し、GitHubのHighcharts libraryページからダウンロードした「plugin.zip」を手動でインストール（プラグインの新規追加→アップロード）を行って有効化すると、「1.0.4」が正しくインストールされ、同じ「1.0.4」へのアップデートの表示は無くなりました。私だけの環境かもしれませんが、一応追記しておきます。

2019年8月30日追記

解決したと思った上記のLibrary「1.0.4」への更新ですが、再びアップデートの表示が出てしまい解決していませんでした。仕方が無いのでM-chart本体とLibrary両方のプラグインを一旦削除し、過去（2018年8月29日追記）の新規インストールの方法で再びインストールしてみましたが（その他色々なパターンでも）、やはり「1.0.4」へのアップデートの表示が出てしまいます。現状、グラフの表示等に問題は無いのでこのまましばらく放置する事にしました。今回はPHPのエラー表示で管理画面が操作出来ないという状態にはなっていません。

2019年9月8日追記

WordPressが「5.2.3」に自動更新され、その後再びLibraryを更新してみると、同じ「1.0.4」へのアップデート表示は出なくなりました。WordPressの更新時にプラグインの再確認が行われたのか、どちらかの不具合が修正されたのか仕組みは分かりませんが、とりあえず問題は解消された様子です。

2019年11月13日追記

M-chart「1.7.8」とLibrary「1.0.5」への更新がありました。今回も特にプラグインの停止等は行わずに2つ同時に更新を行いましたが、今の所は問題は出ていません。ちょうどWordPress自体も「5.3」へのアップデートが来ているのですが、こちらはさすがに少し様子を見てからにしようと思っています。　→その後更新しました。問題は無い様子です。

2020年8月17日追記

現在、M-chartの記事作成（グラフ作成）のプレビューが上記の様に正しく表示されません。ただし記事を開いてプレビューが表示される最初の一瞬だけは正しいグラフが見えます。またショートコードでグラフを別記事内に表示させた場合は、これまで通りに正しいグラフです（下記）。

気が付いた直前ではWordPressが5.5に更新され、使用しているテーマも合わせて更新されました。これまでもテーマは頻繁に更新されているので、WordPressの更新に伴う問題の様な気がしますが、M-chartは最近あまり更新されていません。

実際にグラフを使用する（表示する）記事側には問題は無いので、このまま様子を見ます。　→その後すぐにM-chart1.7.10とLibrary1.0.6への更新がありました。プレビューも正しく表示される様になりました。直らない場合はブラウザのキャッシュ削除を行うと良いかもしれません。