フリーランス チャレンジ!!

フリーランス チャレンジ!!

現役フリーランスエンジニアが書く雑記ブログ

HTML、AngularJSで簡単にガントチャートが作成できるAngular Gantt

スポンサーリンク

スポンサーリンク

f:id:ksakae1216:20161212213227p:plain

ガントチャートを作成できるライブラリAngular Ganttライブラリをご紹介します。

 

 

ガントチャートが簡単に作成出来るライブラリ

あのAngularJsに「Angular Gantt」というライブラリがあり、このライブラリをつかうと簡単にガントチャートが作成できる。

www.angular-gantt.com

 

日本語の情報がぜんぜんないのでデモサイトをみると何ができるかピンとくると思う。

www.angular-gantt.com

 

スケジュールに引かれた線を移動したり、伸ばしたり、縮めたりと色んなことができます。

 

使い方

下記サイトで結構丁寧に紹介されています。

blog.htmlhifive.com

 

簡単に説明すると、ライブラリ(jsファイル)を導入してAngular Ganttが動くようなコードをかけばOKです!

 

下記にサンプルのHTMLとJSの内容と動く画面を確認することができます。

angular-gantt current date demo https://github.com/Schweigi/angular-gantt/issues/84 - Plunker

 

Angular GanttのデモをシンプルにしてGit公開します

習うより慣れろって感じでAngular Ganttのデモから不要な部分を削除しシンプルにガントチャートだけのページを作成、Gitに公開しました。

www.ksakae1216.com

 

最後に

ライブラリを使うことで難しいことも簡単にできるようになります。

 

このAngular GanttはデータがJSON形式なのでJSONの扱いに慣れちゃえば難しくないですね!!