綺麗なグラフを作成する WordPress プラグイン amCharts のサンプルコード
ワリと有名な?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 にしました。