綺麗なグラフを作成する WordPress プラグイン amCharts のサンプルコード

amcharts v3

ワリと有名な?Visualizer の方が CSV を使って手軽にグラフを作成できるのだけど、両方使用してみて amCharts に決めました。

ということで、棒グラフを使って設定方法をいくつかメモしておきます。

※サンプルコードに閉じタグを付けてないので(デフォルトのコードも全て掲載すると見辛いので)、その辺はよしなにお願いします。カンマとかも気を付けてください。

 amCharts デフォルトの棒グラフ

棒グラフ(Serial)のデフォルトだとこの様な感じになります。ここから弄っていきます。

 サンプル棒グラフ1

こんな感じのグラフの設定をします。

 テーマの変更

Resources に

//www.amcharts.com/lib/3/themes/light.js

を追加し、JavaScript に

  "theme": "light",

を追加

 縦軸と横軸を入れ替える

JavaScript に下記を追加。

  "rotate": true,

縦軸と横軸を簡単に入れ替えられるのは便利だと思いました!

 マウスホバーでホバー位置のグループバルーンを表示

なんて言えば伝わるのか・・・、上記グラフで言うところの縦軸のラベル名をハイライトします。

JavaScript の chartCursor の値を変更します。

  "chartCursor": {
    "categoryBalloonEnabled": true,
    ・・・

 サンプル棒グラフ2

こんな感じのグラフの設定をします。

 マウスホバー位置のメモリ線を表示

JavaScript の chartCursor の値を変更・追加します。

  "chartCursor": {
    "valueLineEnabled": true, //横線
    "cursorAlpha": 1, //縦線
    ・・・

 グラフを 3D 化

JavaScript に下記を追加。

  "depth3D": 25,
  "angle": 35,

 サンプル棒グラフ3

こんな感じのグラフの設定をします。

 常時表示のエリア、ライン

JavaScript の valueAxes(縦軸) , categoryAxis(横軸) に値を追加します。

  "valueAxes": [ {
    "guides": [{
        value: "1988",
        toValue: "1669",
        lineColor: "#CC0000",
        lineAlpha: 1,
        fillAlpha: 0.2,
        fillColor: "#CC0000",
        dashLength: 2,
        inside: true,
        label: "Good job"
    }, {
        value: "1000",
        lineColor: "#CC0000",
        lineAlpha: 1,
        dashLength: 2,
        inside: true,
        label: "下限"
    }],
    ・・・
  "categoryAxis": {
    "guides": [{
        category: "France",
        lineColor: "#CC0000",
        lineAlpha: 1,
        dashLength: 2,
        inside: true,
        labelRotation: 90,
        label: "日本語も配置可能"
    }],
    ・・・

縦軸(value)同様に、横軸(category)にも複数要素を設置可能ですし、エリア指定も可能です。toCategory を設定すればOKです。※キャメルケースなんで注意。JS 使ってる人からすると当たり前かもしれませんが。

 おわり

デモコードはこの辺 JavaScript Charts and Maps Demos | amCharts とか、この辺 Quick Tips Archive – amCharts に沢山載っています。

ただ、ワードプレスプラグイン版で使用できるもの出来ないものがあるっぽいので、一つずつ試していっています。追記予定。

ちなみに、amCharts を使用してみることにした理由ですが、Visualizer も amCharts どちらも ショートコード でグラフを挿入できるので、そこは良いですし、むしろ WordPress のダッシュボード的には Visualizer の方が好み。(グラフをメディア扱いするので)

ただ、簡単な分、細かい設定までいじれなそうだったのでという理由で amCharts にしました。

東京都内で仕事をしています。猫飼いたいです。30歳からピアノ始めたおじさんです。盆栽にも興味が出てきました。
最近ブログ用のTwitterアカウントを作成したので、是非フォローをしてください。@zakkiboooks

 コメントをどうぞ

  • 入力いただいたメールアドレスは公開されませんが、このブログが置いてあるサーバーに保存されます。
  • 入力いただいた情報の他に、WordPress の機能により IPアドレス を取得させていただきます。取得した IPアドレス はスパムコメントの対処ために利用され、公開することはありません。
  • 個人情報などを記入された場合、投稿いただいたコメントを表示しないか、該当箇所を編集して公開する可能性があります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。