【ワンランク上のブログを目指す!】WordPressの記事にチャートをつけるなら、amChartsがおススメ!

仕事

およそ1年間投資を続けデータが蓄積されてきたため、投資履歴のチャートを追加することにしました。

どのような形でチャートを作るか検討した結果、amChartsを使うことに決めました。

調べてみたところWordPressでamChartsが使われている記事をあまり見かけないことや、初心者向けのamCharts導入記事も少ないように感じたので記事にすることにしました。

まだamChartsをご存じない方や、WordPressでは使ったことがないという方に読んでいただけると嬉しいです。

ブログにチャートを入れる時、どうしてる?

投資関連の記事を書いていらっしゃる皆さん、ブログ記事にチャートを掲載するとき、どのようにされていますか?

多くの人はExcelなどでチャートを作っておいて、それを貼り付けていらっしゃるのではないでしょうか?

私はこの1年、チャートを掲載するほどのデータが揃っていなかったので、まだそういうこともしていなかったのですが、そろそろ投資履歴などがわかるチャートを掲載していこうと考えていました。

手っ取り早いのは上述のようにExcelなんかを使ってチャートを貼り付けることなんですが、次のような理由からできればJavaScriptの力を借りたチャートを使いたいなぁと思っていました。

  • 手間
  • レスポンシブル対応が微妙
  • インタラクティブ・機能性に乏しい:チャートの値などを読み取ったりできない

WordPressのプラグインということではなく、JavaScriptのチャート描画ライブラリとしては無料のもの有料のもの様々あります。

私が知っているのはamChartsも含めて次の5つくらいです。

  • amCharts
  • Chart.js
  • Highcharts
  • D3.js
  • C3.js

amCharts以外は、描画した時の見た目、使い勝手や入手できる情報量に基づいて何年か前に比較検討したのですがあまり興味をそそられず、きちんと使ったことはありません。

ちなみに、この記事を書くにあたってチャート描画ライブラリって他にないかなぁと思い確認していたところ、Google Chartsというものもあることを知りました。機会ががあれば、一度使ってみたいなぁと思っています。

おススメはやっぱりamCharts!

前項で書いたとおり、使うべきチャート描画ライブラリをどれにするのか検討したのですが、次のような理由からamChartsにしました。

  • 何と言ってもキレイでカッコいいチャートが作れる
  • 描画できるチャートのバリエーションが多い
  • 公式サイトのデモを見て学習すれば様々なチャートをすぐに作れそう

まだ公式サイトをご覧になったことのない人は是非一度見ていただければと思います。

「こんなのできるの?」というチャートがいろいろと見られますよ。

JavaScript Charts & Maps - amCharts
JavaScript charts and maps data-viz libraries for web, dashboards, and applications. Fast and flexible. React/Angular compatible. Since 2006.

トップページのアニメーションもamChartsのライブラリを使って作られているのが、すごいです。

ただしamChartsのライセンス料は高いんだよね

私的にはお気に入りのamChartsですが、一つだけ難があるんです。

それはライセンス料が高いということ。

特に個人や個人事業主レベルで使うには少々お高いんですよね(笑)

購入するライセンスの種類にもよるのですが、単一サイトでちょろっと使うだけで$ 180。

「ライブラリだけで20,000 円かぁ・・・」

と考えてしまうレベル。SaaSとか再配布できるソフトで使うと、一気に10倍近いお値段になるので要注意です(^^;

実はamChartsはライセンスを購入しなくても使えちゃうんです(笑)

ただ、↑の図に答えを書いてしまっているのですが、実はライセンスを購入せず、無料でも使えるんです。

それは、amChartsの公式サイトからライブラリをダウンロードしてきてそのまま使うだけ。ただしこの場合、左下にamChartsのロゴが表示されます。

個人ブログなどでチャートを表示するためだけなら何ら問題ないと思います。

そう考えると無料で使えると思って差し支えないかもしれませんね(笑)

amChartsのWordPressプラグインも出てた!

そんなamChartsですが、以前(数年前)は確かWordPressのプラグインはなかったと認識しています。(JavaScriptのライブラリだけの提供だったかと)

このブログを開始した時にタイミングを見てチャートを掲載したいと思っていたのですが、その時にもプラグインは見当たらなくて、「どうしようかな」と思っていたんです。

それが、今回改めて調べてみたらamChartsの公式からプラグインが提供されていてビックリ。

少し使ってみたところ、非常に簡単に使える代物だったので、是非皆さんにも紹介したいと考え記事にしたというわけです。

WordPressプラグインを使えば簡単にamChartsを使える♪

前項でも書きましたとおりamChartsのWordPressプラグインは結構簡単に使えます♪

もちろん多少JavaScriptの知識は必要になりますが、それほど凝ったことをしないのであればテンプレート的にコピペして使えるのでかなりお手軽だと思います。(テンプレートの中のデータを変えればOKという感じです)

以下ではインストールから実際にどのように使うのかを簡単に説明したいと思います。

最初にプラグインをインストール

何はともあれ最初にamChartsのプラグインをインストールしましょう。

amChartsの公式プラグインは下のような感じです。

「amCharts」で検索すれば表示されると思います。「作者」が「amCharts」になっているところがチェックポイントですね。

インストールが終わったら右上の「有効」ボタンをクリックして有効化してください。(これは、他のプラグインと同じですね)

WordPressの管理画面に項目が追加される

プラグインが有効化されると、管理画面内に2か所「Charts&Maps」という項目が追加されます。

一つは「固定ページ」の下あたりにパイチャートのアイコンと共に表示されます。

もう一つは「設定」の中に追加されます。さしあたり「設定」の中にある項目は表示させる必要はありません。

パイチャートのアイコンが付いている方の項目をクリック

チャートを作成する時は、パイチャートのアイコンが付いている方の「Charts&Maps」をクリックしてください。

すると、次の画面のような表示になります。チャートを作成して登録していくと、この画面に作成したチャートが表示されるようになります。

チャートを作成する場合は「Add New」をクリックするか、左側にずらっと表示されている「+XY」、「+Pie」などをクリックしてください。

チャートの作成画面はこんな感じ

チャート作成画面は↓のような感じになります。

「タイトルを追加」の部分は、自分が登録したチャートの概要を判別するために適宜つけてください。

その下にある「Resources」は作成するチャートに応じて適宜必要になるファイルを登録するのですが、最初の内は例題に書いてあるとおり登録しておけばよいと思います。(登録は「Select a resource」と書かれたコンボボックスから必要なファイルを選んで「Add」ボタンをクリックするだけです)

この画面を表示させるとき、管理画面の左側に書かれた「+XY」や「+Pie」をクリックすると、それぞれに対応したチャートのデフォルト(テンプレートと思えばよいと思います)が①と②に入力された状態になります。

ですので、新しくチャートを作る時はデフォルトが入力された状態で↓の画面を表示させ、②JavaScriptの部分を適宜編集すると簡単にチャートを作成できます。

JavaScriptを編集し終えたら、プレビューしてみましょう

↑の画面では①HTMLはほとんど編集する必要はありません。

②JavaScriptの編集を終えたら、一度思ったとおりのチャートになっているかどうかを確かめてみましょう。プレビューボタンをクリックしてください。

チャートが完成したら、公開

チャートが完成したら、一般の記事と同じように「公開」ボタンを押して、記事で参照できるようにしましょう。

公開したチャートはショートコードで表示

当該のチャートを表示させるためのショートコードは次のような形式になります。

[amcharts id="スラグ"]

「スラグ」と書いた部分に、↑の画面の③の部分に設定した文字列を入れてください。

この例の場合、画像では見えにくいですが、③部分に「xy-1」と入力されています。

そのため[amcharts id="xy-1"]になります。

これをコピーして記事本文に貼り付ければその部分にチャートが表示されます。

チャート編集画面での注意事項:WAFの設定でハマらないように!

チャートの登録作業自体はそれほど難しくありません。

しかし、一点ハマりそうなのがWAF(Web Application Firewall)の設定。

お使いのレンタルサーバーによって設定はかわりますが、恐らく多くのレンタルサーバーではデフォルトでWAFがONになっていると思います。

もしも、チャートを編集して、保存したりプレビューボタンをクリックしたりした際に

「403 エラー」

「指定されたページ(URL)へのアクセスは禁止されています。」

などというメッセージが表示されて画面の表示ができない場合は、WAFがONになったままの可能性が高いです。

WAFというのは、誤解を恐れず簡単に言うと不正なプログラムが動かされないようにするため、WordPressからJavaScriptなどを直接動かせないようブロックする機能の様です。

一度WordPressのDB上に保存されれば、WAFがONでも動作するのですが、保存前のプログラムでプレビュー段階の内容ははじかれてしまうみたいです。

そのため、チャートを編集・保存する際にはWAFを一端OFFにしておく必要があります。

ただし、WAFがOFFの状態はセキュリティ強度は下がった状態になるはずですので、作業が終わったら確実にWAFをONに戻すことをお忘れなく。(→これは自己責任でお願いします(^^;)

投資関連記事で使えそうなamChartsのコード例

参考までに投資関連の記事で使えそうなamChartsのコード例を紹介しておきますね。

ここでご紹介するコードはamChartsの公式サイトのチュートリアルやデモとして公開されているコードを基に改変したものです。

Chart Types – amCharts 4 Documentation

資産の推移を表すチャートの例

実用的と思われる例は少しずつ増やしていきたいと思いますが、まずは毎月の預金と投資額をプロットする例を掲載します。

データを変更する場合は、chart.dataの内容を適宜変更すればOKです。

「+XY」でXYチャートの新規作成画面を表示させ、「Resources」の中に以下の1つを追加してください。(チャートを作るうえで必須というものではないのですが、あくまでもサンプルということで)

  • //www.amcharts.com/lib/4/themes/animated.js

その後で、↓のコードをJavaScriptの中に貼り付けてください。(最初に入っていたJavaScriptの内容は全て削除して、↓のコードを貼り付けてください)

↑のコードを実行すると↓のようなチャートを表示させることができます。

「Resources」にファイルを追加するのをお忘れなく。

資産クラスをまとめた円グラフの例

資産クラスをまとめた円グラフの例を以下に示します。自分の持つ資産の何パーセントが現金で、何パーセントが株式資産かがわかるような円グラフですね。

手順は次のとおりです。

  1. 「Charts&Maps」の下にある「+ Pie」をクリックして、パイチャートを作る画面を表示させます。
  2. タイトルを適宜入力します。
  3. JavaScriptの欄に入っているデフォルトの内容を全て消し、代わりに↓の内容を貼り付け、保存します。
  4. 保存できたら、公開します。
  5. 公開が完了したら、チャートを掲載する記事の中で適宜「[amcharts id="****"]」を貼り付けましょう。(「****」の中は、作成したチャートのslugです)

chart.dataの後を適宜変更すれば、データを変更できます。金額だけなら、valueの右側の値を編集します。

金や不動産がある場合は、次の塊を増やせばOKです。

, {

“assetclass”: “金”,

“value”: 10000

}

増やす際、先頭の「カンマ(,)」を忘れずに。

データの塊と塊を区切るためのカンマなので。

ポートフォリオをまとめたツリーマップの例

投資している株式のポートフォリオをまとめたツリーマップの例を以下に示します。

私の例になるので、あまりよくないかもしれませんが(^^;、個別株をやっていらっしゃる方は有用かも。

手順は次のとおりです。

  1. 「Charts&Maps」の下にある「+ Treemap」をクリックして、ツリーマップを作る画面を表示させます。
  2. タイトルを適宜入力します。
  3. JavaScriptの欄に入っているデフォルトの内容を全て消し、代わりに↓の内容を貼り付け、保存します。
  4. 保存できたら、公開します。
  5. 公開が完了したら、チャートを掲載する記事の中で適宜「[amcharts id="****"]」を貼り付けましょう。(「****」の中は、作成したチャートのslugです)

栄養素のレーダーチャートの例

ほっともっとの新メニュー紹介記事の中で、カロリーやタンパク質などの栄養素を公式サイトから引用して掲載しています。

この栄養素をレーダーチャートにプロットする例をご紹介します。

手順は次のとおりです。

  1. 「Charts&Maps」の下にある「+ Radar」をクリックして、レーダーチャートを作る画面を表示させます。
  2. タイトルを適宜入力します。
  3. JavaScriptの欄に入っているデフォルトの内容を全て消し、代わりに↓の内容を貼り付け、保存します。
  4. 保存できたら、公開します。
  5. 公開が完了したら、チャートを掲載する記事の中で適宜「[amcharts id="****"]」を貼り付けましょう。(「****」の中は、作成したチャートのslugです)

↑のレーダーチャートだと、「食物繊維」の部分がツールチップを隠しているのが残念ですが、例ということであまり調整はしませんでした。(ツールチップの位置は調整可能です)

あと、データはツールチップに表示させるために「lavelval」と「unit」というデータを追加しています。プロットさせているデータは「value」です。

レーダーチャートの見方については、別途記事にもしたので、そちらもご参考ください。

投資とは関係ないけどバブルチャートの例も(笑)

amChartsを使うと、手が込んでそうなチャートを簡単に作ることができます。

もちろん、慣れるまで時間は必要ですが、amCharts公式サイトで多くのデモが公開されているので、それらを参考にするとJavaScriptに慣れていなくてもある程度のチャートを作れるでしょう。

ちょっと手の込んでいるバブルチャートも作れてしまうという例をご紹介します。こちらは投資とは関係なのですが、デモということで(^^;

ポイントは、次の点です。

  • ツールチップに画像を表示
  • データ構造の中に参照する画像のファイル名を入れておく

こうすることで、バブルチャートをポイントすると、そのポイントの情報と共に該当する画像をツールチップ上に表示させることができます。

手順は次のとおりです。

  1. 「Charts&Maps」の下にある「+ XY」をクリックして、レーダーチャートを作る画面を表示させます。
  2. タイトルを適宜入力します。
  3. JavaScriptの欄に入っているデフォルトの内容を全て消し、代わりに↓の内容を貼り付け、保存します。(後述するように、URLとファイル名の部分については適宜変更してください
  4. 保存できたら、公開します。
  5. 公開が完了したら、チャートを掲載する記事の中で適宜「[amcharts id="****"]」を貼り付けましょう。(「****」の中は、作成したチャートのslugです)

↓のコードはものすごく長いですが、半分以上はデータです(^^;

注意点は、bullet.tooltipHTMLに代入している部分(24行目)、imgタグの参照先を適当なURLにしていただくことと、各データのURLの部分(画像ファイルのファイル名にあたります)を適当な名前にすることです。

DBからデータを出すにはPHPでコードを書くしかないのか?

以上のようにamChartsのプラグインを使えば予めデータを作っておいて、そのショートコードを記事に張り付けることでチャートを簡単に掲載することができます。

上記の例では、データをJavaScriptのコードに埋め込んでいたわけですが、実用的に考えるとこれじゃぁダメですよね(^^;

やっぱりDBからデータを引き出してチャートを作るようにしないと。

この記事を執筆している時点で私もそのやり方がわからなかったということと、このブログの性質上、その必要性がないに等しいため、深堀しませんでした。

恐らく、DBへの問い合わせとデータの授受はPHPでソースを書くしかないと思います。

もしできるようになって、かつ需要がありそうなら改めて記事にしたいと思っています。

恐らく、投資系のブログで資産の運用状況をチャートで示すだけなら、JavaScriptにデータを決め打ちで入れておくやり方でもほぼほぼ問題ないと思います。

ご参考になれば幸いです。

まとめ

WordPressでamChartsを使う方法を紹介しました。

ご紹介したとおり一度チャートの下地を作ってしまえば、あとはデータを定期的に追加していくだけなので、本当に簡単に使えていいですよね。

amChartsはアップルやマイクロソフトなんかも利用している強力なチャートライブラリで、動きのあるキレイなチャートが作れのがいいですよね。

ブログ記事にExcelなどからチャートを貼り付けている方で、少しグレードアップしたいなぁという方は是非ともチャレンジしてみてほしいと思います。

タイトルとURLをコピーしました