Timesheet.js - ガントチャートにも使えそうなHTML5/CSS3製のタイムシートグラフ
世の中の大抵の物事は時間軸に沿って進められます。歴史はもちろんのこと、プロジェクト管理においてもガントチャートのような時間軸のグラフを使って表現されます。過去の振り返りも未来の予測も時間がキーになってきます。 そういったデータを表現できるライブラリがTimesheet.jsです。特徴的なのはCSS3で作成されている点にあるでしょう。
Timesheet.jsの使い方
JavaScriptは次のようになります。
new Timesheet('timesheet', 2002, 2013, [
['2002', '09/2002', 'A freaking awesome time', 'lorem'],
['06/2002', '09/2003', 'Some great memories', 'ipsum'],
:
['09/2008', '06/2010', 'FRINGE #1 & #2', 'ipsum']
]);
このように記述することで、
<div id='timesheet'></div>
にタイムシートのグラフが表現されます。
HTML5/CSS3ベースなので、表示については自由にカスタマイズができそうです。大きなグラフとしてはもちろん、文書内に埋め込むのもさほど難しくないでしょう。効果的に使ってみたいですね。
Timesheet.jsはJavaScript/CSS3製のオープンソース・ソフトウェア(MIT License)です。
- 2014/09/09:ライセンス修正
Timesheet.js - Open time tables with HTML, JavaScript and CSS … semu/timesheet.js