[JS]スマホに最適化された優れもの！さまざまなチャートやグラフを実装できるCanvasベースのライブラリ -F2
Post on:2018年8月31日
sponsors
チャートやグラフは、さまざまなスマホアプリで見かけます。
スマホのデバイスに対してデザイン、インタラクション、パフォーマンスに最適化されたチャートやグラフを実装するHTML5 Canvasベースのライブラリを紹介します。
Node.js、React Nativeなどに互換性もあり、50種類以上のチャートやグラフを簡単に利用できます。
F2の特徴
-
- スマホ向けのデザイン
- デザインはスマホに最適化されており、軽快なインタラクションでデータをより自然に表示します。
-
- スマホに最適化されたパフォーマンス
- 軽量で、素晴らしいレンダリングのパフォーマンスを実現。
-
- 互換性
- HTML5のCanvasベースで実装されており、Node.js、React Nativeで実行することもできます。
-
- ライセンス
- MITライセンスで、個人でも商用でも無料で利用できます。
F2のデモ
まずはスマホのアプリでよく見かける、美しいデザインと楽しいインタラクションを備えたデモから。
通常のチャートやグラフも用意されています。
F2の使い方
Step 1: 外部ファイル
当スクリプトを外部ファイルとして記述します。
|
1 |
<script src="https://gw.alipayobjects.com/os/antv/assets/f2/3.2.0/f2.js"></script> |
Step 2: HTML
チャートやグラフを配置するCanvas要素を記述します。
|
1 |
<canvas id="myChart"></canvas> |
Step 3: JavaScript
使用するチャートやグラフ、サイズなどを定義します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
// Any of the following formats may be used, just choose one! const chart = new F2.Chart({ id: 'myChart', // pass node's id width: 375, height: 260, pixelRatio: window.devicePixelRatio }); const chart = new F2.Chart({ el: document.getElementById('myChart'), // or pass node width: 375, height: 260, pixelRatio: window.devicePixelRatio }); const chart = new F2.Chart({ context: document.getElementById('myChart').getContext('2d'), // or pass 2d context of the canvas width: 375, height: 260, pixelRatio: window.devicePixelRatio }); |
データは、下記のようになります。
|
1 2 3 4 5 6 7 8 9 |
const data = [ { genre: 'Sports', sold: 275 }, { genre: 'Strategy', sold: 115 }, { genre: 'Action', sold: 120 }, { genre: 'Shooter', sold: 350 }, { genre: 'Other', sold: 150 }, ]; chart.source(data); // load the data |
sponsors
