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
    photoshopで簡単な加工からそれなりに綺麗にする方法
  2. pixta_4153512_M
    夏バテ気味のようです。
  3. CropperCapture1
    【ターゲットブランク】target=_blankなのか。target=blankなのか。それとも、target=newなのか。WEB屋のメモ帳
  4. lgi01a201404292200
    プログラマは稼げるのか?

おすすめ記事

  1. ジョブズ4
    人生の点と点をつなげて線にする『自分史』。
  2. スギ花粉
    鼻がムズムズ目がカユカユな花粉症についてまとめてみた
  3. 『テレビ観ないんだよね…』と言うのがかっこいいと思っている人に告ぐ!
  4. 出典:無料壁紙:格闘技がテーマの写真やイラスト画像まとめ(格闘家・ブルースリー)
    ブルース・リーの出身地ってどこだかわかりますか?
  5. 月額課金地獄
    ネットサービスの月額課金地獄沼にハマる方法
  6. ハイビスカス
    ウチナーンチュが沖縄に帰った時に必ず行くお店10選+α
  7. イニシャルサイトコーポレートサイト
    コーポレートサイトをリニューアルしました
  8. なんでもQ
    相談Q&Aサイト「なんでもQ」開発中です!
  9. さんぽすフォトコンペ開催中
    今年もさんぽすフォトコンペ開催しました!

人気の記事

  1. ファミコン
    パズドラ、モンスト、白猫に続く次のゲームは…?
  2. konagaya_20150303
    日常でつい使ってしまう間違えやすい日本語
  3. konagaya20150513
    初心者でも気軽に登れて絶景が見れる山
  4. クロックスの偽物と本物の違い
    クロックスの本物と偽物の違いを比べてみました