[JS]便利なのが登場！実装はかなり簡単なのに、さまざまなチャートやグラフを実装できるスクリプト -ApexCharts
Post on:2018年8月1日
sponsorsr
チャートやグラフを実装するのは面倒、と思われがちですが、そんな人にはこのスクリプトをお勧めします。
div要素一つと外部ファイルを一つ、あとはグラフのデータを設定するだけで、さまざまなチャートやグラフが簡単に実装できてしまう単体のJavaScriptライブラリを紹介します。
レスポンシブ対応で、アニメーションにも対応、カラー変更やグラデーションやパターンにも対応している優れものです。
ApexChartsの特徴
ApexChartsはシンプルなAPIを使用して、インタラクティブなチャートやビジュアライゼーションを作成するためのモダンJavaScriptのチャート作成ライブラリです。
MITライセンスで、個人でも商用でも無料で利用できます。
-
- レスポンシブ対応
- デスクトップ・タブレット・スマホのスクリーンに完全対応。クエリを設定することができ、異なる画面サイズに対して異なるレイアウトを提供できます。
-
- インタラクティブ
- チャートはインタラクティブで、ズーム、パン、データのスクロールなどに対応しています。
-
- ダイナミック
- 動的にデータをロードし、チャートを作成できます。
-
- ハイパフォーマンス
- ApexChartsは高いパフォーマンスも提供します。
-
- アニメーション
- さまざまなアニメーションにも対応しており、設定で簡単に変更できます。
参考: アニメーションのデモ
-
- デザインのカスタマイズ
- カラー変更をはじめ、グラデーション、パターン、シャドウなどチャートにカスタマイズされた外観を与えます。テーマパレットも用意されています。
実装も非常に簡単で、チャートを配置するdiv要素一つと外部ファイル一つ、あとは数行のスクリプトだけで実装できます。
See the Pen Creating your first ApexChart by ApexCharts (@apexcharts) on CodePen.
ApexChartsのデモ
デモでは、ApexChartsで実装できるさまざまなチャートを楽しめます。
各チャートは、実際の動作や実装コードを確認できます。
ApexChartsの使い方
Step 1: 外部ファイル
当スクリプトを外部ファイルとして記述します。
|
1 |
<script src="https://unpkg.com/apexcharts/dist/apexcharts.min.js"></script> |
Step 2: HTML
チャートを配置する要素を用意します。
|
1 |
<div id="chart"></div> |
Step 3: CSS
CSSではチャートのサイズや配置を定義するだけです。
|
1 2 3 4 |
#chart { max-width: 650px; margin: 35px auto; } |
Step 4: JavaScript
スクリプトでは、チャートのタイプとデータを定義するだけで簡単に実装できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
var options = { chart: { type: 'line' }, series: [{ name: 'sales', data: [30,40,35,50,49,60,70,91,125] }], xaxis: { categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999] } } var chart = new ApexCharts(document.querySelector("#chart"), options); chart.render(); |
これらの記述だけで、下記のチャートを実装できます。
See the Pen Creating your first ApexChart by ApexCharts (@apexcharts) on CodePen.
さらに詳しい情報は、ドキュメントが用意されています。
sponsors
