[JS]美しい曲線を使ったチャート・グラフが描けるHTML5 Canvasを使ったスクリプト -Flotr2

折れ線グラフ、棒グラフ、パイチャート、バブルチャートなどを美しく描画するHTML5 Canvasを使ったオープンソースのライブラリを紹介します。

サイトのキャプチャ

Flotr2

デモでは、さまざまなチャートやグラフが掲載されています。

デモのキャプチャ

折れ線グラフや棒グラフなど

デモのキャプチャ

パイチャートやバブルチャートなど

デモのキャプチャ

ユーザーの操作が可能なグラフなど

デモのキャプチャ

グラフとデータの切替、グラデーションを使ったグラフなど

それぞれのデモは、データをオンラインで変更することもできます。

デモのキャプチャ

デモ:basic

Flotr2の特徴

Flotr2はHTML5 Canvasを使ったチャートやグラフを描くライブラリで、「Prototype」依存の「flotr」とは異なり単独で動作し、そして多くの改良をしたものです。

  • モバイルのサポート
  • フレームワーク
  • プラグインで拡張可能

対応ブラウザ

  • IE6+
  • Firefox
  • Chrome
  • iOS
  • Android

※IEなどHTML5 Canvas非対応ブラウザでは、「flashcanvas」で描画されます。

top of page

©2017 coliss