視覺呈現：圓餅圖

總覽

使用 SVG 或 VML 在瀏覽器中算繪的圓餅圖。將滑鼠遊標懸停在 Slice 上時，會顯示工具提示。

範例

 
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      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 options = {
          title: 'My Daily Activities'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

製作 3D 圓餅圖

如果將 is3D 選項設為 true，則圓餅圖會繪製成三個維度：

is3D 預設為 false，因此在這裡，我們已明確將其設為 true：

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      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 options = {
          title: 'My Daily Activities',
          is3D: true,
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart_3d" style="width: 900px; height: 500px;"></div>
  </body>
</html>

製作圓環圖

圓環圖是一種圓餅圖，中間有孔。您可以使用 pieHole 選項建立甜甜圈圖表：

pieHole 選項應設為介於 0 到 1 之間的數字，對應孔洞和圖表之間的弧度比率。在大部分的圖表上，0.4 和 0.6 之間的數字是最佳效果。等於或大於 1 的值會遭到忽略，值為 0 則會完全關閉小孔。

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      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 options = {
          title: 'My Daily Activities',
          pieHole: 0.4,
        };

        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="donutchart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

無法合併 pieHole 和 is3D 選項；如果這麼做，系統將忽略 pieHole。

請注意，Google 圖表會盡可能將標籤放置在最靠近片段中心的位置。如果圓環圖只有一個切片，切片的中心可能會落入圓環圖中。在此情況下，您可以變更標籤的顏色：
選項
        var options = {
          pieHole: 0.5,
          pieSliceTextStyle: {
            color: 'black',
          },
          legend: 'none'
        };
完整 HTML
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Effort', 'Amount given'],
          ['My all',     100],
        ]);

        var options = {
          pieHole: 0.5,
          pieSliceTextStyle: {
            color: 'black',
          },
          legend: 'none'
        };

        var chart = new google.visualization.PieChart(document.getElementById('donut_single'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="donut_single" style="width: 900px; height: 500px;"></div>
  </body>
</html>

旋轉圓餅圖

根據預設，圓餅圖會從第一個切片的左側開始直立。您可以使用 pieStartAngle 選項變更這項設定：

在這裡，我們選擇 pieStartAngle: 100，順時針旋轉圖表 100 度。(因此選擇了這個特定角度，以便讓「義大利文」標籤符合片段內)。

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Language', 'Speakers (in millions)'],
          ['German',  5.85],
          ['French',  1.66],
          ['Italian', 0.316],
          ['Romansh', 0.0791]
        ]);

      var options = {
        legend: 'none',
        pieSliceText: 'label',
        title: 'Swiss Language Use (100 degree rotation)',
        pieStartAngle: 100,
      };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

爆破 Slice

您可以使用 slices 選項的 offset 屬性，將圓餅區塊與其他圖表的其他部分分開：

如要分隔切片，請建立 slices 物件，並指派介於 0 至 1 之間的 offset。下方，我們會逐步為切片 4 (古吉拉特文)、12 (馬拉地文)、14 (Oriya) 和 15 (旁遮普文) 指派較大的偏移值：

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Language', 'Speakers (in millions)'],
          ['Assamese', 13], ['Bengali', 83], ['Bodo', 1.4],
          ['Dogri', 2.3], ['Gujarati', 46], ['Hindi', 300],
          ['Kannada', 38], ['Kashmiri', 5.5], ['Konkani', 5],
          ['Maithili', 20], ['Malayalam', 33], ['Manipuri', 1.5],
          ['Marathi', 72], ['Nepali', 2.9], ['Oriya', 33],
          ['Punjabi', 29], ['Sanskrit', 0.01], ['Santhali', 6.5],
          ['Sindhi', 2.5], ['Tamil', 61], ['Telugu', 74], ['Urdu', 52]
        ]);

        var options = {
          title: 'Indian Language Use',
          legend: 'none',
          pieSliceText: 'label',
          slices: {  4: {offset: 0.2},
                    12: {offset: 0.3},
                    14: {offset: 0.4},
                    15: {offset: 0.5},
          },
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

移除 Slice

如要省略切片，請將顏色變更為 'transparent'：

我們也使用 pieStartAngle 將圖表旋轉 135 度、使用 pieSliceText 從配量中移除文字，使用 tooltip.trigger 停用工具提示：

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Pac Man', 'Percentage'],
          ['', 75],
          ['', 25]
        ]);

        var options = {
          legend: 'none',
          pieSliceText: 'none',
          pieStartAngle: 135,
          tooltip: { trigger: 'none' },
          slices: {
            0: { color: 'yellow' },
            1: { color: 'transparent' }
          }
        };

        var chart = new google.visualization.PieChart(document.getElementById('pacman'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="pacman" style="width: 900px; height: 500px;"></div>
  </body>
</html>

配量瀏覽權限門檻

您可以將值設為該圓餅區塊要個別轉譯的門檻。這個值與圖表中的部分對應 (整個圖表的值為 1)。如要將這個門檻設為佔整體的百分比，請將所需百分比除以 100 (如果是 20% 的門檻，值為 0.2)。

sliceVisibilityThreshold: 5/8 // This is equivalent to 0.625 or 62.5% of the chart.

小於這個門檻的任何切片都會合併為單一「其他」配量，並匯總低於門檻的所有配量值。

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

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Pizza');
      data.addColumn('number', 'Populartiy');
      data.addRows([
        ['Pepperoni', 33],
        ['Hawaiian', 26],
        ['Mushroom', 22],
        ['Sausage', 10], // Below limit.
        ['Anchovies', 9] // Below limit.
      ]);

      var options = {
        title: 'Popularity of Types of Pizza',
        sliceVisibilityThreshold: .2
      };

      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }

載入中

google.charts.load 套件名稱為 "corechart"。

  google.charts.load("current", {packages: ["corechart"]});

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

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

資料格式

列：表格中的每一列都代表一個片段。

資料欄：

  第 0 欄 第 1 欄 ... 第 N 欄 (選用)
用途： 配量標籤 配量值 ... 選用角色
資料類型： 字串 號碼 ...
角色： 網域 資料 ...
選用的資料欄角色： 無 無 ...

設定選項

名稱
backgroundColor

圖表主要區域的背景顏色。可以是簡單的 HTML 顏色字串 (例如 'red' 或 '#00cc00')，或具有下列屬性的物件。

類型：字串或物件
預設：「white」
backgroundColor.stroke

圖表邊框顏色，以 HTML 顏色字串表示。

類型：字串
預設值：「#666」
backgroundColor.strokeWidth

邊框寬度 (以像素為單位)。

類型：數字
預設值：0
backgroundColor.fill

圖表填滿顏色，以 HTML 顏色字串表示。

類型：字串
預設：「white」
chartArea

此物件可讓成員設定圖表區域的位置和大小 (繪製圖表時不含軸和圖例)。系統支援兩種格式：一個數字，或後接 % 的數字。簡單數字是以像素為單位的值，數字後面加上 % 代表百分比。範例：chartArea:{left:20,top:0,width:'50%',height:'75%'}

類型：物件
預設值：null
chartArea.backgroundColor
圖表區域背景顏色。使用字串時，可以是十六進位字串 (例如「#fdc」) 或英文顏色名稱。使用物件時，可以提供下列屬性：
  • stroke：以十六進位字串或英文顏色名稱提供的顏色。
  • strokeWidth：如有提供，會在指定寬度的圖表區域 (以及 stroke 的顏色) 周圍繪製邊框。
類型：字串或物件
預設：「white」
chartArea.left

從左框線繪製圖表的時間長度。

類型：數字或字串
預設：自動
chartArea.top

圖表與上框線的繪製距離。

類型：數字或字串
預設：自動
chartArea.width

圖表區域寬度。

類型：數字或字串
預設：自動
chartArea.height

圖表區域高度。

類型：數字或字串
預設：自動
顏色

圖表元素要使用的顏色。字串陣列，其中每個元素都是 HTML 顏色字串，例如：colors:['red','#004411']。

類型：字串陣列
預設：預設顏色
enableInteractivity

圖表是否會擲回以使用者為基礎的事件，或是對使用者互動做出反應。如果設為 False，圖表不會擲回「select」或其他互動型事件 (但「會」擲回已就緒或錯誤的事件)，且不會顯示懸停文字，或根據使用者輸入內容而變更。

類型：布林值
預設值：true
fontSize

圖表中所有文字的預設字型大小 (以像素為單位)。您可以使用特定圖表元素的屬性覆寫這項設定。

類型：數字
預設：自動
fontName

圖表中所有文字的預設字型。您可以使用特定圖表元素的屬性覆寫這項設定。

類型：字串
預設值：「trigger」
forceIFrame

在內嵌頁框中繪製圖表。(請注意，在 IE8 中，系統會忽略此選項；所有 IE8 圖表都會繪製成 iFrame。)

類型：布林值
預設值：false
高度

圖表的高度，以像素為單位。

類型：數字
預設：所含元素的高度
是 3D

如果為 true，則顯示 3D 圖表。

類型：布林值
預設值：false
傳說

由成員組成的物件，可設定圖例的各個層面。如要指定這個物件的屬性，您可以使用物件常值標記法，如下所示：

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
類型：物件
預設值：null
legend.alignment

圖例的對齊。可以是下列其中一項：

  • 「開始」：與為圖例分配的區域起點對齊。
  • 「center」：以圖例的分配區域為中心。
  • 「end」：與圖例的分配區域結尾對齊。

起點、中心和結束點是以圖例的樣式 (垂直或水平) 為準。舉例來說，在「右側」圖例中，「start」和「end」分別位於頂端和底部。如果是「頂端」圖例，「start」和「end」則分別位於區域的左側和右側。

預設值取決於圖例位置。「bottom」圖例的預設值為「center」，其他圖例則預設為「start」。

類型：字串
預設：自動
legend.position

圖例位置。可以是下列其中一項：

  • 「bottom」- 在圖表下方顯示圖例。
  • 「labeled」：將切片連結至資料值的線條。
  • 「left」- 顯示圖表左側的圖例。
  • 「無」- 不顯示圖例。
  • 「right」：在圖表右側顯示圖例。
  • 「top」：在圖表上方顯示圖例。
類型：字串
預設值：「right」
legend.maxLines

圖例中的行數上限。將這個項目設為大於一的數字，即可為圖例新增線條。請注意：決定實際算繪行數的確切邏輯仍在浮動中。

此選項目前僅適用於圖例.position 為「top」時。

類型：數字
預設值：1
legend.textStyle

指定圖例文字樣式的物件。物件的格式如下：

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color 可以是任何 HTML 顏色字串，例如 'red' 或 '#00cc00'。另請參閱 fontName 和 fontSize。

類型：物件
預設： {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
pieHole

如果介於 0 和 1 之間，會顯示圓環圖。擁有半徑等於 number 倍圖表半徑的孔。

類型：數字
預設值：0
pieSliceBorderColor

切片邊框的顏色。只有在圖表為二維圖表時才能使用。

類型：字串
預設：「white」
pieSliceText

片段上顯示的文字內容。可以是下列其中一項：

  • 「percentage」：扇區大小佔總量的百分比。
  • 「值」：切片的量化值。
  • 「label」：片段名稱。
  • 「無」- 不顯示任何文字。
類型：字串
預設：「percentage」
pieSliceTextStyle

指定片段文字樣式的物件。物件的格式如下：

{color: <string>, fontName: <string>, fontSize: <number>}

color 可以是任何 HTML 顏色字串，例如 'red' 或 '#00cc00'。另請參閱 fontName 和 fontSize。

類型：物件
預設： {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
pieStartAngle

讓圖表旋轉的角度 (以度為單位)。0 的預設方向會直接朝向第一個切片的最左側邊緣。

類型：數字
預設： 0
reverseCategories

如果為 true，會逆時針繪製切片。預設為順時針繪製。

類型：布林值
預設值：false
pieResidueSliceColor

包含 sliceVisibilityThreshold 以下所有配量的組合區塊顏色。

類型：字串
預設： '#ccc'
pieResidueSliceLabel

組合片段的標籤，其中包含 sliceVisibilityThreshold 以下的所有切片。

類型：字串
預設：「其他」
切片

物件的陣列，每個物件都會說明圓餅圖中對應片段的格式。如果要針對配量使用預設值，請指定空白物件 (即{})。如未指定片段或值，則會使用全域值。每個物件都支援下列屬性：

  • color - 此切片要使用的顏色。指定有效的 HTML 顏色字串。
  • offset - 要從 0.0 (完全不) 到 1.0 (圓餅的半徑) 之間分隔片段與其他圓餅圖之間的距離。
  • textStyle - 覆寫這個切片的全域 pieSliceTextStyle。

您可以指定物件的陣列，其中每個陣列都會依指定順序套用至配量，或者也可以指定物件，讓每個子項都有數字鍵代表要套用至哪一個切片。例如，以下兩個宣告完全相同，並將第一個切片宣告為黑色，第四個片段則宣告為紅色：

slices: [{color: 'black'}, {}, {}, {color: 'red'}]
slices: {0: {color: 'black'}, 3: {color: 'red'}}
類型：物件陣列，或含有巢狀物件的物件
預設：{}
sliceVisibilityThreshold

圓餅圖的分數值，低於該圓餅圖不會單獨顯示。凡是未超過這個門檻的配量，都會合併到單一「其他」扇區，其大小為所有大小的總和。預設不會個別顯示任何小於一半的切片。

// Slices less than 25% of the pie will be
// combined into an "Other" slice.
sliceVisibilityThreshold: .25
類型：數字
預設：半一度 (.5/360 或 1/720 或 .0014)
title

顯示在圖表上方的文字。

類型：字串
預設：無標題
titleTextStyle

指定標題文字樣式的物件。物件的格式如下：

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color 可以是任何 HTML 顏色字串，例如 'red' 或 '#00cc00'。另請參閱 fontName 和 fontSize。

類型：物件
預設： {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
工具提示

可讓成員設定各種工具提示元素的物件。如要指定這個物件的屬性，您可以使用物件常值標記法，如下所示：

{textStyle: {color: '#FF0000'}, showColorCode: true}
類型：物件
預設值：null
tooltip.ignoreBounds

如果設為 true，系統就會允許工具提示的繪圖，超出圖表任何邊的邊界。

注意：這僅適用於 HTML 工具提示。透過 SVG 工具提示啟用這項功能時，系統會裁剪圖表邊界外的所有溢位。詳情請參閱「自訂工具提示內容」一文。

類型：布林值
預設值：false
tooltip.isHtml

如果設為 true，將使用 HTML 算繪 (而非 SVG 算繪) 的工具提示。詳情請參閱「自訂工具提示內容」一文。

注意：泡泡圖圖表「不」支援透過工具提示欄資料角色自訂 HTML 工具提示內容。

類型：布林值
預設值：false
tooltip.showColorCode

設為 true 時，在工具提示中的配量資訊旁邊顯示彩色方塊。

類型：布林值
預設值：false
tooltip.text

當使用者將滑鼠遊標懸停在圓餅區塊上時，要顯示的資訊。支援下列值：

  • 'secondary' - [預設] 同時顯示片段的絕對值和整體百分比。
  • 「value」：僅顯示片段的絕對值。
  • 「percentage」- 只顯示該片段代表的整體百分比。
類型：字串
預設：「secondary」
tooltip.textStyle

指定工具提示文字樣式的物件。物件的格式如下：

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color 可以是任何 HTML 顏色字串，例如 'red' 或 '#00cc00'。另請參閱 fontName 和 fontSize。

類型：物件
預設： {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
tooltip.trigger

觸發工具提示的使用者互動：

  • 「焦點」- 當使用者將遊標懸停在元素上時，就會顯示工具提示。
  • 「無」- 不會顯示工具提示。
  • 「selection」- 使用者選取元素時，系統會顯示工具提示。
類型：字串
預設：「focus」
寬度

圖表的寬度，以像素為單位。

類型：數字
預設：所含元素的寬度

方法

方法
draw(data, options)

繪製圖表。只有在觸發 ready 事件後，圖表才能接受其他方法呼叫。Extended description。

傳回類型：無
getAction(actionID)

傳回含有要求的 actionID 的工具提示動作物件。

傳回類型：物件
getBoundingBox(id)

傳回包含圖表元素 id 左側、頂端、寬度和高度的物件。尚未記錄 id 的格式 (這些是事件處理常式的傳回值)，但以下提供一些範例：

var cli = chart.getChartLayoutInterface();

圖表區域的高度
cli.getBoundingBox('chartarea').height
長條圖第一連串的第三條長條寬度
cli.getBoundingBox('bar#0#2').width
圓餅圖第五個楔形的定界框
cli.getBoundingBox('slice#4')
垂直 (例如柱狀圖) 圖表資料的定界框：
cli.getBoundingBox('vAxis#0#gridline')
水平 (例如長條圖) 的圖表資料定界框：
cli.getBoundingBox('hAxis#0#gridline')

值是相對於圖表容器的值。請在繪製圖表「之後」呼叫此動作。

傳回類型：物件
getChartAreaBoundingBox()

傳回包含圖表內容左側、頂端、寬度和高度的物件 (即不含標籤和圖例)：

var cli = chart.getChartLayoutInterface();

cli.getChartAreaBoundingBox().left
cli.getChartAreaBoundingBox().top
cli.getChartAreaBoundingBox().height
cli.getChartAreaBoundingBox().width

值是相對於圖表容器的值。請在繪製圖表「之後」呼叫此動作。

傳回類型：物件
getChartLayoutInterface()

傳回包含圖表在螢幕上位置相關資訊的物件，以及其元素。

以下方法可在傳回的物件上呼叫：

  • getBoundingBox
  • getChartAreaBoundingBox
  • getHAxisValue
  • getVAxisValue
  • getXLocation
  • getYLocation

請在繪製圖表「之後」呼叫此動作。

傳回類型：物件
getHAxisValue(xPosition, optional_axis_index)

傳回 xPosition 的水平資料值，該值是與圖表容器左側邊緣的像素偏移值。可以是負數。

範例：chart.getChartLayoutInterface().getHAxisValue(400)。

請在繪製圖表「之後」呼叫此動作。

傳回類型：數字
getImageURI()

傳回已序列化為圖片 URI 的圖表。

請在繪製圖表「之後」呼叫此動作。

請參閱列印 PNG 圖表。

傳回類型：字串
getSelection()

傳回所選圖表實體的陣列。 可選取的實體是配量和圖例項目。 在這張圖表中，無論何時都只能選取一個實體。 Extended description 。

傳回類型：選取元素的陣列
getVAxisValue(yPosition, optional_axis_index)

傳回位於 yPosition 的垂直資料值，該值為與圖表容器頂部邊緣往下的像素偏移。可以是負數。

範例：chart.getChartLayoutInterface().getVAxisValue(300)。

請在繪製圖表「之後」呼叫此動作。

傳回類型：數字
getXLocation(dataValue, optional_axis_index)

傳回相對於圖表容器左側邊緣的 dataValue 像素 X 座標。

範例：chart.getChartLayoutInterface().getXLocation(400)。

請在繪製圖表「之後」呼叫此動作。

傳回類型：數字
getYLocation(dataValue, optional_axis_index)

傳回相對於圖表容器頂部邊緣的 dataValue 像素 y 座標。

範例：chart.getChartLayoutInterface().getYLocation(300)。

請在繪製圖表「之後」呼叫此動作。

傳回類型：數字
removeAction(actionID)

從圖表中移除要求 actionID 的工具提示動作。

傳回類型： none
setAction(action)

設定在使用者點選動作文字時執行的工具提示動作。

setAction 方法會將物件做為動作參數。這個物件應指定 3 個屬性：id (所設定動作的 ID)、text (應顯示在動作工具提示中的文字) 和 action (使用者按一下動作文字時應執行的函式)。

請在呼叫圖表的 draw() 方法之前，設定所有及所有工具提示動作。延伸說明。

傳回類型： none
setSelection()

選取指定的圖表實體。取消先前選取的任何項目。 可選取的實體是配量和圖例項目。 在這張圖表中，一次只能選取一個實體。 Extended description 。

傳回類型：無
clearChart()

清除圖表並釋出所有分配的資源。

傳回類型：無

事件

如要進一步瞭解如何使用這些事件，請參閱基本互動、處理事件和觸發事件。

名稱
click

使用者點選圖表內時觸發。可用於識別使用者點選標題、資料元素、圖例項目、軸、格線或標籤的時機。

屬性： targetID
error

嘗試算繪圖表時發生錯誤時觸發。

屬性：ID、訊息
onmouseover

在使用者將滑鼠遊標懸停在視覺實體上時觸發。回傳對應資料表元素的列和欄索引。 切片或圖例項目與資料表中的一列相關 (欄索引為空值)。

屬性：列、欄
onmouseout

在使用者滑鼠遊標移離視覺實體時觸發。回傳對應資料表元素的列和欄索引。 切片或圖例項目與資料表中的一列相關 (欄索引為空值)。

屬性：列、欄
ready

圖表已可供外部方法呼叫。如果您想與圖表互動，並在繪製後呼叫方法，您應「先」設定此事件的事件監聽器，並只在事件觸發後才呼叫這些事件。draw

屬性：無
select

在使用者點選視覺實體時觸發。如要瞭解已選取的項目，請呼叫 getSelection()。

屬性：無

資料政策

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