圖表：圓餅圖 (圖片)

重要資訊：自 2012 年 4 月 20 日起，Google 圖表的「圖片圖表」部分已正式淘汰。根據淘汰政策，這項政策仍然有效。

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

簡介

使用 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:["imagepiechart"]});
      google.charts.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.ImagePieChart(document.getElementById('chart_div'));

        chart.draw(data, {width: 430, height: 240, title: 'My Daily Activities'});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

載入中

google.charts.load 套件名稱為 "imagepiechart"：

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

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

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

資料格式

兩欄。 第一欄應為字串並包含配量標籤。第二欄應為數值，且包含區塊值。

設定選項

您可以在傳遞至視覺化 draw() 方法的 options 物件中指定下列選項。

名稱 類型 預設 說明
backgroundColor string 「#FFFFFF」(白色) 圖表 API 色彩格式的圖表背景色彩。
顏色 string 自動 指定用於所有系列的基本顏色；每個系列都會是指定顏色的分級。您可以透過圖表 API 色彩格式指定顏色。如果指定了 colors，系統會忽略這個屬性。
顏色 陣列<string> 自動 可用來為每個資料序列指派特定顏色。您可以透過圖表 API 色彩格式指定顏色。資料欄 i 用於資料欄 i，如果資料欄比顏色多一點，則會在開頭加上換行。如果所有系列都接受單一顏色的變化版本，請改用 color 選項。
啟用事件 布林值 否 讓圖表擲回使用者觸發的事件，例如點擊或滑鼠懸停。 僅適用於特定圖表類型。請參閱下方的活動一節。
height 數字 容器高度 圖表的高度，以像素為單位。
is3D 布林值 否 如果設為 True，系統會顯示 3D 圖表。
標籤 string 無

每個片段要顯示的標籤 (如果有的話)。選擇下列的值：

  • 'none' - 無標籤。
  • 'value' - 使用 Slice 值做為標籤。
  • 「name」：使用區塊名稱 (資料欄名稱)。
傳說 string 「右」 圖表上的圖例位置。選擇下列其中一個值：「top」、「bottom」、「left」、「right」或「none」。
title string 無標題 圖表上方顯示的文字。
width 數字 容器寬度 圖表的寬度 (以像素為單位)。

方法

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

活動

您可以報名參加一般映像檔圖表頁面所述的事件。

資料政策

請參閱 Chart API 記錄政策。