トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS

JavaScript/チャート描画

Last-modified: 2016-08-18 (木) 16:18:16 (397d)
Top / JavaScript / チャート描画

JavaScriptで描画する各種チャート雑感

Chart.js

最近知ってあまり試してませんが、一見良さそうです。

良い点

  • デフォルトで落ち着いた色のデザイン
  • アニメで表示される

リンク

ccchart

JavaScript書籍でも有名な高橋 登史朗氏が作成

良い点

  • JavaScriptファイルが1つで導入しやすい
  • サンプルが豊富でカスタマイズしやすい
  • 横軸に基準線を引いたり、複合したチャートを作れる
  • タッチするとポップアップで内容を表示可能(残念ながらドラッグしたときに表示されないので、スマホで少し操作しにくい)
  • タッチするとグラフがフリップして切り替わる表示も可能

悪い点

  • 折れ線、棒グラフ以外のグラフ種類が少ない
  • デフォルトの影などのコントラストが大きい(黒系の背景だとサンプルも多く良さそう、逆に白系の背景は工夫する必要があるかも)

リンク

jqPlot

割りと有名なjQuery上で動くグラフ描画ライブラリ(jQuery Mobileからも使えます)

良い点

  • デフォルトの白系統の背景で、抑え目の色使いが自然
  • グラフをアニメ描画できる

悪い点

  • タッチしてポップアップ表示などは対応してなさそう

Raphael.js

良い点

  • チャート以外でもiPadでタッチ操作可能な各種描画サンプルが豊富
  • カラーピッカーはタッチでとても操作しやすかった
  • ドラッグ可能な相関図も描画可能
  • イージングサンプルも有る

悪い点

  • グラフの機能は他と比べて少ない

-Highcharts JS

とても高機能で使いやすいが有償

良い点

  • 見た目が自然
  • 機能が豊富
  • iPadのドラッグに対応してグラフの値をポップアップ表示可能

悪い点

  • 有償

elycharts

MIT licenseのJavaScriptチャート描画ライブラリ

良い点

  • 描画開始時のアニメ表示可能
  • マウスオーバーで頂点などの情報が表示される
  • タッチするとポップアップで内容を表示可能(残念ながらドラッグしたときに表示されないので、スマホで少し操作しにくい)

悪い点

  • 影などが付いてなく、図がペタっとした印象

JustGauge

半円形のスピードメーターのようなグラフがアニメ付きで描けます。

CanvasJS

polychart.js

D3.js

リンク