圖表：區域圖 (舊版)

已淘汰

這個視覺化圖表已由新版本取代，請改用替代圖表。如要輕鬆遷移，請參閱版本資訊頁面。

簡介

使用 SVG 或 VML 在瀏覽器中算繪的面積圖。顯示點擊點的提示。點按圖例項目後，就能為線條建立動畫。

作者：Google

範例

在視覺化的 Playground 中自行編寫程式碼

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["areachart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, legend: 'bottom', title: 'Company Performance'});
      }
    </script>
  </head>

  <body>
    <div id="chart_div"></div>
  </body>
</html>

載入中

google.load 套件名稱為 "areachart".

  google.load("visualization", "1", {packages: ["areachart"]});

視覺化的類別名稱是 google.visualization.AreaChart 

  var visualization = new google.visualization.AreaChart(container);

資料格式

第一欄應為字串，且包含類別標籤。欄數量不限，但全部都必須是數字。每一欄會以獨立的一行顯示。

設定選項

名稱 類型 預設 說明
軸顏色 字串或物件 預設顏色 軸的色彩。 可能的值包括 backgroundColor 設定選項的值。
軸背景色彩 字串或物件 預設顏色 環繞軸背景的邊框。 可能的值包括 backgroundColor 設定選項的值。
軸字型大小 數字 自動 圖表軸文字的字型大小 (以像素為單位)。
backgroundColor 字串或物件 預設顏色 圖表主要區域的背景顏色。可能為下列其中一個選項：
  • HTML 支援的色彩字串 (例如「red」或「#00cc00」)
  • 包含 stroke fill 和 strokeSize 屬性的物件。 stroke 和 fill 應為顏色字串。筆劃大小須為數字。例如：{backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1}。如果只要填滿，就不用使用筆觸，請使用 stroke:null, strokeSize: 0。
框線顏色 字串或物件 預設顏色 圖表元素的邊框。 可能的值包括 backgroundColor 設定選項的值。
顏色 字串陣列 預設色彩 圖表元素的顏色。 字串陣列。每個元素都是字串，也就是 HTML 支援的顏色，例如「red」或「#00cc00」。
啟用工具提示 布林值 true 如果設為 true，系統會在使用者點選資料點時顯示工具提示。
焦點框線顏色 字串或物件 預設顏色 焦點位於圖表元素周圍的邊框 (滑鼠遊標指向)。 可能的值包括 backgroundColor 設定選項的值。
height 數字 容器高度 圖表的高度，以像素為單位。
已堆疊 布林值 否 如果設為 true，行值會堆疊 (累計)。
傳說 string 「右」 圖例的位置和類型。可能是下列其中一個值：
  • 「右」：在圖表右側。
  • 「left」：圖表左邊。
  • 「top」：圖表上方。
  • 'bottom' - 圖表下方。
  • 「無」：不顯示圖例。
圖例背景色彩 字串或物件 預設顏色 圖表圖例區域的背景顏色。可能的值包括 backgroundColor 設定選項的值。
圖例大小 數字 自動 圖例字型大小，以像素為單位。
圖例文字顏色 字串或物件 預設顏色 圖例文字顏色。 可能的值包括 backgroundColor 設定選項的值。
線條大小 數字 2 線條寬度 (單位為像素)。使用 0 可隱藏所有線條，只顯示線條。
logScale 布林值 否 如果為 true，主軸應以對數縮放。
最高 數字 自動 指定 Y 軸的最高格線。實際格線會納入兩個值中較大的值：最大選項值或最高資料值，無條件進位至下一個格狀標記。
分 數字 自動 指定最低的 Y 軸格線。實際格線是兩個值的下限：最小值選項值或最低資料值，無條件捨去至下一個格狀標記。
PointSize 數字 3 顯示點的大小 (以像素為單位)。使用 0 可隱藏所有點。
反向軸 布林值 否 如果設為 true，系統會從右到左繪製類別。預設為從左到右。
節目類別 布林值 true 如果為 true，則會顯示類別標籤。如果為 false，則不會。
title string 無標題 圖表上方顯示的文字。
標題 X string 無標題 顯示在水平軸下方的文字。
標題 Y string 無標題 垂直軸顯示的文字。
title 顏色 字串或物件 預設顏色 圖表標題的顏色。 可能的值包括 backgroundColor 設定選項的值。
title 字型大小 數字 自動 圖表標題的字型大小 (以像素為單位)。

tooltipFontSize		 數字 11 工具提示文字的字型大小。如果工具提示過小，無法容納指定字型的文字，則可能會減少上述情形。
工具提示高度
 數字 60 工具提示的高度 (以像素為單位)。工具提示高度是固定的，不會隨文字長度或字型大小而擴大或縮小。但只要超過 1/3，圖表大小就會遭到裁剪。
工具提示寬度 數字 120 工具提示的寬度 (以像素為單位)。工具提示寬度是固定的，不會隨文字長度或字型大小而擴大或縮小。但系統會將超過圖表寬度的內容全部裁剪。
width 數字 容器寬度 圖表的寬度 (以像素為單位)。

方法

方法 傳回類型 說明
draw(data, options) 無 繪製圖表。
getSelection() 所選元素的陣列 標準 getSelection() 實作。所選元素是資料欄和儲存格元素。使用者一次只能選取一欄或儲存格。
setSelection() 無 標準 setSelection() 實作，但只能選取一個元素。將所有選取的項目視為資料欄或儲存格選項。請注意，您無法選取標籤欄。

活動

名稱 說明 屬性
onmouseover 使用者將滑鼠遊標移到某個點時觸發，並傳入對應儲存格的列索引和欄索引。 列，欄
onmouseout 當使用者離開某個點時觸發，並傳入對應儲存格的列索引和欄索引。 列，欄
ready 圖表可供外部方法呼叫使用。如果您想要與圖表互動，並在繪製圖表後呼叫方法，請先為這個事件設定監聽器，然後再呼叫 draw 方法，並且只在事件觸發後呼叫這些方法 無
select 使用者點選點或圖例時觸發。選擇某個點時，系統會選取資料表中對應的儲存格；選取圖例後，就會選取資料表中對應的資料欄。如要瞭解您選取的項目，請呼叫 getSelection()。 無

資料政策

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