日曆圖表

簡介

注意:JavaScript 會計算從 zero 開始的月份,1 月為 0,2 月為 1,12 則為 11。如果您的日曆圖表顯示為一個月,這就是原因。

日曆圖表是一種視覺化的圖表,用來顯示一段期間內 (例如數月或數年) 的活動。最適合用來呈現特定時段 (如星期幾) 或其長期趨勢的趨勢。

日後的 Google 圖表版本將有重大修訂,日曆圖表可能經過大幅修改。

系統會透過 SVGVML,以使用者瀏覽器適用的日曆顯示日曆圖表。與所有 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.yearLabelcalendar.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

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 顏色字串,例如:colorAxis: {colors:['red','#004411']}。您必須加入至少兩個值;梯度將包含所有值加上計算過的中繼值,其中第一個顏色做為最小值,最後一個顏色則是最高值。

類型:色彩字串陣列
預設值:空值
色彩 Axis.maxValue

如果存在,請指定圖表顏色資料的最大值。這個值 (或更高) 的顏色資料值會轉譯為 colorAxis.colors 範圍中的最後一個顏色。

類型:數字
預設值:圖表資料中的色彩欄最大值
colorAxis.minValue

如果存在,請指定圖表顏色資料的最小值。此數值更低的色彩資料值將是 colorAxis.colors 範圍內的第一個顏色。

類型:數字
預設值:圖表資料中色彩欄的最小值
colorAxis.values

如果有,請控制值與顏色的關聯方式。每個值都與 colorAxis.colors 陣列中的對應顏色相關聯。這些值會套用至圖表顏色資料。顏色是按照此處指定值的梯度進行。如未指定此選項的值,就等同於指定 [minValue, maxValue]。

類型:數字陣列
預設值:空值
ForceIFrame

在內嵌頁框中繪製圖表。(請注意,在 IE8 中,系統會忽略此選項;所有 IE8 圖表都會以 i-frames 繪製)。

類型:布林值
預設值:false
height

圖表的高度,以像素為單位。

類型:數字
預設:所含元素的高度
無資料模式

日曆圖表採用條紋的對角線模式,表示某一天內沒有任何資料。使用 noDataPattern.backgroundColornoDataPattern.color 選項覆寫灰階預設值,例如:

noDataPattern: {
  backgroundColor: '#76a7fa',
  color: '#a0c3ff'
}
      
類型:物件
預設值:空值
tooltip.isHtml

如要使用 SVG 轉譯 (而非 HTML 轉譯) 工具提示,請設為 false。詳情請參閱自訂工具提示內容

注意:透過「圓餅圖」和「對話框」的圖表「不支援」

類型:布林值
預設:
width

圖表的寬度 (以像素為單位)。

類型:數字
預設:內含元素的寬度

方法

方法
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

屬性:資料列、日期
onmouseout

當使用者離開視覺實體時觸發。傳回實體的資料列索引和日期值。如果沒有實體的資料資料表元素,則針對資料列索引傳回的值會是 undefined

Properties 資料列、日期
ready

圖表可供外部方法呼叫使用。如果您想要與圖表互動,並在繪製圖表後呼叫方法,請先為這個事件設定監聽器,然後再呼叫 draw 方法,並且只在事件觸發後呼叫這些方法。

屬性:無
select

使用者點選視覺實體時觸發。如要瞭解所選項目,請呼叫 getSelection()

屬性:無

資料政策

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