視覺化：面積圖 (舊版)

已淘汰

這個圖表已由新版本取代，請改用該版本。如需輕鬆遷移，請參閱版本資訊頁面。

總覽

使用 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);

資料格式

第一欄應為字串且包含類別標籤，可追蹤的欄數量不限，所有欄都必須為數字。 每個資料欄會逐行顯示。

設定選項

名稱 類型 預設 說明
axisColor 字串或物件 預設顏色 軸的顏色。 可能的值會是 backgroundColor 設定選項的值。
axisBackgroundColor 字串或物件 預設顏色 軸背景的邊框。可能的值會是 backgroundColor 設定選項的值。
axisFontSize 號碼 自動 圖表軸文字的字型大小 (以像素為單位)。
backgroundColor 字串或物件 預設顏色 圖表主要區域的背景顏色。可能是下列其中一個選項：
  • 由 HTML 支援顏色的字串，例如「red」或「#00cc00」
  • 具有 stroke fill 和 strokeSize 屬性的物件。stroke 和 fill 應為有顏色的字串。strokeSize 為數字。例如：{backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1}。如果只要在不填色的情況下直接填滿，請使用 stroke:null, strokeSize: 0。
borderColor 字串或物件 預設顏色 圖表元素的邊框。 可能的值會是 backgroundColor 設定選項的值。
顏色 字串陣列 預設色彩 圖表元素使用的顏色。 字串陣列。每個元素都是 HTML 所支援顏色的字串，例如「red」或「#00cc00」。
enableTooltip boolean true 如果設為 true，則在使用者點選資料點時顯示工具提示。
focusBorderColor 字串或物件 預設顏色 聚焦元素 (以滑鼠指向) 的圖表元素邊框。 可能的值會是 backgroundColor 設定選項的值。
高度 號碼 容器高度 圖表的高度 (以像素為單位)。
isStacked boolean false 如果設為 True，線條值就會堆疊 (累計)。
傳說 字串 「右」 圖例位置和類型。可能是下列其中一個值：
  • 「right」：圖表右側。
  • 「left」- 位於圖表左側。
  • 「top」：圖表上方。
  • 「bottom」- 圖表下方。
  • 「無」- 不顯示圖例。
legendBackgroundColor 字串或物件 預設顏色 圖表圖例區域的背景顏色。可能的值會是 backgroundColor 設定選項的值。
legendFontSize 號碼 自動 圖例字型的大小 (以像素為單位)。
legendTextColor 字串或物件 預設顏色 圖例文字顏色。 可能的值會是 backgroundColor 設定選項的值。
lineSize 號碼 2 線條寬度 (以像素為單位)。使用 0 即可隱藏所有線條，只顯示點。
logScale boolean false 如果設為 true，主軸應以對數方式縮放。
max 號碼 自動 指定最高 Y 軸格線線。實際格線將與下列兩個值取較大的值：最大值或最高的資料值，並四捨五入至下一個較高格狀標記。
分鐘 號碼 自動 指定最低的 Y 軸格線線。實際格線將為兩個值較低的兩個值：最小值或最低資料值，無條件捨去至下一個較低格狀標記。
pointSize 號碼 3 顯示的點大小 (以像素為單位)。輸入 0 即可隱藏所有點。
reverseAxis boolean false 如果設為 true，則系統會由右至左繪製類別。預設為從左到右繪製。
showCategories boolean true 設為 true 時，系統會顯示類別標籤。如果為 false，則不會。
title 字串 無標題 顯示在圖表上方的文字。
titleX 字串 無標題 顯示在橫軸下方的文字。
titleY 字串 無標題 要依縱軸顯示的文字。
titleColor 字串或物件 預設顏色 圖表標題的顏色。 可能的值會是 backgroundColor 設定選項的值。
titleFontSize 號碼 自動 圖表標題的字型大小 (以像素為單位)。

tooltipFontSize		 號碼 11 工具提示文字的字型大小。如果工具提示太小，無法容納指定字型中的文字，這個可能就會減少。
tooltipHeight
 號碼 60 工具提示的高度，以像素為單位。工具提示高度是固定的，絕不會配合文字的長度或字型大小而放大或縮小。但圖表高度超過 1/3 時，圖表高度會遭到裁剪。
tooltipWidth 號碼 120 工具提示的寬度 (以像素為單位)。工具提示的寬度是固定的，絕不會配合文字的長度或字型大小而放大或縮小。但超過圖表寬度的部分都會遭到裁剪。
寬度 號碼 容器寬度 圖表的寬度 (以像素為單位)。

方法

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

事件

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

資料政策

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