amCharts のグラフをアニメーションさせるサンプル for WordPress Plugin

By ゆいちょん On 2016/05/09 Last updated 2016/11/13 0

この記事は投稿されてから１年以上経っています。内容が古くなっているかもしれませんので、ご注意ください。

ワードプレスのグラフを描画するプラグイン amCharts がとても良い感じで使ってみてる。

一個前のエントリでサンプルの棒グラフをいくつか作ったけど、オンライングラフエディターがあるから、これ使えばちょいと複雑なグラフでも簡単に作成できることが分かった。
–>Online Chart Maker | amCharts

設定方法ワザワザ読み解いたけど、オンラインディターで作成したグラフを、プラグイン内に貼り付けるのが簡単ですねこれ。

ただ、オンラインディターではアニメーションの設定がなかったので、忘れないように一応メモしておいた。

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

点線が流れるようにアニメーションする折れ線グラフ

Javascript に下記を追加。

　　"addClassNames": true,

　　"graphs": [
　　　　{
　　　　　　"id": "g1",
　　　　　　・・・

graphs にクラス名を追加してあげて、CSS を指定するって流れ。

HTML に下記を追加。

<style type="text/css">
.amcharts-graph-g1 .amcharts-graph-stroke {
  stroke-dasharray: 8px, 5px;
  -webkit-animation: css-effect 1s linear infinite;
  animation: css-effect 1s linear infinite;
}

@-webkit-keyframes css-effect {
  100% {
    stroke-dashoffset: -13px;
  }
}
@keyframes css-effect {
  100% {
    stroke-dashoffset: -13px;
  }
}
</style>

元：Chart CSS: Moving dashed line

実線が描かれていくアニメーションの折れ線グラフ

基本的に1個前の設定は同じで、CSS を下記に書き換えると、左端から線が描かれていきます。

<style type="text/css">
.amcharts-graph-g1 .amcharts-graph-stroke {
  stroke-dasharray: 500%;
  -webkit-animation: css-effect 40s ease-out forwards;
  animation: css-effect 40s ease-out forwards;
}

@-webkit-keyframes css-effect {
  0% {
    stroke-dashoffset: 500%;
  }
  100% {
    stroke-dashoffset: 0%;
  }
}
@keyframes css-effect {
  0% {
    stroke-dashoffset: 500%;
  }
  100% {
    stroke-dashoffset: 0%;
  }
}
</style>

点線が流れるようにアニメーションする CSS と同じページに置くとバッティングした・・・

元：Chart CSS: Incrementally drawn line

プロットした点（bullet）が点滅するグラフ

このアニメーションもなかなか使い勝手が良さそうです。

　　"addClassNames": true,

graphs　に　classNameField　というのを追加

　　"graphs": [
　　　　{
　　　　　　"classNameField": "bulletClass",
　　　　　　・・・

点滅させたいデータ（bullet）に、クラス名を与えてあげます。

　　"dataProvider": [
　　　　{
　　　　　　"bulletClass": "lastBullet",
　　　　　　・・・

こんな感じで。

そして、HTML に下記 CSS を追加してあげると、lastBullet　というクラス名を付与した点（bullet）が点滅するかと思います。

<style type="text/css">
.lastBullet {
  -webkit-animation: am-pulsating 1s ease-out infinite;
  animation: am-pulsating 1s ease-out infinite;
}
@-webkit-keyframes am-pulsating {
  0% {
    stroke-opacity: 1;
    stroke-width: 0px;
  }
  100% {
    stroke-opacity: 0;
    stroke-width: 50px;
  }
}
@keyframes am-pulsating {
  0% {
    stroke-opacity: 1;
    stroke-width: 0px;
  }
  100% {
    stroke-opacity: 0;
    stroke-width: 50px;
  }
}
</style>

参考にしたページのクラス名が last ってなってたからそのまま使ったけど、最後の点以外にも使えるので変えた方が気持ち悪くないですね。

元：CSS animations – Tutorial | amCharts

終わり

HTML とか JavaScript とか言ってるのは、プラグインの入力フィールドのことですからね！！

あと、amCharts オンラインディターには、データインポート機能がある様子なので、Visualizer に劣る部分が少し認識改まりました。というか、劣るなんて言ったら失礼ですね。無料でここまでできる amCharts は凄いと思いました。

Plugin WordPress