概要
今回はタイトルに記載しています通り、Web アプリなどで利用する際にブラウザ上で綺麗なグラフを描画することを可能にしてくれる OSS「Apache EChart」を紹介いたします。
ところで 「Apache」 とは何かみなさんはご存知でしょうか?
「Apache」とは世界的に使用されている著名な Web サーバーソフトの 1 つで、高い性能と優れた動作性などから企業・個人問わず人気があります。
最初のバージョンが公開(1995 年)されてから細かなアップデートを繰り返しながら 20 年以上も使われ続けている歴史のあるソフトになります。
そんな「Apache」が Web アプリで綺麗なグラフ描画 OSS を提供しているので、機能やクオリティは期待できるものになっています!
それでは早速こちらの「Apache EChart」について詳しく見ていきましょう。
特徴
Apache EChart は無料で強力なグラフ作成及び視覚化ライブラリとして有名で、高度にユーザーがカスタマイズ可能なグラフを簡単に追加することができます。
JavaScript で記述されているため使いやすく、商用利用としても利用することが大きな特徴ですね。
ホームページには以下のような特徴が記載されていますので、こちらでも紹介します。
- 柔軟で豊富なグラフタイプ
- 強力なレンダリングエンジン
- データ分析機能
- 綺麗なビジュアルデザイン
- デフォルトのデザインは視覚化の原則に従い、レスポンシブ デザインをサポートします。柔軟な構成により、カスタマイズが容易になります。
- 健全なコミュニティ
- アクセシビリティフレンドリー
- 自動的に生成されるチャートの説明とデカールのパターンは、障害のあるユーザーがチャートの内容とストーリーを理解するのに役立ちます。
より詳しく知りたい場合は、以下の公式サイトをご覧になってください。
利用手順
Apache EChart を利用するには、以下 3 通りあります。
公式サイトから
以下の公式サイトからダウンロードできます。
NPM 経由から
以下のコマンドで各 JavaScript アプリにインストールできます。
npm install echarts --save
CDN 経由から
以下を参考に CDN から利用できます。
使用感
今回は Apache EChart のサンプル集が綺麗に纏まっていたので、そちらから紹介します。
先に見せた画像では線グラフですが、線グラフだけでもさまざまなグラフを描画することができそうですね!
さらにこちらのグラフを描画するためのソースコード(JavaScript/TypeScript)も紹介されていますので、こちらをコピーして利用することで綺麗なグラフを描画できます。
線グラフ以外にもさまざまなグラフも描画できそうなため、作成したいグラフがきっと見つかりますね。
まとめ
今回は Web アプリなどで利用する際にブラウザ上で綺麗なグラフを描画することを可能にしてくれる OSS「Apache EChart」をご紹介しました。
本記事執筆時点のバージョンは v5.4.0 のため、安定的に開発も進められていますため、これからも安心して使用できますね。
JavaScript/TypeScript で Web アプリを開発されている方で綺麗なグラフを描画したいと考えている方は、ぜひ一度こちらの Apach EChart の利用をご検討されて見てはいかがでしょうか。