１．概要
パネルは、1つ以上のレイヤを収容し、各種情報を表現する基本単位である。たとえば、データを表示するレイヤ、目盛を表示するレイヤ、タイトルを表示するレイヤを1つのパネル上で組み合わせることにより、データおよび必要な情報をまとめた表現が可能となる。一般に用いるパネルは、パネルコレクション内で積み重ねて表示するタイルパネル（HuTime.TilePanel）である。
２．オブジェクトの生成
コンストラクタ
HuTime.TilePanel([vBreadth])
- vBreadth
- 型：数値
- 既定値：150
- v軸方向の長さ（単位：px）。
３．パネルの追加
パネルは、パネルコレクションオブジェクトのappendPanelメソッドにより追加される。
pnls.appendPanelCollection(panel)
- pnls
- 型：HuTime
- パネルを追加するパネルコレクションオブジェクト。
- panel
- 型：HuTime.PanelBase
- パネルコレクションオブジェクトに追加するパネル。
サンプルコード（実行例はこちら）。パネルコレクションオブジェクト（変数pnls）に２つのパネル（変数pnl1およびpnl2）を追加している。後述の書式の設定により、それぞれ、パネルの背景を水色と黄色にしている。
<!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(250);
ht.appendPanelCollection(pnls, document.getElementById("timeline"));
var pnl1 = new HuTime.TilePanel(100);
var pnl2 = new HuTime.TilePanel(100);
pnls.appendPanel(pnl1);
pnls.appendPanel(pnl2);
pnls.style.backgroundColor = "pink";
pnl1.style.backgroundColor = "aqua";
pnl1.zIndex = 10;
pnl2.style.backgroundColor = "lightyellow";
pnl1.zIndex = 20;
ht.redraw();
</script>
</body>
</html>
４．表示位置とサイズの設定
パネルのt軸方向の表示幅は、パネルコレクションに合わせて設定される。v軸方向の表示幅はvBreadthプロパティにより設定する。タイルパネルの表示位置は、パネルコレクション内での積み重ね順に従って、自動的に設定される。積み重ね順は各タイルパネルのzIndexプロパティにより設定し、値が大きいほど上に表示される（タテ表示の場合は左）。「３．パネルの追加」で示した例では、pnl1およびpnl2のzIndexをそれぞれ10と20に設定しているため、黄色のpnl2が上に表示されている。
- zIndex
- 型：数値
- 既定値：0
- パネルコレクション内でのパネルの上下位置（タテ表示では左右位置）の設定。値が大きいほど、上（タテ表示では左）に表示される。
５．書式設定
styleプロパティにより、パネルの書式を設定することができる。styleプロパティの設定内容は、パネルが持つ表示用のDOM要素（div要素）のstyle属性に反映される。「３．パネルの追加」で示した例では、背景色（style.backgroundColor）に水色と黄色を指定している。
６．その他の主要なプロパティとメソッド
パネルでは、パネルコレクション内でのパネルの挙動を設定するためのプロパティがある。
プロパティ
- id
- 型：文字列
- 既定値：null
- パネルを一意に識別するためのID。
- name
- 型：文字列
- 既定値：null
- パネルの名称。
- visible
- 型：真偽値
- 既定値：true
- パネルの可視/不可視の設定。trueの場合に可視。
- mouseEventCapture
- 型：数値
- 既定値：3
- マウスイベントをキャプチャする範囲。0:なし, 1:パネル本体のみ, 2:パネル内のレイヤのみ, 3:パネル本体とパネル内レイヤ両方。
- tRatio
- 型：数値
- 既定値：1.0
- t軸の表示幅の拡大率。HuTimeルートが保持しているt軸の表示範囲に対する拡大率を設定する。拡大または縮小表示を行うパネルを設置する場合に値を設定する。
- repositionable
- 型：真偽値
- 既定値：true
- パネルの位置変更の可否を設定。trueの場合、パネルの位置変更が可能。
- resizable
- 型：真偽値
- 既定値：true
- パネルのv軸方向の幅の変更可否を設定。trueの場合、パネルの幅の変更が可能。
メソッド
redraw()
パネルの再描画。パネル内のレイヤも再帰的に再描画される。
- 返値
- なし
clear()
パネルの表示内容の消去。
- 返値
- なし
