簡介
注意:JavaScript 會計算從 zero 開始的月份,1 月為 0,2 月為 1,12 則為 11。如果您的日曆圖表顯示為一個月,這就是原因。
日曆圖表是一種視覺化的圖表,用來顯示一段期間內 (例如數月或數年) 的活動。最適合用來呈現特定時段 (如星期幾) 或其長期趨勢的趨勢。
日後的 Google 圖表版本將有重大修訂,日曆圖表可能經過大幅修改。
系統會透過 SVG 或 VML,以使用者瀏覽器適用的日曆顯示日曆圖表。與所有 Google 圖表一樣,當使用者將遊標懸停在資料上時,日曆圖表會顯示工具提示。贏得抵免額的抵免額:日曆圖表是根據 D3 日曆視覺化資料來啟發靈感。
簡易範例
假設我們要顯示某個球隊在當季的出席狀況變化。 有了日曆圖表,我們就能利用亮度來表示數值,並讓使用者一目了然。
將滑鼠懸停在個別日期上,即可查看基本資料值。
如要建立日曆圖表,請載入 calendar
套件,然後建立兩個資料欄,分別用於日期和值。(日後的 Google 圖表版本將新增自訂樣式的第三個資料欄)。
接著在資料列中填入日期/值組合,如下所示。
<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 圖表將會變更。
如果資料值均為正值,顏色會介於白色或藍色之間,最深的藍色則代表最高值。如果有負值的資料值,則會顯示為橘色,如下所示。
這個日曆的程式碼與第一個程式碼類似,只是以下這樣的資料列:
[ 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
調整標籤邊框間距:
我們將標籤字型設定為深紅色 12pt 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
自訂設定:
系統會將年份的字型設為深綠色 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);
資料格式
列:表格中的每一列皆代表日期。
欄:
第 0 欄 | 第 1 欄 | … | N 欄 (選填) | |
---|---|---|---|---|
用途: | 日期 | 值 | … | 選用角色 |
資料類型: | 日期、日期或時間 | 數字 | … | |
角色: | 網域 | 資料 | … | |
選用的資料欄角色: | 無 |
無 |
… |
設定選項
名稱 | |
---|---|
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 } }; 類型:整數
預設: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 |
「週」標籤的右邊緣與圖表天數 (例如正方形) 的左側邊緣之間的距離。 類型:整數
預設:4
|
calendar.daysOfWeek |
用於週日至週六的單字母標籤。 類型:字串
預設:
'SMTWTFS' |
calendar.FocusCellColor |
當使用者將焦點移至每天執行方形的方格 (如滑鼠遊標懸停) 時,日曆圖表就會醒目顯示該正方形。 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 } }; 類型:整數
預設:6
|
calendar.underYearSpace |
最低年份標籤和圖表底部之間的像素數: var options = { calendar: { underYearSpace: 2 } }; 類型:整數
預設:0
|
calendar.unusedMonthOutlineColor |
「沒有」資料值的月份則會以這個樣式的邊框顯示。 var options = { calendar: { unusedMonthOutlineColor: { stroke: 'yellow', strokeOpacity: 0.8, strokeWidth: 2 } } };(另請參閱 calendar.monthOutlineColor 。)類型:物件
預設:
{ stroke: '#c9c9c9', strokeOpacity: 1, strokeWidth: 1 } |
顏色軸 |
這個物件可指定顏色欄值和顏色值或漸層比例之間的對應。若要指定此物件的屬性,您可以使用物件常值標記法,如下所示: {minValue: 0, colors: ['#FF0000', '#00FF00']} 類型:物件
預設值:空值
|
colorAxis.colors |
要為圖表中的值指派的顏色。字串陣列,其中每個元素都是 HTML 顏色字串,例如: 類型:色彩字串陣列
預設值:空值
|
色彩 Axis.maxValue |
如果存在,請指定圖表顏色資料的最大值。這個值 (或更高) 的顏色資料值會轉譯為 類型:數字
預設值:圖表資料中的色彩欄最大值
|
colorAxis.minValue |
如果存在,請指定圖表顏色資料的最小值。此數值更低的色彩資料值將是 類型:數字
預設值:圖表資料中色彩欄的最小值
|
colorAxis.values |
如果有,請控制值與顏色的關聯方式。每個值都與 類型:數字陣列
預設值:空值
|
ForceIFrame |
在內嵌頁框中繪製圖表。(請注意,在 IE8 中,系統會忽略此選項;所有 IE8 圖表都會以 i-frames 繪製)。 類型:布林值
預設值:false
|
height |
圖表的高度,以像素為單位。 類型:數字
預設:所含元素的高度
|
無資料模式 |
日曆圖表採用條紋的對角線模式,表示某一天內沒有任何資料。使用 noDataPattern: { backgroundColor: '#76a7fa', color: '#a0c3ff' } 類型:物件
預設值:空值
|
tooltip.isHtml |
如要使用 SVG 轉譯 (而非 HTML 轉譯) 工具提示,請設為 類型:布林值
預設:是
|
width |
圖表的寬度 (以像素為單位)。 類型:數字
預設:內含元素的寬度
|
方法
方法 | |
---|---|
draw(data, options) |
繪製圖表。只有在 傳回類型:無
|
getBoundingBox(id) |
傳回包含圖表元素
值是相對於圖表容器。在繪製圖表「之後」呼叫此方法。 傳回類型:物件
|
getSelection() |
傳回所選圖表實體的陣列。可選取的實體包括長條、圖例項目和類別。
長條對應到資料表中的一個儲存格、一個資料欄的圖例項目 (資料列索引為空值),以及一列與某個類別 (欄索引為空值) 的關係。
這張圖表在任何時間點都只能選取一個實體。
傳回類型:選取元素陣列
|
setSelection() |
選取指定的圖表實體。取消先前選取的項目。
可選取的實體包括長條、圖例項目和類別。
長條對應到資料表中的一個儲存格、一個資料欄的圖例項目 (資料列索引為空值),以及一列與某個類別 (欄索引為空值) 的關係。
在這份圖表中,您一次只能選取一個實體。 傳回類型:無
|
clearChart() |
清除圖表並釋出其分配的所有資源。 傳回類型:無
|
活動
名稱 | |
---|---|
error |
嘗試轉譯圖表時發生錯誤。 屬性:ID、訊息
|
onmouseover |
當使用者將滑鼠遊標移到視覺實體上時觸發。傳回實體的列索引和日期值。如果實體沒有資料表元素,則資料列索引傳回的值會是 屬性:資料列、日期
|
onmouseout |
當使用者離開視覺實體時觸發。傳回實體的資料列索引和日期值。如果沒有實體的資料資料表元素,則針對資料列索引傳回的值會是 Properties 資料列、日期
|
ready |
圖表可供外部方法呼叫使用。如果您想要與圖表互動,並在繪製圖表後呼叫方法,請先為這個事件設定監聽器,然後再呼叫 屬性:無
|
select |
使用者點選視覺實體時觸發。如要瞭解所選項目,請呼叫 屬性:無
|
資料政策
系統會處理所有程式碼和資料,並在瀏覽器中顯示。系統不會將資料傳送至任何伺服器。