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

視覺化：面積圖 (圖片)

重要事項：Google 圖表工具的「圖片圖表」部分已自 2012 年 4 月 20 日起正式淘汰。但請放心，該功能將根據淘汰政策持續運作。

Overview
範例
載入中
資料格式
設定選項
方法
事件
資料政策

總覽

使用 Google Charts API 顯示為圖片的面積圖。

範例

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["imageareachart"]});
      google.charts.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.ImageAreaChart(document.getElementById('chart_div'));

        chart.draw(data, {width: 400, height: 240, min: 300, max: 1400, title: 'Yearly Expenses and Sales'});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

載入中

google.charts.load 套件名稱為 "imageareachart"

  google.charts.load('current', {packages: ['imageareachart']});

視覺呈現的類別名稱為 google.visualization.ImageAreaChart

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

資料格式

每一欄都代表圖表中的一條線，每個項目都是位於相同 X 軸點的 Y 軸值，視覺化內容則會以直線連接，然後填滿線條下方的區域。

系統會依資料欄處理資料，從資料欄從 0 開始依序處理。您偏好先寫出最高的行，然後把較低的行寫在較低的線條上，因為如果先繪製較下方的行，較高的線條會繪製並隱藏任何下一行。因此，請嘗試讓第 1 欄的點高於第 2 欄、第 2 欄比第 3 欄高，依此類推。如果右欄比左欄高一或兩個點，可能會局部遮蔽下一行，但應該還是看得到。

除了第一個資料，所有資料都必須是數字類型，可以是數字或字串。如果第一欄是字串類型，第一欄項目會在 X 上顯示為標籤；如果第一欄是數字，系統就不會顯示 X 軸標籤。所有欄 (第一欄除外) 都必須是數字。資料欄數量沒有限制。

設定選項

名稱	類型	預設	說明
backgroundColor	字串	「#FFFFFF」(白色)	圖表 API 顏色格式的圖表背景顏色。
顏色	陣列<字串>	自動	藉此為各個資料序列指定特定顏色。您可以使用圖表 API 顏色格式指定顏色。顏色 i 會用於資料欄 i，如果資料欄超過顏色，則會從頭到頭換行。如果所有系列都接受單一顏色的變化版本，請改用 `color` 選項。
enableEvents	boolean	false	讓圖表擲回使用者觸發的事件，例如點擊或滑鼠遊標懸停。僅支援特定圖表類型。請參閱下方的「事件」一節。
高度	號碼	容器高度	圖表的高度 (以像素為單位)。
傳說	字串	「右」	圖例位置和類型。可能是下列其中一個值：「right」：圖表右側。「left」- 位於圖表左側。「top」：圖表上方。「bottom」- 圖表下方。「無」- 不顯示圖例。
max	號碼	自動	Y 軸中顯示的最大值。
分鐘	號碼	自動	Y 軸顯示的最低值。
showCategoryLabels	boolean	true	如果設為 False，系統會移除類別標籤 (X 軸標籤)。
showValueLabels	boolean	true	如果設為 False，系統會移除值的標籤 (Y 軸標籤)。
title	字串	無標題	顯示在圖表上方的文字。
valueLabelsInterval	號碼	自動	值軸標籤的顯示間隔。舉例來說，如果 `min` 為 0，`max` 為 100，而 `valueLabelsInterval` 為 20，圖表就會顯示軸標籤如下 (0、20、40、60、80 100)。
寬度	號碼	容器寬度	圖表的寬度 (以像素為單位)。

方法

方法	傳回類型	說明
`draw(data, options)`	無	繪製圖表。

事件

您可以註冊聆聽一般圖片圖表頁面上所述的事件。

資料政策

請參閱圖表 API 記錄政策。