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

サイト構築 -JavaScript

Post on:2018年8月1日

ApexChartsの特徴

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

レスポンシブ対応

デスクトップ・タブレット・スマホのスクリーンに完全対応。クエリを設定することができ、異なる画面サイズに対して異なるレイアウトを提供できます。
インタラクティブ

チャートはインタラクティブで、ズーム、パン、データのスクロールなどに対応しています。
ダイナミック

動的にデータをロードし、チャートを作成できます。
ハイパフォーマンス

ApexChartsは高いパフォーマンスも提供します。
アニメーション

さまざまなアニメーションにも対応しており、設定で簡単に変更できます。
参考: アニメーションのデモ
デザインのカスタマイズ

カラー変更をはじめ、グラデーション、パターン、シャドウなどチャートにカスタマイズされた外観を与えます。テーマパレットも用意されています。

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

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

ApexChartsのデモ

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

ApexCharts デモページ

Line Charts

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

ApexChartsの使い方

Step 1: 外部ファイル

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

<script src="https://unpkg.com/apexcharts/dist/apexcharts.min.js"></script>

1	<script src="https://unpkg.com/apexcharts/dist/apexcharts.min.js"></script>

Step 2: HTML

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

<div id="chart"></div>

1	<div id="chart"></div>

Step 3: CSS

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

#chart {
  max-width: 650px;
  margin: 35px auto;
}

#chart {

max-width: 650px;

margin: 35px auto;

}

Step 4: JavaScript

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

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();