こんにちは〜
クリスマスも絶賛出勤している井古田です。
クリスマスは今年もやってくる〜♪ みなさんきっと予定があるんでしょうね・・・
そんな中、今回は「C3.js」について取り上げたいと思います。
D3のラッパーライブラリで、主にチャートに特化したビジュアライゼーションライブラリです。
公式ホームページにいろんなサンプルチャートがあるので、ぜひ見てくださいね( ´ ▽ ` )ノ
使ったみたよ
広告サービスを運用していているのですが、年末だし、ちょろっと売上げだったり、粗利が1年間どんな感じだったのかなぁ〜って気になったりしませんか?右肩上がりなのか下がっているのか・・・笑
1年分のデータをCSVに出力して見ても、いまいち傾向って把握しにくいですよね。
そんな時、C3.jsを使えば簡単にチャートにすることが可能です!! すごい(^O^)
```
month,売上,粗利
2015-12-01,10000,1000
2015-11-01,9000,900
2015-10-01,8000,800
2015-09-01,7000,700
2015-08-01,6000,600
2015-07-01,5000,500
2015-06-01,4000,400
2015-05-01,3000,300
2015-04-01,2000,300
2015-03-01,1000,200
2015-02-01,500,100
2015-01-01,100,50
```
次に、githubからC3.jsをダウンロードします。
今回必要になるファイル
・c3.min.css
・c3.min.js
そして、以下のようなhtmlを用意してください
これで完了です。ブラウザで確認してみましょう!
売上も粗利も右肩上がりですね! これで安心して年を越えられそうです(笑)
※もちろんデータはサンプルです。
Merry Christmas♪
Merry Christmas♪