概要
注: JavaScript ではゼロから始まる月がカウントされます（1 月は 0、2 月は 1、12 月は 11）。カレンダー グラフが 1 か月ずつずれているのは、これが理由です。
カレンダー グラフは、月や年などの長い期間におけるアクティビティを示すために使用される可視化です。曜日によって数量がどのように変化するか、または時間の経過とともにどのように変化するかを示す場合に最適です。
カレンダー グラフは、Google グラフの今後のリリースで大幅に改訂される可能性があります。
カレンダーのグラフは、ユーザーのブラウザに適した SVG または VML を使用してブラウザに表示されます。すべての Google グラフと同様に、カレンダー グラフではデータにカーソルを合わせるとツールチップが表示されます。貢献度の必要な単位: カレンダー グラフは 3 日目のカレンダーの可視化にヒントを得たものです。
簡単な例
たとえば、スポーツチームの出欠状況がシーズンを通じてどのように変動したかを表示するとします。カレンダー グラフでは、明るさで値を示し、傾向を一目で確認できるようにすることができます。
個々の日付にカーソルを合わせると、基になるデータ値が表示されます。
カレンダー グラフを作成するには、calendar パッケージを読み込み、2 つの列（日付用と値用に 1 つずつ）を作成します。（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>
日数
カレンダー グラフの各正方形は日を表します。現時点では、データセルの色はカスタマイズできませんが、Google Charts の次のリリースで変更される予定です。
データ値がすべて正の場合、色は白から青の範囲となり、最も濃い青が最大値を示します。負のデータ値がある場合、以下に示すようにオレンジ色で表示されます。
このカレンダーのコードは、最初の例とほぼ同じですが、行は次のようになります。
[ 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,
}
}
};
上のグラフで日付にフォーカスを合わせると、枠線が赤でハイライト表示されます。この動作は、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 pt Times-Roman 太字斜体に設定し、枠線を同じ色に設定して、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 を使用してカスタマイズできます。
年のフォントを濃い緑の 32 pt 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（省略可） | |
|---|---|---|---|---|
| 目的: | 日付 | Values | ... | オプションのロール |
| データ型: | date、datetime、または timeofday | 数値 | ... | |
| ロール: | ドメイン | データ | ... | |
| オプションの列ロール: | まったく管理できない |
まったく管理できない |
... |
構成オプション
| 名前 | |
|---|---|
| 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.focusedCellColor |
ユーザーが日付の正方形にフォーカスを合わせる（たとえばカーソルを合わせる）と、カレンダー グラフでその正方形がハイライト表示されます。
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.underYearSpace |
最も下の年のラベルとグラフの下部の間のピクセル数: 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 |
ビジュアリゼーション内の値に割り当てる色。文字列の配列。各要素は HTML カラー文字列です（例: 型: 色文字列の配列
デフォルト: null
|
| colorAxis.maxValue |
存在する場合、グラフの色データの最大値を指定します。この値以上のカラーデータ値は、 タイプ: 数値
デフォルト: グラフデータの色列の最大値
|
| colorAxis.minValue |
存在する場合、グラフの色データの最小値を指定します。この値以下のカラーデータ値は、 タイプ: 数値
デフォルト: グラフデータの色列の最小値
|
| colorAxis.values |
指定する場合は、値を色に関連付ける方法を制御します。各値は、 型: 数値の配列
デフォルト: null
|
| forceIFrame |
インライン フレーム内にグラフを描画します。（IE8 ではこのオプションは無視されます。IE8 グラフはすべて i フレームに描画されます）。 型: boolean
デフォルト: false
|
| 身長 |
グラフの高さ（ピクセル単位）。 タイプ: 数値
デフォルト: 含まれる要素の高さ
|
| noDataPattern |
カレンダーのグラフでは、特定の日のデータがないことを示すストライプの対角線パターンが使用されます。グレースケールのデフォルトをオーバーライドするには、
noDataPattern: {
backgroundColor: '#76a7fa',
color: '#a0c3ff'
}
タイプ: オブジェクト
デフォルト: null
|
| tooltip.isHtml |
HTML レンダリングではなく SVG レンダリングのツールチップを使用するには、 注: ツールチップ列のデータロールによる HTML ツールチップ コンテンツのカスタマイズは、円グラフとバブルチャートの可視化ではサポートされていません。 型: boolean
デフォルト: true
|
| 幅 |
グラフの幅（ピクセル単位）。 タイプ: 数値
デフォルト: 含まれる要素の幅
|
メソッド
| メソッド | |
|---|---|
draw(data, options) |
グラフを描画します。グラフは、 戻り値の型: none
|
getBoundingBox(id) |
グラフ要素
値はグラフのコンテナを基準とします。グラフが描画された後に呼び出されます。 戻り値の型: オブジェクト
|
getSelection() |
選択したグラフ エンティティの配列を返します。
選択可能なエンティティは、バー、凡例のエントリ、カテゴリです。
バーはデータテーブルのセル、凡例のエントリは列に対応し（行インデックスは null）、カテゴリは行に対応します（列インデックスが null）。
このグラフでは、任意の時点で選択できるエンティティは 1 つのみです。
戻り値の型: 選択要素の配列
|
setSelection() |
指定したグラフ エンティティを選択します。前の選択をキャンセルします。
選択可能なエンティティは、バー、凡例のエントリ、カテゴリです。
バーはデータテーブルのセル、凡例のエントリは列に対応し（行インデックスは null）、カテゴリは行に対応します（列インデックスが null）。
このグラフでは、一度に 1 つのエンティティしか選択できません。
戻り値の型: none
|
clearChart() |
チャートを消去し、割り当て済みリソースをすべて解放します。 戻り値の型: none
|
イベント
| 名前 | |
|---|---|
error |
グラフのレンダリング中にエラーが発生したときに呼び出されます。 プロパティ: id、message
|
onmouseover |
ユーザーがビジュアル エンティティにカーソルを合わせたときに呼び出されます。エンティティの行インデックスと日付値を渡します。エンティティにデータテーブル要素がない場合、行インデックスに対して返される値は Properties: row、date
|
onmouseout |
ユーザーがビジュアル エンティティからマウス離れたときに呼び出されます。エンティティの行インデックスと日付値を渡します。エンティティにデータテーブル要素がない場合、行インデックスに対して返される値は Properties 行、日付
|
ready |
グラフで外部メソッド呼び出しの準備が整いました。グラフを操作し、描画後にメソッドを呼び出す場合は、 Properties（プロパティ）: なし
|
select |
ユーザーがビジュアル エンティティをクリックしたときに呼び出されます。選択された内容を確認するには、 Properties（プロパティ）: なし
|
データポリシー
すべてのコードとデータはブラウザで処理されてレンダリングされます。データはどのサーバーにも送信されません。