1.概要

年表は、年表レイヤ(HuTime.TLineLayer)を使って表示する。年表レイヤはLayerクラスから派生したクラスで、パネルへの配置など、その基本的な使用方法は他のレイヤと同じである。年表の元データは、CSVファイルなどの形で別途与える。元データのどの項目(列)が開始、終了時間で、その項目を表示するかは、年表用のレコードセット(HuTime.TLineRecordset)の中で行う。

2.年表の元データ

csv(カンマ区切りテキスト)やtsv(タブ区切りテキスト)の場合、先頭行がタイトル行となっているファイルを用いるのが容易である。以下は、元データの例で、2015年の台風の一覧である(冒頭部分のみ)。

Number,From,To,Name,PeakWS,PeakAP,Category
1,2015-01-14,2015-01-19,Mekkhala,110,975,1
2,2015-02-08,2015-02-11,Higos,165,940,4
3,2015-03-11,2015-03-17,Bavi,85,990,0
4,2015-03-28,2015-04-05,Maysak,195,910,5
5,2015-04-04,2015-04-04,Haishen,65,998,0
      

3.レイヤオブジェクトの生成

オブジェクトの生成時に、グラフの元データのURLを指定する。レイヤの高さや上下の余白の設定は、他のレイヤと同じである。

コンストラクタ

HuTime.TLineLayer([recordset [, vBreadth [, vMarginTop [, vMarginBottom]]]])

recordset
型:HuTime.TLineRecordset
元データを収容したレコードセット。コンストラクタで設定されたレコードセットは、recordsetsプロパティの先頭の配列要素としてアクセスできる(layer.recordsets[0])。省略した場合は、別途appendRecordsetメソッドによりレコードセットを追加する必要がある。
vBreadth
型:数値
レイヤの高さ(単位:px)。
vMarginTop
型:数値
レイヤの上側の余白の大きさ(単位:px)。
vMarginBottom
型:数値
レイヤの下側の余白の大きさ(単位:px)。

レコードセットの概要

年表用のレコードセットを用いる。

HuTime.CalendarTLineRecordset(source, tBegin, tEnd, label [, calendarId, [, rangeStyle [, labelStyle]]])

source
型:文字列またはHuTime.StreamReaderBase
文字列が入力された場合は、レコードセットの元データのURLとして解釈し、新たなStreamReaderオブジェクトを生成し、データを読み込む。
tBegin
型:文字列または数値
レコード中の開始日時の項目名または列番号。
tEnd
型:文字列または数値
レコード中の終了日時の項目名または列番号。
label
型:文字列または数値
レコード中の年表に表示する文字列の項目名または列番号。
calendarId
型:文字列
開始・終了日時の暦ID。省略した場合は、グレゴリオ暦が設定される。
rangeStyle
型:HuTime.FigureStyle
年表上のレコードの期間を示す帯の書式。省略した場合は、年表レイヤの既定の書式が設定される。
labelStyle
型:HuTime.StringStyle
年表上のレコードのラベルの書式。省略した場合は、年表レイヤの既定の書式が設定される。

4.パネルへの追加と表示

他のレイヤと同様に、年表レイヤもPanelオブジェクトのappendLayerメソッドでパネルに追加する。描画はredrawメソッドのフローに沿って行われるが、元データの取得が完了していない場合は、表示が遅れる。

TLine layer example

年表レイヤの表示の例(下記サンプルコード)。元データは「2.年表の元データ」で示した2015年の台風の一覧である。

サンプルコード実行例はこちら)。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script type="text/javascript" src="http://web.hutime.org/js/HuTime.min.js"></script>
  <title>Sample Code</title>
</head>
<body>
<div id="timeline"></div>
<script type="text/javascript">
    var ht = new HuTime();
    var pnls = new HuTime.PanelCollection(200, 400);
    ht.appendPanelCollection(pnls, document.getElementById("timeline"));
    var pnl = new HuTime.TilePanel(200);
    pnls.appendPanel(pnl);

    var lyr = new HuTime.TLineLayer(
        new HuTime.CalendarTLineRecordset("Typhoon2015.csv", "From", "To", "Name"));
    pnl.appendLayer(lyr);

    ht.redraw(HuTime.timeToJd(2015, 1, 1), HuTime.timeToJd(2016, 1, 1));
</script>
</body>
</html>
      

5.書式設定

年表では、期間を示す帯と、ラベルの書式を設定することができる。年表内の書式はレコードセットごとに設定し、レコードセットのコンストラクタの引数として設定した書式は、そのレコードセット既定の書式となる。以下は、「4.パネルへの追加と表示」のサンプルコードに書式を設定した例である。

TLine layer example

年表レイヤの書式設定の例(下記サンプルコード)。「2.年表の元データ」のサンプルコードで、HuTime.CalendarTLineRecordsetのコンストラクタの引数で書式を設定した例。

サンプルコード実行例はこちら)。HuTime.CalendarTLineRecordsetのコンストラクタの引数calendarIdにはnullが指定されている。また、暦目盛レイヤ(変数:scl)が追加されている。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script type="text/javascript" src="http://web.hutime.org/js/HuTime.min.js"></script>
  <title>Sample Code</title>
</head>
<body>
<div id="timeline"></div>
<script type="text/javascript">
    var ht = new HuTime();
    var pnls = new HuTime.PanelCollection(200, 400);
    ht.appendPanelCollection(pnls, document.getElementById("timeline"));
    var pnl = new HuTime.TilePanel(200);
    pnls.appendPanel(pnl);

    var lyr = new HuTime.TLineLayer(
        new HuTime.CalendarTLineRecordset("Typhoon2015.csv", "From", "To", "Name", null,
            new HuTime.FigureStyle("lime"), new HuTime.StringStyle(20, "red")));
    pnl.appendLayer(lyr);

    var scl = new HuTime.CalendarScaleLayer(50, null, 0);
    pnl.appendLayer(scl);

    ht.redraw(HuTime.timeToJd(2015, 1, 1), HuTime.timeToJd(2016, 1, 1));
</script>
</body>
</html>
      

6.複数のデータセットの表示

appendRecordsetプロパティを用いることにより、年表レイヤにレコードセットを複数設定することができる。各レコードセットで異なる書式を設定することにより、レコードセットの違いを年表上で表現することができる。

appendRecordset(recordset)

年表レイヤにレコードセットを追加する。

recordset
型:HuTime.TLineRecordset
追加するレコードセット。
TLine layer example

年表レイヤに複数のレコードセットを設定した例(下記サンプルコード)。新たに、元データとして、Hurricane2015.csv(2015年のハリケーン一覧)をappendRecordsetメソッドにより追加し、書式(期間の帯は水色、ラベルは赤色)を設定している。

サンプルコード実行例はこちら)。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script type="text/javascript" src="http://web.hutime.org/js/HuTime.min.js"></script>
  <title>Sample Code (TLine Layer Style Setting)</title>
</head>
<body>
<div id="timeline"></div>
<script type="text/javascript">
    var ht = new HuTime();
    var pnls = new HuTime.PanelCollection(200, 400);
    ht.appendPanelCollection(pnls, document.getElementById("timeline"));
    var pnl = new HuTime.TilePanel(200);
    pnls.appendPanel(pnl);

    var lyr = new HuTime.TLineLayer(
        new HuTime.CalendarTLineRecordset("Typhoon2015.csv", "From", "To", "Name"));
    pnl.appendLayer(lyr);

    lyr.appendRecordset(
        new HuTime.CalendarTLineRecordset("Hurricane2015.csv", "From", "To", "Name", null,
            new HuTime.FigureStyle("cyan"), new HuTime.StringStyle(14, "red")));

    var scl = new HuTime.CalendarScaleLayer(50, null, 0);
    pnl.appendLayer(scl);

    ht.redraw(HuTime.timeToJd(2015, 1, 1), HuTime.timeToJd(2016, 1, 1));
</script>
</body>
</html>
      

7.レコードごとの書式設定

年表内のデータを、同一レコードセット内の何らかの項目にしたがって色分けするには、レコードセットオブジェクトのrangeStyleプロパティに色分けのための処理を関数として設定する。設定した関数には、引数としてHuTime.TLineRecordオブジェクトが渡されるので、その内容を使ってHuTime.FigureStyleオブジェクトを返す。

図およびサンプルコードでは、元データにあるデータ項目Categoryが4以上の場合は黄色、3以下の場合は水色で表示する。まず2つの書式をそれぞれ定義する(styleStrongおよびstyleWeak)。次に、レコードセットオブジェクトを別途生成し、データ項目Categoryを読み込むための設定をレコードセットに追加する。最後に、生成したレコードセットのrangeStyleプロパティに書式を出力するための処理を記述する。

TLine layer example

レコードごとの書式を設定した例(下記サンプルコード)。台風のカテゴリが4以上の場合は黄色、3以下の場合は水色で表示している。

サンプルコード実行例はこちら)。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script type="text/javascript" src="http://web.hutime.org/js/HuTime.min.js"></script>
  <title>Sample Code</title>
</head>
<body>
<div id="timeline"></div>
<script type="text/javascript">
    var ht = new HuTime();
    var pnls = new HuTime.PanelCollection(200, 400);
    ht.appendPanelCollection(pnls, document.getElementById("timeline"));
    var pnl = new HuTime.TilePanel(200);
    pnls.appendPanel(pnl);

    var styleStrong = new HuTime.FigureStyle("yellow");
    var styleWeak = new HuTime.FigureStyle("cyan");
    var recordset = new HuTime.CalendarTLineRecordset("Typhoon2015.csv", "From", "To", "Name");
    recordset.recordSettings.appendDataSetting(new HuTime.RecordDataSetting("Category"));
    recordset.rangeStyle = function(record) {
        if (!record.data["Category"])
            return defaultRecordStyle;
        if (record.data["Category"].text >= 4)
            return styleStrong;
        else
            return styleWeak;
    };

    var lyr = new HuTime.TLineLayer(recordset);
    pnl.appendLayer(lyr);

    var scl = new HuTime.CalendarScaleLayer(50, null, 0);
    pnl.appendLayer(scl);

    ht.redraw(HuTime.timeToJd(2015, 1, 1), HuTime.timeToJd(2016, 1, 1));
</script>
</body>
</html>
    

8.レコードに対するイベントの処理

年表上のレコードに対する以下の動作を年表レイヤのイベントとして補足することができる。クリックされたレコードは、イベントオブジェクトのrecordsに配列として収容される。複数のレコードが重なって表示されている場合は、該当するレコード全てがrecordsに収容される。イベントハンドラは、他のイベントと同様にaddEventListenerで追加かする。

動作 イベントタイプ
クリック plotclick
ダブルクリック plotdblclick

以下の例では、年表レイヤにplotclickイベントの処理としてrecordClickを追加している。recordClickをでは、クリックされたレコードのラベルを連結し、ポップアップボックス内に表示する。

サンプルコード実行例はこちら)。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script type="text/javascript" src="http://web.hutime.org/js/HuTime.min.js"></script>
  <title>Sample Code (TLine Layer Style Setting)</title>
</head>
<body>
<div id="timeline"></div>
<script type="text/javascript">
    var ht = new HuTime();
    var pnls = new HuTime.PanelCollection(200, 400);
    ht.appendPanelCollection(pnls, document.getElementById("timeline"));
    var pnl = new HuTime.TilePanel(200);
    pnls.appendPanel(pnl);

    var lyr = new HuTime.TLineLayer(
        new HuTime.CalendarTLineRecordset("Typhoon2015.csv", "From", "To", "Name"));
    lyr.addEventListener("plotclick", recordClick);
    pnl.appendLayer(lyr);

    var scl = new HuTime.CalendarScaleLayer(50, null, 0);
    pnl.appendLayer(scl);

    ht.redraw(HuTime.timeToJd(2015, 1, 1), HuTime.timeToJd(2016, 1, 1));

    function recordClick(ev) {
        var text = "";
        for (var i = 0; i < ev.records.length; ++i) {
            text += ev.records[i].record.data["Name"].text + " ";
        }
        alert(text);
    }
</script>
</body>
</html>
      

マニュアルの目次へ戻る