"ng6-o2-chart" D3.js(バージョン4)を利用したAngular6用チャートライブラリ


ng6-o2-chart D3.js(バージョン4)を利用したAngular6用チャートライブラリ

ng6-o2-chartは、TypeScript2によって記述されたd3.js(バージョン4)ベースのAngular6用のチャートライブラリです。

デモページ,
https://ohtsu.github.io/o2-chart/

ライブラリのテストプロジェクト(ライブラリ自体のフルソースを含む),
https://github.com/Ohtsu/Ng6O2ChartTest/

ビデオによる解説ページ(日本語),
https://www.youtube.com/watch?v=PsLDZFqXTGw

ビデオによる解説ページ(英語),
https://www.youtube.com/watch?v=uf5ipN2LJ78

概要
- "ng6-o2-chart"は、d3.js(バージョン4)のラッパーライブラリです。
- 以下の12の基本グラフをサポート

(折れ線グラフ、円グラフ、棒グラフ、散布図、ヒストグラム、積み上げ棒グラフ、世界地図、地球図、ツリー、パックレイアウト,コロプレス、フォース)
  • 軸・目盛り

    必要に応じ、X軸、Y軸及びその目盛りが自動生成されます。値確認用の基準線も自動生成されます。表示・非表示は設定ファイルで行うことができます。

  • レジェンド

    グラフカラーの識別用のレジェンドを自動生成することができます。表示・非表示は設定ファイルで可。

  • アニメーション

    グラフの表示に際し、アニメーションさせることができます。この機能をサポートしているのは、棒グラフ、円グラフ、ヒストグラム、積み上げ棒グラフ,地球図、パックレイアウトです。アニメーションを付加するか否かは、設定ファイルで設定。

なお、デフォルトではアニメーション可の設定となっているので、上記のアニメーション対応グラフすべてが、アニメーションすることになり、マシンによっては反応が遅くなりますので、ご注意ください。 

必要環境

  • node.js
  • typescript2
  • Angular6
  • Angular/cli

ダウンロード方法

 以下のサイトよりダウンロードないしクローンを生成できます。

https://github.com/Ohtsu/ng6-o2-chart-consumer

 git clone を利用する場合は、インストールしたいディレクトリを作成し、そのディレクトリ内でコマンドプロンプトから以下のようにgit cloneを実行します。

- md mydirectory
- cd mydirectory
- git clone https://github.com/Ohtsu/ng6-o2-chart-consumer.git

インストール方法
 インストールには、npmを利用しますので、node.jsをインストールされていない方は、まずnode.jsをインストールしておいてください。
 git cloneを実行すると、"ng6-o2-chart-consumer"というディレクトリが生成されますので、そのディレクトリに入ってから、以下のようにnpmで必要なファイルをインストールします。

  • cd ng6-o2-chart-consumer  (コマンドプロンプト上で実行)
  • npm install

実行方法

 インストールが終了しましたら、以下のようにローカルサーバを起動します。

  • ng serve -o

するとローカルのhttpサーバが起動され、ブラウザが自動的に開きます。開かない場合は、以下のアドレスにアクセスしてください。

正常に起動した場合には、回転する地球図が表示されます。

データ

データには、設定データと統計などのグラフ用データの二種類があります。

  • 設定データ(configData)

このデータは、基本的にすべてのグラフに共通するデータであり、以下の内容が含まれています。

-"index.html"などの中で定義されている「クラス名」。このクラスにより、カラーやフォントの大きさを必要に応じ変更することができます。

-タイトル名 グラフ上部にタイトルを表示したい場合に設定します。

-レジェンド (表示・非表示、位置、サイズ)

-カラー (自動で設定されるカラーの種類数:10または20, 透明度)

-線の形状 (interpolate)

-基準線 (表示・非表示、位置、サイズ)

-マージン (上下左右、グラフ間のマージン)

-X軸Y軸 (左マージン、下マージン)

-アニメーション (使用・不使用, 遅延時間)

 なお、グラフによっては設定できない項目も含まれています。詳しくは、"app.components.ts"ファイル内の"this.configData"を参照してください。

  • グラフ用統計データ(graphData)

それぞれのグラフには、Jsonフォーマットの統計データが必要になります。このデータの形式は、グラフの利用目的の違いから、グラフごとに異なります。
詳しくは"app.components.ts"ファイル内の(グラフ名)DataJsonの内容を参照してください。例えば、折れ線グラフのデータ形式については、"this.lineDataJson"を参照してください。

バージョン

  • ng6-o2-chart : 0.3
  • Angular6 : 6.0.0
  • TypeScript : 2.7.2
  • d3.js : 4.3.0

参考文献

 参考文献等を以下に掲げます。

更新履歴

  • 2018.6.20 ng6-o2-chart version 0.3 uploaded

Copyright

MIT License
copyright 2018 by Shuichi Ohtsu (DigiPub Japan)