行事曆圖表

  1. Overview
  2. 簡易範例
  3. 天
  4. 週
  5. 月
  6. 年
  7. 載入中
  8. 資料格式
  9. 設定選項
  10. 方法
  11. 事件
  12. 資料政策

總覽

注意：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()。

屬性：無

資料政策

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