視覺化：圓餅圖 (舊版)

已淘汰

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

  1. Overview
  2. 範例
  3. 載入中
  4. 資料格式
  5. 設定選項
  6. 方法
  7. 事件
  8. 資料政策

總覽

使用 SVG 或 VML 在瀏覽器中算繪的圓餅圖。點選配量時顯示提示。按一下圖例項目時，可為 Slice 加入動畫效果。

簽署人：Google

範例

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

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["piechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, is3D: true, title: 'My Daily Activities'});
      }
    </script>
  </head>

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

載入中

google.load 套件名稱為 "piechart"

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

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

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

資料格式

兩欄。 第一欄應為字串且包含切片標籤。 第二欄應為數字且包含片段值。

設定選項

名稱 類型 預設 說明
backgroundColor 字串或物件 預設顏色 圖表主要區域的背景顏色。選擇下列其中一種做法：
  • 由 HTML 支援顏色的字串，例如「red」或「#00cc00」，或
  • n 物件的說明，包含以下屬性：
    • stroke - 描述圖表邊框顏色的 HTML 顏色字串。
    • fill - 描述圖表背景顏色的 HTML 顏色字串。
    • strokeSize - 用來表示圖表邊框粗細的數字 (以像素為單位)。如果是無邊框，此值可設為 0。
      例如：{backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1}。
borderColor 字串或物件 預設顏色 圖表元素的邊框。 可能的值會是 backgroundColor 設定選項的值。
顏色 字串或物件的陣列 預設色彩

顏色陣列，其中每個元素都指定一個序列的顏色。您應該為每個序列指定一個陣列元素。

  • 如果是 is3D=false，則這是 HTML 顏色的陣列。範例：color:['#00FF00','orange']
  • 如果設為 is3D=true，則是 HTML 顏色或此類型的物件：{color:face_color, darker:shade_color}，其中 color 是元素的錶面顏色，darker 則是陰影顏色。 不過，如果您為 3D 物件指定 HTML 顏色，臉孔和色調都會設為相同的顏色，並降低 3D 效果。範例：{is3D:true, colors:[{color:'#FF0000', darker:'#680000'}, {color:'cyan', darker:'deepskyblue'}]}
enableTooltip boolean true 如果設為 true，則在使用者點選片段上時顯示工具提示。
focusBorderColor 字串或物件 預設顏色 聚焦元素 (以滑鼠指向) 的圖表元素邊框。 可能的值會是 backgroundColor 設定選項的值。
高度 號碼 容器高度 圖表的高度 (以像素為單位)。
是 3D boolean false 如果設為 True，則會顯示 3D 圖表。
傳說 字串 「右」 圖例位置和類型。可能是下列其中一個值：
  • 「right」：圖表右側。
  • 「left」- 位於圖表左側。
  • 「top」：圖表上方。
  • 「bottom」- 圖表下方。
  • 「label」：切片附近的標籤。
  • 「無」- 不顯示圖例。
legendBackgroundColor 字串或物件 預設顏色 圖表圖例區域的背景顏色。可能的值會是 backgroundColor 設定選項的值。
legendFontSize 號碼 自動 圖例字型的大小 (以像素為單位)。
legendTextColor 字串或物件 預設顏色 圖例文字顏色。 可能的值會是 backgroundColor 設定選項的值。
pieJoinAngle 號碼 0 低於這個角度的切片將會合併為一個標示為「其他」的一般切片。
pieMinimalAngle 號碼 0

任何小於這個角度的切片都不會繪製在圓餅圖中 (不過仍會取得圖例)。其餘配量會展開以固定比例填滿。注意：這可能會導致顯示的值扭曲，尤其是當這個數字大時，因為數量正好從派餅上移除。

為了計算切面大小，小於 pieJoinAngle 的第一個角會彙整至「其他」切片，然後繪製所有大於 pieMinimalAngle 的切片
title 字串 無標題 顯示在圖表上方的文字。
titleColor 字串或物件 預設顏色 圖表標題的顏色。 可能的值會是 backgroundColor 設定選項的值。
titleFontSize 號碼 自動 圖表標題的字型大小 (以像素為單位)。

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

方法

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

事件

名稱 說明 屬性
onmouseover 當使用者將滑鼠遊標懸停在某片段上，並傳入對應儲存格的列和欄索引時觸發。 列，欄
onmouseout 當使用者滑鼠離開某片段，並傳入對應儲存格的列和欄索引時觸發。 列，欄
ready 圖表已可供外部方法呼叫。如果您想與圖表互動，以及在繪製圖表後呼叫方法，您應「先」為此事件設定事件監聽器，再呼叫 draw 方法，而且只在事件觸發後呼叫這些事件監聽器。 無
select

在使用者點選某個片段或圖例時觸發。選取切片時，系統會選取資料表中的對應儲存格；選取圖例時，系統會選取資料表中對應資料欄。如要瞭解您選取的項目，請呼叫 getSelection()。

注意：按一下切片，不會在選取與取消選取儲存格之間切換，點選切片一律會選取該區塊。另一方面，按一下圖例項目則可在選取和取消選取資料列之間切換。

 無

資料政策

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