概要
注: JavaScript では、0 から始まる月がカウントされます。1 月は 0、2 月は 1、12 月は 11 月です。カレンダー グラフが 1 か月ずれているのはこのためです。
カレンダー グラフは、長期間(月や年など)のアクティビティを可視化するために使用します。曜日によって数量がどのように変化するか、時間の経過とともにどのように変化するかを示す場合に役立ちます。
今後の Google Charts のリリースで、カレンダーのグラフは大幅に変更される予定です。
カレンダー グラフは、SVG または VML のいずれかを使用して、ユーザーのブラウザにレンダリングされます。他の Google グラフと同様に、カレンダーのグラフでは、ユーザーがデータにカーソルを合わせるとツールチップが表示されます。そして、クレジットの期限となるクレジットです。Google のカレンダー グラフは、D3 カレンダーの視覚化に触発されました。
簡単な例
スポーツチームの参加状況が季節によってどのように異なるかを見てみましょう。 カレンダー グラフを使うと、明るさを使用して値を示して、ユーザーに傾向を一目で確認してもらうことができます。
各日付にカーソルを合わせると、基礎となるデータの値が表示されます。
カレンダーのグラフを作成するには、calendar
パッケージを読み込んでから、日付用と値用の 2 つの列を作成します。(今後の Google Charts のリリースで、カスタム スタイルとして任意で 3 列目が利用できるようになります)。
次のように、行に日付と値のペアを入力します。
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["calendar"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'date', id: 'Date' }); dataTable.addColumn({ type: 'number', id: 'Won/Loss' }); dataTable.addRows([ [ new Date(2012, 3, 13), 37032 ], [ new Date(2012, 3, 14), 38024 ], [ new Date(2012, 3, 15), 38024 ], [ new Date(2012, 3, 16), 38108 ], [ new Date(2012, 3, 17), 38229 ], // Many rows omitted for brevity. [ new Date(2013, 9, 4), 38177 ], [ new Date(2013, 9, 5), 38705 ], [ new Date(2013, 9, 12), 38210 ], [ new Date(2013, 9, 13), 38029 ], [ new Date(2013, 9, 19), 38823 ], [ new Date(2013, 9, 23), 38345 ], [ new Date(2013, 9, 24), 38436 ], [ new Date(2013, 9, 30), 38447 ] ]); var chart = new google.visualization.Calendar(document.getElementById('calendar_basic')); var options = { title: "Red Sox Attendance", height: 350, }; chart.draw(dataTable, options); } </script> </head> <body> <div id="calendar_basic" style="width: 1000px; height: 350px;"></div> </body> </html>
日
カレンダー グラフ内の正方形はそれぞれ 1 日を表します。現時点では、データセルの色はカスタマイズできませんが、Google グラフの次のリリースでは変更されます。
データ値がすべて正の場合、色は白から青の範囲で、最も深い青色が最大値を示します。負の値のデータがある場合は、以下のようにオレンジ色で表示されます。
このカレンダーのコードは最初の行に似ていますが、行は次のようになります。
[ new Date(2013, 9, 4), 10 ], [ new Date(2013, 9, 5), 3 ], [ new Date(2013, 9, 7), -1 ], [ new Date(2013, 9, 8), 2 ], [ new Date(2013, 9, 12), -1 ], [ new Date(2013, 9, 13), 1 ], [ new Date(2013, 9, 15), 1 ], [ new Date(2013, 9, 16), -4 ],
日(セル)のサイズは calendar.cellSize
オプションで変更できます。
ここでは、calendar.cellSize
を 10 に変更し、日数を短くしてグラフ全体を縮小しました。
var options = { title: 'Red Sox Attendance', calendar: { cellSize: 10 }, };
データ値がない日は、noDataPattern
オプションでカスタマイズできます。
ここでは、color
を明るい青色に設定し、backgroundColor
を少し暗く設定します。
var options = { title: "Red Sox Attendance", height: 350, noDataPattern: { backgroundColor: '#76a7fa', color: '#a0c3ff' } };
calendar.cellColor
を使用して、セルの枠線の色、枠線の幅、不透明度を制御できます。
monthOutlineColor
と区別されるストロークの色や、不透明度の低いものは慎重に選択する必要があります。上記のグラフには、次のオプションがあります。
var options = { title: 'Red Sox Attendance', height: 350, calendar: { cellColor: { stroke: '#76a7fa', strokeOpacity: 0.5, strokeWidth: 1, } } };
上のグラフで 1 日にカーソルを合わせると、枠線が赤色でハイライト表示されます。この動作は、calendar.focusedCellColor
オプションを使用して制御できます。
var options = { title: 'Red Sox Attendance', height: 350, calendar: { focusedCellColor: { stroke: '#d3362d', strokeOpacity: 1, strokeWidth: 1, } } };
週
デフォルトでは、曜日には日曜日の最初の文字から土曜日の最初の文字が表示されます。日付の順序は変更できませんが、calendar.daysOfWeek
オプションでは使用する文字を変更できます。また、calendar.dayOfWeekRightSpace
でグラフと曜日の間のパディングを制御したり、calendar.dayOfWeekLabel
を使用してテキスト スタイルをカスタマイズしたりできます。
ここでは、週ラベルのフォントを変更し、ラベルとグラフデータの間に 10 ピクセルのパディングを設定して、月曜日から週を開始します。
var options = { title: 'Red Sox Attendance', height: 350, calendar: { dayOfWeekLabel: { fontName: 'Times-Roman', fontSize: 12, color: '#1a8763', bold: true, italic: true, }, dayOfWeekRightSpace: 10, daysOfWeek: 'DLMMJVS', } };
月
デフォルトでは、月は濃い灰色の線で識別されます。枠線を制御するには calendar.monthOutlineColor
オプションを使用し、ラベルのフォントをカスタマイズするには calendar.monthLabel
、ラベルのパディングを調整するには calendar.underMonthSpace
を使用します。
ラベルのフォントは濃い赤の 12 ポイント、時刻と太字の斜体、枠線を同じ色に設定し、パディングを 16 ピクセルにします。使用されていない月の枠線は、同じ色合いの薄い色に設定されます。
var options = { title: 'Red Sox Attendance', height: 350, calendar: { monthLabel: { fontName: 'Times-Roman', fontSize: 12, color: '#981b48', bold: true, italic: true }, monthOutlineColor: { stroke: '#981b48', strokeOpacity: 0.8, strokeWidth: 2 }, unusedMonthOutlineColor: { stroke: '#bc5679', strokeOpacity: 0.8, strokeWidth: 1 }, underMonthSpace: 16, } };
年
カレンダー グラフ内の年数は常にグラフの左端になり、calendar.yearLabel
と calendar.underYearSpace
を使用してカスタマイズできます。
年フォントを濃い緑の 32pt Times-Roman 太字斜体に設定し、年ラベルとグラフの下部の間に 10 ピクセルを追加します。
var options = { title: 'Red Sox Attendance', height: 350, calendar: { underYearSpace: 10, // Bottom padding for the year labels. yearLabel: { fontName: 'Times-Roman', fontSize: 32, color: '#1A8763', bold: true, italic: true } } };
読み込み中
google.charts.load
パッケージ名は "calendar"
です。
google.charts.load("current", {packages: ["calendar"]});
ビジュアリゼーションのクラス名は google.visualization.Calendar
です。
var visualization = new google.visualization.Calendar(container);
データ形式
行: 表の各行は日付を表します。
Columns:
列 0 | 列 1 | … | N 列(省略可) | |
---|---|---|---|---|
使用目的: | 期間 | 値 | … | オプションのロール |
データの種類: | date、datetime、timeofday | 数値 | … | |
ロール: | domain | サポート | … | |
オプションの列のロール: | なし |
なし |
… |
設定オプション
名前 | |
---|---|
calendar.cellColor |
var options = { calendar: { cellColor: { stroke: 'red', // Color the border of the squares. strokeOpacity: 0.5, // Make the borders half transparent. strokeWidth: 2 // ...and two pixels thick. } } }; タイプ: オブジェクト
デフォルト:
{ stroke: '#fff', strokeOpacity: 1, strokeWidth: 1 } |
calendar.cellSize |
カレンダーの日付の正方形のサイズ: var options = { calendar: { cellSize: 10 } }; 型: integer
デフォルト: 16
|
calendar.dayOfWeekLabel |
グラフの上部にある週ラベルのフォント スタイルを制御します。 var options = { calendar: { dayOfWeekLabel: { fontName: 'Times-Roman', fontSize: 12, color: 'black', bold: false, italic: false } } }; タイプ: オブジェクト
デフォルト:
{ fontName: 'sans-serif', color: '#888', bold: false, italic: false }
|
calendar.dayOfWeekRightSpace |
週ラベルの右端とグラフの日角の左端間の距離。 型: integer
デフォルト: 4
|
calendar.daysOfWeek |
日曜日から土曜日に使用する 1 文字のラベルです。 型: string
デフォルト:
'SMTWTFS' |
calendar.focusCell |
ユーザーが 1 日の正方形にカーソルを合わせると、その日付がハイライト表示されます。 var options = { calendar: focusedCellColor: { stroke: 'red', strokeOpacity: 0.8, strokeWidth: 3 } } }; タイプ: オブジェクト
デフォルト:
{ stroke: '#000', strokeOpacity: 1, strokeWidth: 2 } |
calendar.monthLabel |
月ラベルのスタイル: 例: var options = { calendar: { monthLabel: { fontName: 'Times-Roman', fontSize: 16, color: 'green', bold: true, italic: false } } }; タイプ: オブジェクト
デフォルト:
{ fontName: 'sans-serif', color: '#888', bold: false, italic: false }
|
calendar.monthOutlineColor |
データ値がある月は、このスタイルで枠線を使用して他の国と区別されます。 var options = { calendar: { monthOutlineColor: { stroke: 'blue', strokeOpacity: 0.8, strokeWidth: 2 } } };( calendar.unusedMonthOutlineColor も参照)
タイプ: オブジェクト
デフォルト:
{ stroke: '#000', strokeOpacity: 1, strokeWidth: 1 } |
calendar.underMonthSpace |
月ラベルの下部と日付の頂点の間のピクセル数: var options = { calendar: { underMonthSpace: 12 } }; 型: integer
デフォルト: 6
|
calendar.underYear スペース |
最も下の年のラベルとグラフの下部との間のピクセル数: var options = { calendar: { underYearSpace: 2 } }; 型: integer
デフォルト: 0
|
calendar.unusedMonthOutlineColor |
データ値がない月は、このスタイルで枠線を使用して他の国と区別されます。 var options = { calendar: { unusedMonthOutlineColor: { stroke: 'yellow', strokeOpacity: 0.8, strokeWidth: 2 } } };( calendar.monthOutlineColor も参照)
タイプ: オブジェクト
デフォルト:
{ stroke: '#c9c9c9', strokeOpacity: 1, strokeWidth: 1 }
|
colorAxis |
色の列の値と色、またはグラデーション スケールのマッピングを指定するオブジェクト。このオブジェクトのプロパティを指定するには、次に示すように、オブジェクト リテラル表記を使用します。 {minValue: 0, colors: ['#FF0000', '#00FF00']} タイプ: オブジェクト
デフォルト: null
|
colorAxis.colors(色 Axis.色) |
ビジュアリゼーション内の値に割り当てる色。文字列の配列。各要素は HTML の色文字列です(例: タイプ: 色文字列の配列。
デフォルト: null
|
colorAxis.maxValue |
存在する場合は、グラフの色データの最大値を指定します。この値以上のカラーデータ値は、 タイプ: 数値
デフォルト: グラフデータのカラー列の最大値
|
colorAxis.minValue |
存在する場合は、グラフの色データの最小値を指定します。この値以下のカラーデータ値は、 タイプ: 数値
デフォルト: グラフデータのカラー列の最小値
|
colorAxis.values |
存在する場合、値と色の関連付け方法を制御します。各値は、 型: 数値の配列
デフォルト: null
|
forceIFrame |
インライン フレーム内にグラフを描画します。(IE8 では、このオプションは無視されます。すべての IE8 チャートは i-frame で描画されます)。 型: boolean
デフォルト: false
|
高さ |
グラフの高さ(ピクセル単位)。 タイプ: 数値
デフォルト: 要素を格納する高さ
|
noDataPattern |
カレンダーのグラフは縞模様の対角パターンを使用して、特定の日にデータがないことを示します。 noDataPattern: { backgroundColor: '#76a7fa', color: '#a0c3ff' } タイプ: オブジェクト
デフォルト: null
|
tooltip.isHTML |
HTML レンダリングではなく SVG レンダリングのツールチップを使用するには、 注: 円グラフのデータロールによる HTML ツールチップのコンテンツのカスタマイズは、円グラフとバブルチャートの可視化ではサポートされていません。 型: boolean
デフォルト: true
|
width |
グラフの幅(ピクセル単位)です。 タイプ: 数値
デフォルト: 含まれる要素の幅
|
メソッド
メソッド | |
---|---|
draw(data, options) |
グラフを描画します。グラフでは、 戻り値の型: なし
|
getBoundingBox(id) |
グラフ要素
値はグラフのコンテナを基準にしています。これは、グラフが描画された後に呼び出します。 戻り値の型: オブジェクト
|
getSelection() |
選択したグラフ エンティティの配列を返します。選択可能なエンティティは、バー、凡例のエントリ、カテゴリです。
棒グラフは、データテーブルのセル、列への凡例エントリ(行インデックスは null)、カテゴリ(列インデックスは null)に対応しています。
このグラフでは、一度に 1 つのエンティティしか選択できません。
戻り値の型: 選択要素の配列
|
setSelection() |
指定されたグラフのエンティティを選択します。前の選択内容をすべてキャンセルします。
選択可能なエンティティは、バー、凡例のエントリ、カテゴリです。
棒グラフは、データテーブルのセル、列への凡例エントリ(行インデックスは null)、カテゴリ(列インデックスは null)に対応しています。
このグラフでは、一度に 1 つのエンティティしか選択できません。
戻り値の型: なし
|
clearChart() |
グラフをクリアし、割り当てられているすべてのリソースを解放します。 戻り値の型: なし
|
イベント
名前 | |
---|---|
error |
グラフのレンダリング中にエラーが発生しました。 プロパティ: ID、メッセージ
|
onmouseover |
ユーザーがビジュアル エンティティにカーソルを合わせると呼び出されます。エンティティの行インデックスとエンティティの日付値を返します。エンティティにデータテーブル要素がない場合、行インデックスに返される値は プロパティ: 行、日付
|
onmouseout |
ユーザーがビジュアル エンティティからマウスアウトすると呼び出されます。エンティティの行インデックスとエンティティの日付値を返します。エンティティにデータテーブル要素がない場合、行インデックスに返される値は [プロパティ] 行、日付
|
ready |
外部メソッド呼び出しのグラフの準備が完了しました。グラフを描画し、描画後にメソッドを呼び出す場合は、 プロパティ: なし
|
select |
ユーザーがビジュアル エンティティをクリックすると呼び出されます。選択内容を確認するには、 プロパティ: なし
|
データポリシー
すべてのコードとデータはブラウザで処理され、レンダリングされます。データがサーバーに送信されることはありません。