グラフレイヤ - HuTime API マニュアル

１．概要

グラフは、折れ線グラフレイヤ（HuTime.LineChartLayer）、プロットグラフレイヤ（HuTime.PlotChartLayer）、または、棒グラフレイヤ（HuTime.BarChartLayer）を使って表示する。これらのレイヤはLayerクラスから派生した、クラスであり、パネルへの配置など、その基本的な使用方法は他のレイヤと同じである。グラフの元データは、CSVファイルなどの形で別途与える。元データのどの項目（列）が開始、終了時間で、どの項目がグラフに値であるかの設定は、グラフ用のレコードセット（HuTime.ChartRecordset）の中で行う。

２．グラフの元データ

csv（カンマ区切りテキスト）やtsv（タブ区切りテキスト）の場合、先頭行がタイトル行となっているファイルを用いるのが容易である。以下は、元データの例で、2015年7月の京都市の気象データである（冒頭部分のみ）。

Date,Precipitation,Temperature,Humidity,Wend Speed,Sunshine Hours
2015-07-01,33.5,22.7,85,1.7,0
2015-07-02,0,25.2,67,2.2,4.6
2015-07-03,1,25.4,67,1.6,3.2
2015-07-04,12.5,22.7,80,1.6,0
2015-07-05,0,22.8,72,1.5,0.3

３．レイヤオブジェクトの生成

グラフレイヤオブジェクトの生成時に、グラフの元データとなるレコードセットオブジェクトを指定する。レコードセットオブジェクトの生成時に、グラフの元データのURLおよび日時や値となるデータ項目（列）の指定を行う。レイヤの高さや上下の余白の設定は、他のレイヤと同じである。

コンストラクタ

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

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

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

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

レコードセットの概要

グラフ用のレコードセットを用いる。

HuTime.CalendarChartRecordset(source, tBegin, tEnd, value [, calendarId, [, plotStyle [, lineStyle]]])

source: 型：文字列またはHuTime.StreamReaderBase; 文字列が入力された場合は、レコードセットの元データのURLとして解釈し、新たなStreamReaderオブジェクトを生成し、データを読み込む。
tBegin: 型：文字列または数値; レコード中の開始日時の項目名または列番号。
tEnd: 型：文字列または数値; レコード中の終了日時の項目名または列番号。
value: 型：文字列または数値; レコード中のグラフの値となる項目名または列番号。
calendarId: 型：文字列; 開始・終了日時の暦ID。省略した場合は、グレゴリオ暦が設定される。
plotStyle: 型：HuTime.FigureStyle; 折れ線グラフやプロットグラフのプロット、および、棒グラフの棒の書式を設定する。省略した場合は、グラフレイヤの既定の書式が設定される。
lineStyle: 型：HuTime.StringStyle; 折れ線グラフの線の書式を設定する。省略した場合は、グラフレイヤの既定の書式が設定される。

４．パネルへの追加と表示

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

折れ線グラフレイヤの表示の例（下記サンプルコード）。元データは「２．グラフの元データ」で示した2015年7月の京都市の気温である。下記コードの変数lyrのコンストラクタをHuTime.PlotChartLayerまたはHuTime.BarChartLayerに変更することで、それぞれ、プロットグラフ、棒グラフを表示することもできる。

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

<!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.LineChartLayer(
        new HuTime.CalendarChartRecordset("Weather201507.csv", "Date", "Date", "Temperature"));
    pnl.appendLayer(lyr);

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

５．書式設定

グラフでは、プロットグラフのプロット、折れ線グラフのプロットと線、棒グラフの棒の書式を設定することができる。グラフ内の書式はレコードセットごとに設定し、レコードセットのコンストラクタの引数として設定した書式は、そのレコードセット既定の書式となる。また、プロットグラフおよび折れ線グラフのプロットの形や大きさは、レコードセットオブジェクトの以下のプロパティで変更する。

plotSymbol: 型：数値; プロットの形。円:0 , 正方形:1, 三角形:2 , 十字:3。
plotWidth: 型：数値; プロットの大きさ（単位：px）。
plotRotate: 型：数値; プロットの回転（単位：度）。

以下は、「４．パネルへの追加と表示」のサンプルコードに書式を設定した例である。

折れ線グラフレイヤの書式設定の例（下記サンプルコード）。「４．パネルへの追加と表示」のサンプルコードに書式設定を追加するため、HuTime.CalendarChartRecordsetのコンストラクタで、引数として書式（HuTime.FigureStyleオブジェクト）を設定している。また、プロットの形、大きさ、回転をそれぞれ設定している。

サンプルコード（実行例はこちら）。HuTime.CalendarChartRecordsetのコンストラクタの引数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.LineChartLayer(
        new HuTime.CalendarChartRecordset("Weather201507.csv", "Date", "Date", "Temperature", null,
            new HuTime.FigureStyle("blue"), new HuTime.FigureStyle(null, "red", 3)));
    lyr.recordsets[0].plotSymbol = HuTime.PlotSymbol.Square;
    lyr.recordsets[0].plotWidth = 12;
    lyr.recordsets[0].plotRotate = 45;
    pnl.appendLayer(lyr);

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

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

６．複数のデータセットの表示

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

appendRecordset(recordset)

グラフレイヤにレコードセットを追加する。

recordset: 型：HuTime.ChartRecordset; 追加するレコードセット。

折れ線グラフレイヤに複数のレコードセットを設定した例（下記サンプルコード）。新たに、元データとして、Weather201507Tokyo.csv（2015年7月の東京の気象データ）を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</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.LineChartLayer(
        new HuTime.CalendarChartRecordset("Weather201507.csv", "Date", "Date", "Temperature"));
    lyr.appendRecordset(new HuTime.CalendarChartRecordset(
        "Weather201507Tokyo.csv", "Date", "Date", "Temperature", null,
            new HuTime.FigureStyle("green")));
    pnl.appendLayer(lyr);

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

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

７．レコードごとの書式設定

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

図およびサンプルコードでは、気温のデータを降水の有無で色分けしている（データ項目Precipitationが0を超える場合は青色、0の場合は赤色）。まず２つの書式をそれぞれ定義する（styleRainおよびstyleNoRain）。次に、レコードセットオブジェクトを別途生成し、データ項目Precipitationを読み込むための設定をレコードセットに追加する。最後に、レコードセットのplotStyleプロパティに書式を出力するための処理を記述する。

レコードごとの書式を設定した例（下記サンプルコード）。降水があった場合は青、降水が無かった場合は赤で表示している。

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

<!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 styleRain = new HuTime.FigureStyle("blue");
    var styleNoRain = new HuTime.FigureStyle("red");
    var recordset =
        new HuTime.CalendarChartRecordset("Weather201507.csv", "Date", "Date", "Temperature");
    recordset.recordSettings.appendDataSetting(new HuTime.RecordDataSetting("Precipitation"));
    recordset.plotStyle = function(itemName, record) {
        if (!record.data["Precipitation"])
            return defaultRecordStyle;
        if (record.data["Precipitation"].content > 0)
            return styleRain;
        else
            return styleNoRain;
    };

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

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

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

８．レコードに対するイベントの設定

グラフ上のレコード（プロットや棒）に対する以下の動作をグラフレイヤのイベントとして補足することができる。クリックされたレコードは、イベントオブジェクトの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</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.LineChartLayer(
        new HuTime.CalendarChartRecordset("Weather201507.csv", "Date", "Date", "Temperature"));
    lyr.addEventListener("plotclick", recordClick);
    pnl.appendLayer(lyr);

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

    ht.redraw(HuTime.timeToJd(2015, 7, 1), HuTime.timeToJd(2015, 8, 1));

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

マニュアルの目次へ戻る