視覺呈現:圓餅圖

總覽

使用 SVGVML 在瀏覽器中算繪的圓餅圖。將滑鼠遊標懸停在 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>

無法合併 pieHoleis3D 選項;如果這麼做,系統將忽略 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'。另請參閱 fontNamefontSize

類型:物件
預設: {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'。另請參閱 fontNamefontSize

類型:物件
預設: {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'。另請參閱 fontNamefontSize

類型:物件
預設: {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'。另請參閱 fontNamefontSize

類型:物件
預設: {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()

屬性:

資料政策

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