概要
アノテーション付きのインタラクティブな時系列折れ線グラフ。
アノテーション付きタイムラインは、代わりにアノテーション グラフを自動的に使用するようになりました。
例
<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 値を指定します。この列の型がdate
(datetime
ではない)の場合、X 軸の最小時間解像度は 1 日になります。 - 各データ行は、次に説明するように、1 ~ 3 列の追加列で記述されます。
- Y 値 - [必須、数値] 各セットの最初の列は、最初の列の対応する時間の線の値を表します。縦棒グラフは、折れ線のタイトルとしてグラフに表示されます。
- アノテーション タイトル - [省略可、文字列] 文字列の列が値の列の後にあり、
displayAnnotations
オプションが true の場合、この列にはその点を表す短いタイトルが保持されます。たとえば、このラインがブラジルの気温を表しており、このポイントが非常に高い数である場合、タイトルは「記録日が最も暑い日」となります。 - アノテーション テキスト - (省略可)文字列このシリーズの 2 つ目の文字列列が存在する場合は、この時点でその説明文を追加のセルとして使用します。この列を使用するには、オプション
displayAnnotations
を true に設定する必要があります。allowHtml
をtrue
に設定すると、HTML タグを使用できますが、基本的にサイズの制限はありませんが、エントリが長すぎると表示セクションにオーバーフローする可能性があります。この時点でアノテーション タイトル列がある場合でも、この列は必要ありません。列ラベルはグラフで使用されていません。たとえば、最も暑い日を記録した場合、「次は 1 日の気温が 10 度下がった」のように言ってみてください。
設定オプション
名前 | タイプ | Default | 説明 |
---|---|---|---|
allowHTML | boolean | false | true に設定すると、HTML タグを含むアノテーション テキストは HTML としてレンダリングされます。 |
allowRedraw | boolean | false | このビジュアリゼーションでの
|
すべての値の接尾辞 | 文字列 | 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 は塗りつぶしがないことを意味します。塗りつぶしの色は、その上の線と同じ色になります。 |
ハイライト表示 | 文字列 | 「最も近い」 | ハイライト表示する系列上の点と、凡例に表示する対応する値。次のいずれかの値を選択します。
|
凡例の位置 | 文字列 | 「sameRow」 | 色付きの凡例を、ズームボタンと日付(同じ行)を使用して同じ行に配置するか、新しい行(newRow)に配置するかです。 |
最高 | 数値 | 自動前処理と | Y 軸に表示する最大値。最大データポイント数がこの値を超えると、この設定は無視され、最大データポイントを超えて次のメジャー ティック チャートが表示されるようグラフが調整されます。これは、scaleType によって決定される Y 軸の最大値よりも優先されます。 |
min | 数値 | 自動前処理と | Y 軸に表示する最小値。最小データポイントがこの値より小さい場合、この設定は無視され、グラフは最小データポイントより下に大きい目盛りが表示されます。これは scaleType によって決定される最小値の Y 軸よりも優先されます。 |
数値形式 | 文字列、または number:String ペアのマップ | 自動前処理と | グラフの上部で値をフォーマットするために使用される数値形式のパターンを指定します。 パターンは、java.DecimalFormat クラスで指定された形式にする必要があります。
このオプションを指定すると、 |
scaleColumn | 数値の配列 | 自動 | グラフの Y 軸の目盛りに表示する値を指定します。デフォルトでは、右側に 1 つの目盛りがありますが、これは両方の系列に適用されます。ただし、グラフの辺を異なる系列値にスケーリングできます。 このオプションは、スケール値として使用する系列の(0 から始まる)インデックスを指定する 0 ~ 3 の数値の配列を受け取ります。これらの値が表示される場所は、配列に含まれる値の数によって異なります。
複数の縮尺を提示する場合は、 |
スケールタイプ | 文字列 | 「fixed」 | Y 軸の最大値と最小値を設定します。以下のオプションを使用できます。
最小値や最大値を指定すると、スケールタイプによって決定される最小値と最大値よりも優先されます。 |
太さ | 数値 | 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 メソッドを呼び出してプロパティを取得することをおすすめします。 |
|
ready | 外部メソッド呼び出しのグラフの準備が完了しました。グラフを操作し、描画後にメソッドを呼び出す場合は、draw メソッドを呼び出す前に、このイベントのリスナーを設定して、イベントが発生した後にのみ呼び出す必要があります。 |
なし |
select | ユーザーがアノテーション フラグ(マーカー)をクリックすると、データテーブルの対応するセルが選択されます。可視化によってこのイベントが発生します。 | なし |
注: 特定の制限により、ブラウザでファイルとしてページにアクセスすると(たとえば、(例: サーバー(例:「http://www」)。
データポリシー
すべてのコードとデータはブラウザで処理され、レンダリングされます。データがサーバーに送信されることはありません。
注意事項
Flash セキュリティ設定のため、ウェブサーバーの URL(例: http://www.myhost.com/myviz.html)ではなく、ブラウザのファイルの場所(file:///c:/webhost/myhost/myviz.html など)からアクセスすると、正しく動作しないことがあります。これは通常、テストに関する問題のみです。この問題は、Macromedia のウェブサイトで解決できます。