ITエンジニア/デザイナ向けにオープンソースを毎日紹介

世の中の大抵の物事は時間軸に沿って進められます。歴史はもちろんのこと、プロジェクト管理においてもガントチャートのような時間軸のグラフを使って表現されます。過去の振り返りも未来の予測も時間がキーになってきます。

そういったデータを表現できるライブラリが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

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2