本頁面由 Cloud Translation API 翻譯而成。

行事曆圖表

Overview
簡易範例
天
週
月
年
載入中
資料格式
設定選項
方法
事件
資料政策

總覽

注意：JavaScript 的計數會從「零」開始計算：1 月是 0 日、2 月 1 日、12 月 11 日。如果您的行事曆圖表呈某個月出現變化，這就是原因。

「日曆圖表」是一種視覺化呈現方式，用於顯示長期活動，例如月或年。最適合用於說明某些數量會依星期幾或不同時段的變化趨勢。

日後推出的 Google Charts 版本可能會大幅修訂行事曆圖表。

日曆圖表要在瀏覽器中使用 SVG 或 VML 顯示，取決於何者適合使用者的瀏覽器。日曆圖表和所有 Google 圖表一樣，在使用者將遊標懸停在資料上時，就會顯示工具提示。註明來源：我們的日曆圖表靈感來自 D3 日曆圖表。

簡易範例

假設我們想顯示特定球隊在整個賽季的出席狀況如何變化。在行事曆圖表中，我們可以使用亮度來表示數值，使用者也能一眼掌握趨勢：

將滑鼠遊標懸停在個別日期上，即可查看基礎資料值。

如要建立行事曆圖表，請載入 calendar 套件，然後建立兩個資料欄，一欄用於日期和值。(我們將在日後的 Google Charts 版本中推出第三欄來自訂樣式。)

接著，使用日期值組填入資料列，如下所示。

<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 圖表中改變。

如果資料值全都是正值，顏色範圍從白色到藍色，最深的藍色表示最高值。如果有負值資料值，會以橘色顯示，如下圖所示。

這個日曆的程式碼與第 1 個程式碼類似，但各列會如下所示：

          [ 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 時空 - 羅馬粗體斜體、將外框設為相同的顏色，並加入 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 時空 - 羅馬粗體斜體，並在年份標籤與圖表底部加入 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	`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.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 } }; 類型：整數預設值：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 }`
colorAxis	這個物件可指定顏色資料欄值與顏色或漸層比例之間的對應關係。如要指定這個物件的屬性，您可以使用物件常值標記法，如下所示： {minValue: 0, colors: ['#FF0000', '#00FF00']} 類型：物件預設值：null
colorAxis.colors	要在圖表中指派給值的顏色。字串陣列，其中每個元素都是 HTML 顏色字串，例如：`colorAxis: {colors:['red','#004411']}`。您必須至少有兩個值：漸層會包含所有的值以及計算出的中介值，第一個顏色是最小值，最後一個顏色則代表最高。類型：色彩字串陣列預設值：null
colorAxis.maxValue	如果有出現，就可以指定圖表顏色資料的最大值。這個值及較高的顏色資料值會轉譯為 `colorAxis.colors` 範圍中的最後一個顏色。類型：數字預設：圖表資料中顏色欄的最大值
colorAxis.minValue	如果有出現，可指定圖表顏色資料的最小值。這個值及較低的顏色資料值會算繪為 `colorAxis.colors` 範圍中的第一個顏色。類型：數字預設值：圖表資料中顏色欄的最小值
colorAxis.values	如果有，即可控管值與顏色的關聯方式。每個值都會與 `colorAxis.colors` 陣列中的對應顏色相關聯。這些值適用於圖表顏色資料。系統會依據此處指定值的漸層完成上色。不指定這個選項的值等同於指定 [minValue, maxValue]。類型：數字陣列預設值：null
forceIFrame	在內嵌頁框中繪製圖表。(請注意，在 IE8 中，系統會忽略此選項；所有 IE8 圖表都會繪製成 iFrame。) 類型：布林值預設值：false
高度	圖表的高度，以像素為單位。類型：數字預設：所含元素的高度
noDataPattern	日曆圖表使用條紋對角線模式來表示特定日期沒有資料。使用 `noDataPattern.backgroundColor` 和 `noDataPattern.color` 選項覆寫灰階預設值，例如： noDataPattern: { backgroundColor: '#76a7fa', color: '#a0c3ff' } 類型：物件預設值：null
tooltip.isHtml	如要使用 SVG 轉譯 (而非 HTML 轉譯) 的工具提示，請設為 `false`。詳情請參閱「自訂工具提示內容」一文。注意：圓餅圖和泡泡圖圖表「不」支援透過工具提示欄資料角色自訂 HTML 工具提示內容。類型：布林值預設值：true
寬度	圖表的寬度，以像素為單位。類型：數字預設：所含元素的寬度

方法

方法
`draw(data, options)`	繪製圖表。只有在觸發 `ready` 事件後，圖表才能接受其他方法呼叫。`Extended description`。傳回類型：無
`getBoundingBox(id)`	傳回包含圖表元素 `id` 左側、頂端、寬度和高度的物件。尚未記錄 `id` 的格式 (這些是事件處理常式的傳回值)，但以下提供一些範例： `var cli = chart.getChartLayoutInterface();` 圖表區域的高度 `cli.getBoundingBox('chartarea').height` 長條圖第一連串的第三條長條寬度 `cli.getBoundingBox('bar#0#2').width` 圓餅圖第五個楔形的定界框 `cli.getBoundingBox('slice#4')` 垂直 (例如柱狀圖) 圖表資料的定界框： `cli.getBoundingBox('vAxis#0#gridline')` 水平 (例如長條圖) 的圖表資料定界框： `cli.getBoundingBox('hAxis#0#gridline')` 值是相對於圖表容器的值。請在繪製圖表「之後」呼叫此動作。傳回類型：物件
`getSelection()`	傳回所選圖表實體的陣列。可選取的實體包括長條圖、圖例項目和類別。長條對應資料表中的儲存格、資料欄的圖例項目 (資料列索引為空值)，以及資料列的類別 (欄索引為空值)。在這張圖表中，無論何時都只能選取一個實體。 `Extended description` 。傳回類型：選取元素的陣列
`setSelection()`	選取指定的圖表實體。取消先前選取的任何項目。可選取的實體包括長條圖、圖例項目和類別。長條對應資料表中的儲存格、資料欄的圖例項目 (資料列索引為空值)，以及資料列的類別 (欄索引為空值)。在這張圖表中，一次只能選取一個實體。 `Extended description` 。傳回類型：無
`clearChart()`	清除圖表並釋出所有分配的資源。傳回類型：無

事件

名稱
`error`	嘗試算繪圖表時發生錯誤時觸發。屬性：ID、訊息
`onmouseover`	在使用者將滑鼠遊標懸停在視覺實體上時觸發。傳回實體的資料列索引和日期值。如果實體沒有資料表元素，則資料列索引傳回的值會是 `undefined`。屬性：row、date
`onmouseout`	在使用者滑鼠遊標移離視覺實體時觸發。傳回實體的資料列索引和日期值。如果實體沒有資料表元素，則資料列索引傳回的值會是 `undefined`。屬性列、日期
`ready`	圖表已可供外部方法呼叫。如果您想與圖表互動，並在繪製後呼叫方法，您應「先」設定此事件的事件監聽器，並只在事件觸發後才呼叫這些事件。`draw` 屬性：無
`select`	在使用者點選視覺實體時觸發。如要瞭解已選取的項目，請呼叫 `getSelection()`。屬性：無

資料政策

所有程式碼和資料都經過處理並在瀏覽器中顯示。系統不會將任何資料傳送至任何伺服器。