[JS]スマホに最適化された優れもの!さまざまなチャートやグラフを実装できるCanvasベースのライブラリ -F2

チャートやグラフは、さまざまなスマホアプリで見かけます。
スマホのデバイスに対してデザイン、インタラクション、パフォーマンスに最適化されたチャートやグラフを実装するHTML5 Canvasベースのライブラリを紹介します。

Node.js、React Nativeなどに互換性もあり、50種類以上のチャートやグラフを簡単に利用できます。

スマホ向けチャートライブラリ「F2」

F2
F2 -GitHub

F2の特徴

F2の特徴
  • スマホ向けのデザイン
    デザインはスマホに最適化されており、軽快なインタラクションでデータをより自然に表示します。
  • スマホに最適化されたパフォーマンス
    軽量で、素晴らしいレンダリングのパフォーマンスを実現。
  • 互換性
    HTML5のCanvasベースで実装されており、Node.js、React Nativeで実行することもできます。
  • ライセンス
    MITライセンスで、個人でも商用でも無料で利用できます。

F2のデモ

まずはスマホのアプリでよく見かける、美しいデザインと楽しいインタラクションを備えたデモから。

チャートやグラフのデモ

Steps Records

チャートやグラフのデモ

Starts Cards

チャートやグラフのデモ

Analytics Chart

チャートやグラフのデモ

Dashboard

チャートやグラフのデモ

Pyramid Chart

チャートやグラフのデモ

Chart Transition

チャートやグラフのデモ

Fitness Ring

チャートやグラフのデモ

Heart Rate

通常のチャートやグラフも用意されています。

チャートやグラフのデモ

Bar Chart

チャートやグラフのデモ

Pie Chart

チャートやグラフのデモ

Line Chart

チャートやグラフのデモ

Percent Stack Bar

チャートやグラフのデモ

Radar Chart

チャートやグラフのデモ

Point Scatter Chart

チャートやグラフのデモ

Bubble Chart

チャートやグラフのデモ

Axis Circle Grid

F2の使い方

Step 1: 外部ファイル

当スクリプトを外部ファイルとして記述します。

Step 2: HTML

チャートやグラフを配置するCanvas要素を記述します。

Step 3: JavaScript

使用するチャートやグラフ、サイズなどを定義します。

データは、下記のようになります。

sponsors

top of page

©2024 coliss