タグ

svgとgraphに関するcaretta2のブックマーク (3)

  • Chartist – レスポンシブ対応のSVGグラフライブラリ

    Webは表現力が弱いと言われていますが、特にグラフ周りで苦労することが多いのではないでしょうか。データを単純に一覧表示するのではなく、グラフを用いることでトレンドを知ったり、よりビジュアル的に把握できるようになります。 そこで今回は最新のグラフライブラリ、Chartistを紹介します。SVGで描かれたレスポンシブなグラフライブラリです。 Chartistの使い方 シリーズをJavaScriptの配列で与えるだけ。とても簡単ですね。 ChartistはSVGでグラフを描き、スタイルシートでビジュアルを調整できます。さらにレスポンシブに対応することで幅によってラベルの表示を変更するようになっています。対応ブラウザはIE9以降となっています。 ChartistはJavaScript製のソフトウェア(ライセンスはWTFPL)です。 Chartist - Simple responsive char

    Chartist – レスポンシブ対応のSVGグラフライブラリ
  • スパークラインに対応したJavaScript製のグラフライブラリ·Grafico MOONGIFT

    GraficoはJavaScriptによるグラフライブラリです。棒、折れ線、スパークラインがサポートされています。 Web上でグラフを描くライブラリも充実してきています。Flash、画像など様々な選択肢がありますが今回はGrafico、JavaScriptベースのグラフライブラリを紹介します。 サンプルです。まず棒グラフ。 エリアグラフ。 積み上げ型のエリアグラフ。 こんな複雑な感じにも。 棒グラフ。 積み上げの棒グラフ。 横棒グラフ。 スパークライン。 棒型のスパークライン。 エリア型のスパークライン。 GraficoはPrototype.jsを使ってSVGでグラフを描いています。対応ブラウザはIE6以上、Firefox3以上、Google Chrome、Safari、Operaとなっています。単純に表示する他、マウスを載せた際に説明を出す機能もあります。 GraficoはJavaScr

  • IE6から使えるSVG/VMLを使った高機能JavaScriptグラフライブラリ·Highcharts MOONGIFT

    HighchartsはSVG/VMLを使って描画するJavaScript製のグラフライブラリです。 Webサービスにおいてグラフを使うとデータのインパクトが違います。だからこそ使い勝手の良いグラフライブラリを積極的に使っていくべきです。HighchartsはSVGを基として多様なWebブラウザに対応したグラフライブラリになります。 折れ線グラフです。 Ajaxによるデータロード対応です。 グラデーションをかけることもできます。 滑らかな曲線です。 アイコンを貼付ける例です。 プロットのみで。半透明なドットを使っています。 エリアグラフです。 マイナスの値にも対応しています。 積み上げグラフです。 棒グラフです。 左右比較型の棒グラフです。 複数のデータを並べられます。 棒グラフもマイナス値を出せます。 こんな感じの棒グラフも。 さらにドリルダウン対応です。 HTMLのテーブルからデータを

  • 1