ソフトウェア開発者のための OSS、まとめてみました!

ソフトウェア開発を行なっている自分が、個人的に面白いと思ったプログラムの最新技術や、オープンソースソフトウェア(OSS)をまとめています!

MENU

Web アプリで綺麗なグラフを描画したいなら!「Apache EChart」

概要

今回はタイトルに記載しています通り、Web アプリなどで利用する際にブラウザ上で綺麗なグラフを描画することを可能にしてくれる OSSApache EChart」を紹介いたします。

ところで 「Apache」 とは何かみなさんはご存知でしょうか?

Apache」とは世界的に使用されている著名な Web サーバーソフトの 1 つで、高い性能と優れた動作性などから企業・個人問わず人気があります。

最初のバージョンが公開(1995 年)されてから細かなアップデートを繰り返しながら 20 年以上も使われ続けている歴史のあるソフトになります。

そんな「Apache」が Web アプリで綺麗なグラフ描画 OSS を提供しているので、機能やクオリティは期待できるものになっています!

それでは早速こちらの「Apache EChart」について詳しく見ていきましょう。

特徴

Apache EChart は無料で強力なグラフ作成及び視覚化ライブラリとして有名で、高度にユーザーがカスタマイズ可能なグラフを簡単に追加することができます。

JavaScript で記述されているため使いやすく、商用利用としても利用することが大きな特徴ですね。

ホームページには以下のような特徴が記載されていますので、こちらでも紹介します。

  • 柔軟で豊富なグラフタイプ
    • Apache ECharts には、すぐに使用できる 20 を超えるチャート タイプと、12 のコンポーネントが用意されており、それぞれを任意に組み合わせて使用​​できます。
  • 強力なレンダリングエンジン
  • データ分析機能
    • フィルタリング、クラスタリング、回帰などのデータ変換をサポートするデータセットを使用してデータを管理し、同じデータの多次元分析の分析に役立てます。
  • 綺麗なビジュアルデザイン
    • デフォルトのデザインは視覚化の原則に従い、レスポンシブ デザインをサポートします。柔軟な構成により、カスタマイズが容易になります。
  • 健全なコミュニティ
    • アクティブなオープン ソース コミュニティは、プロジェクトの健全な開発を保証し、豊富なサードパーティ拡張機能に貢献しています。
  • アクセシビリティフレンドリー
    • 自動的に生成されるチャートの説明とデカールのパターンは、障害のあるユーザーがチャートの内容とストーリーを理解するのに役立ちます。

より詳しく知りたい場合は、以下の公式サイトをご覧になってください。

echarts.apache.org

利用手順

Apache EChart を利用するには、以下 3 通りあります。

公式サイトから

以下の公式サイトからダウンロードできます。

echarts.apache.org

NPM 経由から

以下のコマンドで各 JavaScript アプリにインストールできます。

npm install echarts --save

CDN 経由から

以下を参考に CDN から利用できます。

使用感

今回は Apache EChart のサンプル集が綺麗に纏まっていたので、そちらから紹介します。

echarts.apache.org

先に見せた画像では線グラフですが、線グラフだけでもさまざまなグラフを描画することができそうですね!

さらにこちらのグラフを描画するためのソースコードJavaScript/TypeScript)も紹介されていますので、こちらをコピーして利用することで綺麗なグラフを描画できます。

線グラフ以外にもさまざまなグラフも描画できそうなため、作成したいグラフがきっと見つかりますね。

まとめ

今回は Web アプリなどで利用する際にブラウザ上で綺麗なグラフを描画することを可能にしてくれる OSSApache EChart」をご紹介しました。

本記事執筆時点のバージョンは v5.4.0 のため、安定的に開発も進められていますため、これからも安心して使用できますね。

JavaScript/TypeScript で Web アプリを開発されている方で綺麗なグラフを描画したいと考えている方は、ぜひ一度こちらの Apach EChart の利用をご検討されて見てはいかがでしょうか。

ライセンス

Apache License 2.0

リンク

github.com

echarts.apache.org

echarts.apache.org