[JS]便利なのが登場!実装はかなり簡単なのに、さまざまなチャートやグラフを実装できるスクリプト -ApexCharts

チャートやグラフを実装するのは面倒、と思われがちですが、そんな人にはこのスクリプトをお勧めします。

div要素一つと外部ファイルを一つ、あとはグラフのデータを設定するだけで、さまざまなチャートやグラフが簡単に実装できてしまう単体のJavaScriptライブラリを紹介します。
レスポンシブ対応で、アニメーションにも対応、カラー変更やグラデーションやパターンにも対応している優れものです。

サイトのキャプチャ

ApexCharts
ApexCharts -GitHub


ApexChartsの特徴

ApexChartsはシンプルなAPIを使用して、インタラクティブなチャートやビジュアライゼーションを作成するためのモダンJavaScriptのチャート作成ライブラリです。
MITライセンスで、個人でも商用でも無料で利用できます。

ApexChartsの特徴
  • レスポンシブ対応
    デスクトップ・タブレット・スマホのスクリーンに完全対応。クエリを設定することができ、異なる画面サイズに対して異なるレイアウトを提供できます。
  • インタラクティブ
    チャートはインタラクティブで、ズーム、パン、データのスクロールなどに対応しています。
  • ダイナミック
    動的にデータをロードし、チャートを作成できます。
  • ハイパフォーマンス
    ApexChartsは高いパフォーマンスも提供します。
  • アニメーション
    さまざまなアニメーションにも対応しており、設定で簡単に変更できます。
    参考: アニメーションのデモ
  • デザインのカスタマイズ
    カラー変更をはじめ、グラデーション、パターン、シャドウなどチャートにカスタマイズされた外観を与えます。テーマパレットも用意されています。

実装も非常に簡単で、チャートを配置するdiv要素一つと外部ファイル一つ、あとは数行のスクリプトだけで実装できます。

See the Pen Creating your first ApexChart by ApexCharts (@apexcharts) on CodePen.

ApexChartsのデモ

デモでは、ApexChartsで実装できるさまざまなチャートを楽しめます。

サイトのキャプチャ

ApexCharts デモページ

サイトのキャプチャ

Line Charts

各チャートは、実際の動作や実装コードを確認できます。

サイトのキャプチャ

Line Charts: Basic

サイトのキャプチャ

Area Charts

サイトのキャプチャ

Column Charts

サイトのキャプチャ

Bar Charts

サイトのキャプチャ

Mixed Charts

サイトのキャプチャ

Bubble Charts

サイトのキャプチャ

Pie Charts

サイトのキャプチャ

Radial Bar Charts

サイトのキャプチャ

Heatmap Charts

ApexChartsの使い方

Step 1: 外部ファイル

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

Step 2: HTML

チャートを配置する要素を用意します。

Step 3: CSS

CSSではチャートのサイズや配置を定義するだけです。

Step 4: JavaScript

スクリプトでは、チャートのタイプとデータを定義するだけで簡単に実装できます。

これらの記述だけで、下記のチャートを実装できます。

See the Pen Creating your first ApexChart by ApexCharts (@apexcharts) on CodePen.

さらに詳しい情報は、ドキュメントが用意されています。

サイトのキャプチャ

ApexCharts Document

sponsors

top of page

©2024 coliss