Initial Site

Initial Site

Initial Site

JQueryで作るグラフを探す

  • ドイ  2015/08/19 13:49
6515

少し前ですが、某サービスの実績表を作ることになりました。
フォームで送られてくる売上げ等の数値を色々計算して一覧表にし、
ブラウザ上で閲覧するものです。
そこまではあっさりと出来上がるのですが、グラフも付けて欲しいと依頼を受け、
どうしようかなと悩んだりしました。

 

実績表自体はPHPで作っておりましたが、
グラフを動的に作るってなると、やっぱjavascriptが楽だし便利だよなあ、と。

 

作りたかったグラフは売上げと客数の折れ線グラフです。
縦軸を左右に2つつけて、左に金額、右に人数。
横軸は日付。
その他諸々イメージを固めたところで、素敵なグラフが作れるJS探しを開始しました。
有名どころばかりですが、自分の所感も踏まえて纏めてみました。

 

■chart.jp
・見た目が可愛い
・アニメーションで表示される
・フラットデザインぽい
と、とてもいい感じだなって思ったのですが、複合グラフはつくれないようです。
あきらめ悪く、足りない頭で英語を読みつつ見つけた
こちらで、縦軸2つは可能でした。
ただ、chart.jpの良さがあんまり感じられなくなってしまったような・・・。
といったん保留。

 

■jqplot
以前某アンケート結果をまとめるのに使いました。
発注部署からみやすくて分かりやすくていいねとほめていただいた記憶があります。
あまりJQueryに触れあう機会がなかったので、コンフリクトとか、このときにちゃんと勉強したものです。
調べたら縦軸2つもできそうでした。
しかし、せっかくの機会なので、使ったことの無いもので勉強がてらやりたい。
最終手段はこれにしよう、とこれまたいったん保留。

 

■Highchart
クオリティが高く、綺麗で可愛い。いろんな表現ができそう。
これ使いたい!と思ったら、商用利用は有料のようでした。
社内だけで使うものなのでギリ有りかなとも思ったのですが、ちょっと保留に。

 

■ccchart
調べていくとこちらを使っている方が結構いたのですが、
ダウンロードサイトがなんとなく使いにくくて、ちょっと保留。
こういう目にあうと、サイトの第一印象って大切だなと勉強になります。
(日本語の表記があったりするのはとても助かったのですが)

 
色々検討した結果、今回はGoogle Chart Toolsを使うことにしました。

決め手となったのは複合グラフが比較的簡単に作れたことと、
作り方を調べるのが容易だったこと、という感じです。
あとはgoogleAPIってことでローカルにあれこれファイルを用意しなくてOKな手軽さもいいですね。

 

JQueryはフロントエンジニアさんに任せてしまいがちですので、
もっと勉強していこうと思います。


コメントをどうぞ

技術の記事

  1. 呪文
    実は俺、、、ホイミ使えます。
  2. printscreenFTHG9249_TP_V
    JSON形式でPOSTされたデータの受信方法
  3. stressed-elderly-old-man-using-260nw-307307456
    Eclipse でSVNを使っていたら色々と大変だった話
  4. 少しだけ試行錯誤しつつ…も、簡単にできます
    シネマグラフを作ってみた