Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

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

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

npmによるライブラリ・インストール解説ページ,
https://github.com/ohtsu/o2-chart-lib-consumer/

ビデオによる解説ページ(日本語),
https://youtu.be/PB6-U4uK8bo

ビデオによる解説ページ(英語),
https://youtu.be/fRQ0qrNm-To

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

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

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

  • レジェンド

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

  • アニメーション

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

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

必要環境

  • node.js
  • typescript2
  • Angular5
  • Angular-cli

ダウンロード方法

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

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

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

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

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

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

実行方法

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

  • ng serve

するとローカルのhttpサーバが起動されますので、ブラウザから以下のアドレスにアクセスし、サンプルプログラムを起動します。

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

データ

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

  • 設定データ(configData)

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

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

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

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

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

-線の形状 (interpolate)

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

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

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

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

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

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

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

バージョン

  • o2-chart-lib : 1.0
  • Angular5 : 5.2.0
  • TypeScript : 2.5.3
  • d3.js : 4.3.0

参考文献

 本ツールを作成するにあたり、大変参考になった文献等を以下に掲げます。

更新履歴

  • 2016.3.11 version 1.0 uploaded (旧名 "o2d3ng2")
  • 2016.11.23 version 2.0 uploaded ("o2-chart"に名称変更)
  • 2018.3.5 o2-chart-lib version 1.0 uploaded

Copyright

MIT License
copyright 2018 by Shuichi Ohtsu (DigiPub Japan)

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away