注釈付きのタイムライン

概要

アノテーション付きのインタラクティブな時系列折れ線グラフ。

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

<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 値を指定します。この列の型が datedatetime ではない)の場合、X 軸の最小時間解像度は 1 日になります。
  • 各データ行は、次に説明するように、1 ~ 3 列の追加列で記述されます。
    • Y 値 - [必須、数値] 各セットの最初の列は、最初の列の対応する時間の線の値を表します。縦棒グラフは、折れ線のタイトルとしてグラフに表示されます。
    • アノテーション タイトル - [省略可、文字列] 文字列の列が値の列の後にあり、displayAnnotations オプションが true の場合、この列にはその点を表す短いタイトルが保持されます。たとえば、このラインがブラジルの気温を表しており、このポイントが非常に高い数である場合、タイトルは「記録日が最も暑い日」となります。
    • アノテーション テキスト - (省略可)文字列このシリーズの 2 つ目の文字列列が存在する場合は、この時点でその説明文を追加のセルとして使用します。この列を使用するには、オプション displayAnnotations を true に設定する必要があります。allowHtmltrue に設定すると、HTML タグを使用できますが、基本的にサイズの制限はありませんが、エントリが長すぎると表示セクションにオーバーフローする可能性があります。この時点でアノテーション タイトル列がある場合でも、この列は必要ありません。列ラベルはグラフで使用されていません。たとえば、最も暑い日を記録した場合、「次は 1 日の気温が 10 度下がった」のように言ってみてください。

設定オプション

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

このビジュアリゼーションでの draw() の 2 回目の呼び出しでは、より効率的な再描画手法を実現できます。再描画されるのはグラフ領域のみです。このオプションを使用するには、次の要件を満たす必要があります。

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

ズーム範囲の選択領域(グラフの下部にある領域)を表示するかどうかを指定します。false は「いいえ」を意味します。

ズーム セレクタの枠線は、グラフの最後の時系列のログスケール バージョンで、ズーム セレクタの高さに合わせてスケーリングされます。

displayZoomButtons boolean ズームリンクを表示するかどうかを指定します(「1d 5d 1m」など)。false は「いいえ」を意味します。
fill 数値 0 折れ線グラフの各線の下にある塗りつぶしのアルファを指定する 0 ~ 100 の数値。100 は不透明な塗りつぶしを 100%、0 は塗りつぶしがないことを意味します。塗りつぶしの色は、その上の線と同じ色になります。
ハイライト表示 文字列 「最も近い」

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

  • 'nearest' - X 軸に沿ってマウスに最も近い値。
  • 「最後」 - マウスの左にある次の値。
凡例の位置 文字列 「sameRow」 色付きの凡例を、ズームボタンと日付(同じ行)を使用して同じ行に配置するか、新しい行(newRow)に配置するかです。
最高 数値 自動前処理と Y 軸に表示する最大値。最大データポイント数がこの値を超えると、この設定は無視され、最大データポイントを超えて次のメジャー ティック チャートが表示されるようグラフが調整されます。これは、scaleType によって決定される Y 軸の最大値よりも優先されます。
min 数値 自動前処理と Y 軸に表示する最小値。最小データポイントがこの値より小さい場合、この設定は無視され、グラフは最小データポイントより下に大きい目盛りが表示されます。これは scaleType によって決定される最小値の Y 軸よりも優先されます。
数値形式 文字列、または number:String ペアのマップ 自動前処理と

グラフの上部で値をフォーマットするために使用される数値形式のパターンを指定します。

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

  • 指定しない場合は、デフォルトの形式パターンが使用されます。
  • 1 つの文字列パターンを指定すると、すべての値で使用されます。
  • マップが指定されている場合、キーは一連の(0 から始まる)インデックスであり、値は指定した系列のフォーマットに使用されるパターンです。
    グラフのすべての系列形式を含める必要はありません。指定されていない系列ではデフォルトの形式が使用されます。

このオプションを指定すると、displayExactValues オプションは無視されます。

scaleColumn 数値の配列 自動

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

このオプションは、スケール値として使用する系列の(0 から始まる)インデックスを指定する 0 ~ 3 の数値の配列を受け取ります。これらの値が表示される場所は、配列に含まれる値の数によって異なります。

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

複数の縮尺を提示する場合は、scaleType オプションを「allfixed」または「allmaximized」のいずれかに設定することをおすすめします。

スケールタイプ 文字列 「fixed」

Y 軸の最大値と最小値を設定します。以下のオプションを使用できます。

  • maximized - Y 軸は系列の最小値から最大値まで広がります。シリーズが複数ある場合は、maxmaxed を使用します。
  • 'fixed'default - Y 軸は、データの値の値に応じて変化します。
    • すべての値が 0 より大きい場合、Y 軸はゼロから最大データ値まで広がります。
    • すべての値が 0 より小さい場合、Y 軸は 0 から最小データ値までになります。
    • 値が正と負の両方である場合、Y 軸は系列の最大値から最小値の範囲内になります。

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

最小値や最大値を指定すると、スケールタイプによって決定される最小値と最大値よりも優先されます。

太さ 数値 0 線の太さを指定する 0 ~ 10 の数値(0 は最も薄い)。
Wmode 文字列 「window」 Flash グラフの Window Mode(wmode)パラメータ。指定できる値は、「opaque」、「window」、「transparency」です。
ズーム終了時間 Date none 選択したズーム範囲の終了日時を設定します。
ズーム開始時間 Date 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 つのパラメータを受け入れます。これらは、選択した選択した表示範囲の最初と最後の時刻を表します。start を null に設定して最も早い日付から終了まで、end を null に設定して start から最後の日付までをすべて含めます。
showDataColumns(columnIndexes) none hideDataColumns メソッドを使用して非表示にされた後の、グラフから指定されたデータ系列を表示します。1 つのパラメータ(数値または数値の配列)を指定できます。0 は最初のデータ系列を表します。

イベント

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

: 特定の制限により、ブラウザでファイルとしてページにアクセスすると(たとえば、(例: サーバー(例:「http://www」)。

データポリシー

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

注意事項

Flash セキュリティ設定のため、ウェブサーバーの URL(例: http://www.myhost.com/myviz.html)ではなく、ブラウザのファイルの場所(file:///c:/webhost/myhost/myviz.html など)からアクセスすると、正しく動作しないことがあります。これは通常、テストに関する問題のみです。この問題は、Macromedia のウェブサイトで解決できます。