アノテーション付きタイムライン

  1. Overview
  2. 例
  3. 読み込んでいます
  4. データ形式
  5. 構成オプション
  6. メソッド
  7. イベント
  8. データポリシー
  9. Notes

概要

オプションのアノテーションを含むインタラクティブな時系列の折れ線グラフ。

アノテーション付きのタイムラインは、代わりに自動的にアノテーション グラフを使用するようになりました。

例

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
      google.charts.load('current', {'packages':['annotatedtimeline']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Sold Pencils');
        data.addColumn('string', 'title1');
        data.addColumn('string', 'text1');
        data.addColumn('number', 'Sold Pens');
        data.addColumn('string', 'title2');
        data.addColumn('string', 'text2');
        data.addRows([
          [new Date(2008, 1 ,1), 30000, undefined, undefined, 40645, undefined, undefined],
          [new Date(2008, 1 ,2), 14045, undefined, undefined, 20374, undefined, undefined],
          [new Date(2008, 1 ,3), 55022, undefined, undefined, 50766, undefined, undefined],
          [new Date(2008, 1 ,4), 75284, undefined, undefined, 14334, 'Out of Stock','Ran out of stock on pens at 4pm'],
          [new Date(2008, 1 ,5), 41476, 'Bought Pens','Bought 200k pens', 66467, undefined, undefined],
          [new Date(2008, 1 ,6), 33322, undefined, undefined, 39463, undefined, undefined]
        ]);

        var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
        chart.draw(data, {displayAnnotations: true});
      }
    </script>
  </head>

  <body>
    // Note how you must specify the size of the container element explicitly!
    <div id='chart_div' style='width: 700px; height: 240px;'></div>
  </body>
</html>

重要: この可視化を使用するには、ページ上のコンテナ要素の高さと幅を明示的に指定する必要があります。たとえば、<div id="chart_div" style="width:400; height:250"></div> のようにします。

読み込んでいます

google.charts.load パッケージ名は "annotatedtimeline" です。

  google.charts.load("current", {packages: ['annotatedtimeline']});

ビジュアリゼーションのクラス名は google.visualization.AnnotatedTimeLine です。

  var visualization = new google.visualization.AnnotatedTimeLine(container);

データ形式

グラフには 1 つ以上の線を表示できます。各行はグラフ上の X 位置、つまり特定の時間を表します。各行は 1 ～ 3 の列で記述されます。

  • 最初の列は date または datetime 型で、グラフ上の点の X 値を指定します。この列が（datetime ではなく）date 型の場合、X 軸の最小時間分解能は 1 日です。
  • 各データ行は、以下で説明する 1 ～ 3 列の追加列で記述されます。
    • Y 値 - [必須、数値] 各セットの最初の列は、最初の列から対応する時刻における行の値を表します。列ラベルは、線のタイトルとしてグラフに表示されます。
    • アノテーションのタイトル - [省略可、文字列] 文字列の列が値の列の後にあり、displayAnnotations オプションが true の場合、この列にはこの点を説明する短いタイトルが格納されます。たとえば、この線がブラジルの気温を表し、このポイントが非常に高い数値である場合、タイトルは「記録上で最も暑い日」になることがあります。
    • アノテーション テキスト - [省略可の文字列] このシリーズに 2 つ目の文字列の列が存在する場合、セル値はこのポイントの追加説明テキストとして使用されます。この列を使用するには、オプション displayAnnotations を true に設定する必要があります。allowHtml を true に設定すると、HTML タグを使用できます。基本的にサイズの制限はありませんが、エントリが長すぎると表示セクションからはみ出す場合があります。このポイントにアノテーションのタイトル列がある場合でも、この列は必要ありません。列ラベルはグラフで使用されません。たとえば、記録的なポイントで最も暑い日であれば、「次の最も近い日は 10 度涼しかった」と言います。

構成オプション

名前 タイプ デフォルト 説明
allowHtml boolean false true に設定すると、HTML タグを含むアノテーション テキストは HTML としてレンダリングされます。
allowRedraw boolean false

この可視化に対する 2 回目以降の draw() の呼び出しで、より効率的な再描画手法を有効にします。グラフ領域が再描画されるだけです。このオプションを使用するには、次の要件を満たす必要があります。

  • allowRedraw を true にする必要があります。
  • displayAnnotations は false である（つまり、アノテーションを表示できない）
  • draw() の最初の呼び出しと同じオプションと値（allowRedraw と displayAnnotations を除く）を渡す必要があります。
allValuesSuffix string none スケールと凡例のすべての値に追加する接尾辞。
annotationsWidth 数値 25 グラフ領域全体に対するアノテーション領域の幅（パーセント単位）。5 ～ 80 の範囲内の数値を指定します。
色 文字列の配列 デフォルトの色 グラフの線とラベルに使用する色。文字列の配列。各要素は、有効な HTML カラー形式の文字列です。例: 「red」や「#00cc00」。
dateFormat string 最初の列のタイプ（それぞれ日付または日時）に応じて、「MMMM dd, yyyy」または「HH:mm MMMM dd, yyyy」のいずれかになります。 右上に日付情報を表示するために使用される形式。このフィールドの形式は、 java SimpleDateFormat クラスで指定されています。
displayAnnotations boolean false true に設定すると、グラフでは選択した値の上にアノテーションが表示されます。 このオプションを true に設定すると、各数値列の後に、アノテーション文字列の列（アノテーション タイトル用とアノテーション テキスト用）を 2 つ追加できます。
displayAnnotationsFilter boolean false true に設定すると、アノテーションをフィルタするフィルタ コントロールがグラフに表示されます。 このオプションは、アノテーションが多数ある場合に使います。
displayDateBarSeparator boolean true 系列値と凡例の日付の間に小さなバー区切り文字（|）を表示するかどうかを指定します。true の場合は表示されます。
displayExactValues boolean false スペースを節約するために、グラフの上部に値を丸めて短縮したバージョンを表示するかどうかを指定します。false は表示してもよいことを示します。たとえば、false に設定すると、56123.45 は 56.12k と表示されます。
displayLegendDots boolean true 凡例テキストの値の横にドットを表示するかどうかを指定します。true の場合は表示します。
displayLegendValues boolean true 凡例にハイライト表示された値を表示するかどうかを指定します。true の場合は表示します。
displayRangeSelector boolean true

ズーム範囲選択領域（グラフ下部の領域）を表示するかどうか。false は表示しないことを意味します。

ズームセレクタの枠線は、グラフの最後の系列の対数スケール バージョンで、ズームセレクタの高さに合わせてスケーリングされます。
displayZoomButtons boolean true ズームリンク（「1d 5d 1m」など）を表示するかどうかを指定します。false の場合は表示しません。
fill 数値 0 折れ線グラフの各行の下にある塗りつぶしのアルファを指定する 0 ～ 100 の数値（両端を含む）。100 は 100% の不透明な塗りつぶし、0 はまったく塗りつぶされていないことを意味します。塗りつぶしの色は上の線と同じ色です。
highlightDot string '最も近い'

系列上でハイライト表示するドットと、凡例に表示する対応する値。次のいずれかの値を選択します。

  • 「最も近い値」- X 軸に沿ってマウスに最も近い値。
  • 「last」- マウスの左にある次の値のセット。
legendPosition string 「sameRow」 色のついた凡例をズームボタンと日付（「sameRow」）の同じ行に配置するか、新しい行（「newRow」）に配置するかを指定します。
max 数値 自動 Y 軸に表示する最大値。最大データポイントがこの値を超えると、この設定は無視され、最大データポイントの上に次の大きな目盛りが表示されるようグラフが調整されます。これは、scaleType によって決定される Y 軸の最大値よりも優先されます。
分 数値 自動 Y 軸に表示する最小値です。最小データポイントがこの値より小さい場合、この設定は無視され、最小データポイントの下に次の大きな目盛りを表示するようにグラフが調整されます。これは、scaleType によって決定される Y 軸の最小値よりも優先されます。
numberFormats 文字列、または数値:文字列のペアのマップ 自動

グラフの上部にある値の書式設定に使用する数値形式パターンを指定します。

パターンは、 java DecimalFormat クラスで指定された形式にする必要があります。

  • 指定しない場合は、デフォルトの書式パターンが使用されます。
  • 単一の文字列パターンを指定すると、そのパターンがすべての値に使用されます。
  • マップが指定されている場合、キーは系列の（ゼロベース）インデックスになり、値は指定された系列の書式設定に使用されるパターンになります。
    グラフのすべての系列について形式を指定する必要はありません。未指定の系列にはデフォルトの形式が使用されます。

このオプションを指定すると、displayExactValues オプションは無視されます。
scaleColumns 数値の配列 自動

グラフの Y 軸の目盛りに表示する値を指定します。デフォルトでは、両方のシリーズに適用される右側に 1 つの目盛りが表示されますが、グラフの異なる辺を異なる系列値にスケーリングできます。

このオプションは、スケール値として使用する系列の（ゼロベース）インデックスを指定する 0 ～ 3 個の数値の配列を取ります。これらの値が表示される場所は、配列に含める値の数によって異なります。

  • 空の配列を指定すると、グラフの目盛りの横に Y 値は表示されません。
  • 値を 1 つ指定すると、指定した系列の目盛りがグラフの右側にのみ表示されます。
  • 2 つの値を指定すると、2 番目のシリーズのスケールがグラフの右側に追加されます。
  • 3 つの値を指定すると、3 つ目のシリーズのスケールがグラフの中央に追加されます。
  • 配列の 3 番目より後の値は無視されます。

複数のスケールを表示する場合は、scaleType オプションを「allfixed」または「allmaximized」に設定することをおすすめします。
scaleType string '修正済み'

Y 軸に表示される最大値と最小値を設定します。次のオプションを使用できます。

  • 「maximized」 - Y 軸は、系列の最小値から最大値までの範囲になります。シリーズが複数ある場合は、allmaximized を使用します。
  • 「固定」 [デフォルト] - Y 軸はデータ値の値に応じて異なります。
    • すべての値が 0 より大きい場合、Y 軸は 0 から最大データ値までの範囲になります。
    • すべての値が 0 以下の場合、Y 軸はゼロからデータの最小値までの範囲になります。
    • 値が正と負の両方の場合、Y 軸はシリーズの最大値からシリーズの最小値までの範囲になります。

      複数の系列の場合は、「allfixed」を使用します。
  • 「allmaximized」 - 「maximized」と同じですが、複数のスケールを表示する場合に使用します。どちらのグラフも同じスケール内で最大化されます。つまり、一方のグラフは Y 軸では誤って表示されますが、各系列にカーソルを合わせると実際の値が表示されます。
  • 「allfixed」 - 「fixed」と同じですが、複数のスケールが表示される場合に使用されます。この設定では、適用されるシリーズに合わせて各スケールが調整されます（scaleColumns と一緒に使用します）。

最小値や最大値を指定すると、スケールタイプによって決定される最小値や最大値よりも優先されます。
太さ 数値 0 線の太さを指定する 0 ～ 10 の数値（両端を含む）。0 が最も細いことを示します。
Wmode string 'ウィンドウ' Flash チャートの Window Mode（Wmode）パラメータです。指定できる値は、「opaque」、「window」、「透明」です。
zoomEndTime 日付 none 選択したズーム範囲の終了日時を設定します。
zoomStartTime 日付 none 選択したズーム範囲の開始日時を設定します。

メソッド

メソッド 戻り値の型 説明
draw(data, options) none グラフを描画します。allowRedraw プロパティを使用すると、2 回目以降の draw() の呼び出しの応答時間を短縮できます。
getSelection() 選択要素の配列 標準の getSelection() 実装。選択した要素はセル要素です。ユーザーが一度に選択できるセルは 1 つのみです。
getVisibleChartRange() start プロパティと end プロパティを持つオブジェクト start プロパティと end プロパティを持つオブジェクトを返します。各プロパティは Date オブジェクトで、現在の時刻の選択を表します。
hideDataColumns(columnIndexes) none 指定したデータ系列をグラフで非表示にします。 1 つのパラメータを受け入れます。このパラメータは、数値または数値の配列です。ここで、0 は最初のデータ系列を指します（以下同様）。
setVisibleChartRange(start, end) none 表示範囲（ズーム）を指定の範囲に設定します。目的の選択された可視範囲の最初と最後の時間を表す Date 型の 2 つのパラメータを受け入れます。最も早い日付から end までのすべてを含めるには、start を null に設定します。start から最後の日付まですべてを含めるには、end を null に設定します。
showDataColumns(columnIndexes) none 指定したデータ系列を hideDataColumns メソッドを使用して非表示にした後、グラフからそのデータ系列を表示します。1 つのパラメータを受け入れます。このパラメータは、数値または数値の配列です。ここで、0 は最初のデータ系列を指します（以下同様）。

イベント

名前 説明 プロパティ
範囲の変更 ズーム範囲を変更しました。ユーザーが表示時間範囲を変更した後に呼び出されますが、setVisibleChartRange メソッドを呼び出した後では発生しません。
注: イベントのプロパティは使用せず、getVisibleChartRange メソッドを呼び出して取得することをおすすめします。
  • start: 日付。ズーム範囲の開始時刻。
  • end: 日付。ズーム範囲の終了時刻。
ready グラフで外部メソッド呼び出しの準備が整いました。グラフを操作し、描画後にメソッドを呼び出す場合は、draw メソッドを呼び出す前にこのイベントのリスナーを設定し、イベントが発生した後にのみ呼び出す必要があります。 なし
select ユーザーがアノテーション フラグ（マーカー）をクリックすると、データテーブル内の対応するセルが選択されます。その後、可視化によってこのイベントが発生します。 なし

注: ブラウザでページにファイル（「file://」）を使用します。サーバー（例:"http://www").

データポリシー

すべてのコードとデータはブラウザで処理されてレンダリングされます。データはサーバーに送信されません。

注

ウェブサーバーの URL（例: http://www.myhost.com/myviz.html）ではなく、ブラウザ内のファイルの場所（例: file:///c:/webhost/myhost/myviz.html）からアクセスした場合は、Flash のセキュリティ設定により、この要素（およびすべての Flash ベースの可視化）が正しく機能しない可能性があります。通常、これはテスト中の問題です。この問題は、Macromedia のウェブサイトに記載されている方法で解決できます。