視覺呈現:圓餅圖

簡介

使用 SVGVML 在瀏覽器中轉譯的圓餅圖。將遊標懸停在配量上時顯示工具提示。

範例

<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,則系統會繪製出 3 維度的圓餅圖:

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 Charts 會盡可能將標籤放置於靠近區塊中央的位置。如果只有一片甜甜圈圖表,該部分的中央可能會落在甜甜圈孔中。在此情況下,請變更標籤的顏色:

選項
        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 度。(因此選擇特定角度,讓「義大利」標籤符合 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([
          ['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>

爆炸切片

您可以使用 slices 選項的 offset 屬性來區隔圓餅圖和圖表的其餘部分:

如要分割配量,請建立 slices 物件,並將介於 0 至 1 之間的適當切片編號為 offset。在下方,我們會為第 4 段 (古吉拉特)、第 12 節 (馬拉提)、第 14 節 (奧里雅文) 和第 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.

系統會將小於這個門檻的所有 Slice 合併成單一「其他」區段,並將所有區塊的門檻值低於門檻值。

    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 欄 (選填)
用途: Slice 標籤 Slice 值 選用角色
資料類型: string 數字
角色: 網域 資料
選用的資料欄角色

設定選項

名稱
backgroundColor

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

類型:字串或物件
預設:「white」
背景色彩

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

類型:字串
預設值:「#666」
背景色彩.筆寬度

框線寬度 (單位為像素)。

類型:數字
預設:0
background..fill

圖表會以 HTML 色彩字串填入顏色。

類型:字串
預設:「white」
圖表區域

擁有成員可設定圖表區域位置和大小的物件 (繪製圖表本身的位置,不含軸和圖例)。系統支援數字格式:範例:chartArea:{left:20,top:0,width:'50%',height:'75%'}

類型:物件
預設值:空值
圖表區域
圖表區域背景顏色。使用字串時,可以是十六進位字串 (例如「#fdc」) 或英文顏色名稱。使用物件時,您可以提供下列屬性:
  • stroke:以十六進位字串或英文顏色名稱提供的顏色。
  • strokeWidth:如有提供,在指定的寬度區域為圖表寬度周圍加上邊框 (使用 stroke 的顏色)。
類型:字串或物件
預設:「white」
圖表區域

從左框線繪製圖表的程度。

類型:數字或字串
預設:自動
排行榜區域

從上方邊框繪製圖表的程度。

類型:數字或字串
預設:自動
圖表區域

圖表區域寬度。

類型:數字或字串
預設:自動
圖表區域

圖表區域高度。

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

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

類型:字串陣列
預設:預設顏色
啟用互動功能

圖表是否擲回了以使用者為主的事件或回應使用者互動。設為 False 時,圖表不會擲回「選取」或其他以互動為基礎的事件 (但會「擲出就緒」或「錯誤」的事件),而且不會顯示使用者的文字,或是隨著使用者輸入的內容而改變。

類型:布林值
預設:
字型大小

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

類型:數字
預設:自動
字型名稱

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

類型:字串
預設:「Arial」
ForceIFrame

在內嵌頁框中繪製圖表。(請注意,在 IE8 中,系統會忽略此選項;所有 IE8 圖表都會以 i-frames 繪製)。

類型:布林值
預設值:false
height

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

類型:數字
預設:所含元素的高度
is3D

如為 true,則會顯示 3D 圖表。

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

包含成員,用於設定圖例各個層面的物件。若要指定此物件的屬性,您可以使用物件常值標記法,如下所示:

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
類型:物件
預設值:空值
圖例.alignment

圖例的對齊方式。可能是下列其中一項:

  • [開始]:對齊圖例的起始區域。
  • 'center' - 置中為圖例的所在區域。
  • 'end' - 與為圖例對應的區域結尾對齊。

起始、置中和結束點與圖例的樣式 (垂直或水平) 有關。舉例來說,在「右」圖例中,「start」和「end」分別位於頂端和底部;如果是「top」圖例,「start」和「end」將分別位於該地區的左側和右側。

預設值取決於圖例的位置。如果是「bottom」圖例,預設值為「center」,其他圖例預設為「start」。

類型:字串
預設:自動
圖例.position

圖例的位置。可能是下列其中一項:

  • 「bottom」:在圖表下方顯示圖例。
  • 'labeled' - 繪製線條,以連結切片和其資料值。
  • 「left」:顯示圖表左側的圖例。
  • 「無」:不顯示圖例。
  • 「right」:顯示圖表的圖例。
  • 'top' - 顯示圖表上方的圖例。
類型:字串
預設值:「right」
圖例.maxLines

圖例所含行數上限。請將這個值設為大於一的數字,在圖例中新增線條。注意事項:用於判斷實際行數的確切邏輯仍處於通量。

這個選項目前僅適用於圖例的「top」為「top」。

類型:數字
預設:1
圖例.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
派餅

配色框線的顏色。只有在圖表是 2D 的情況下才適用。

類型:字串
預設:「white」
pieSlice 文字

配量中顯示的文字內容。可能是下列其中一項:

  • 百分比值 - 切片大小在總數中所佔的百分比。
  • 「value」:該片段的量化值。
  • 'label' - 配量的名稱。
  • [無]:不顯示任何文字。
類型:字串
預設值:「percentage」
圓餅文字文字樣式

指定切片文字樣式的物件。物件採用以下格式:

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

color 可以是任何 HTML 色彩字串,例如:'red''#00cc00'。另請參閱 fontNamefontSize 的說明。

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

旋轉角度的角度 (以度為單位)。0 的預設設定會將第一個區塊的最左側邊緣直接朝上。

類型:數字
預設:0
反向類別

如為 true,則逆時針繪製 Slice。預設設定為順時針繪製。

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

用於將 sliceVisibilityThreshold 以下所有區塊的組合配色的顏色。

類型:字串
預設值:「#ccc」
pieResidueSliceLabel

組合配量的標籤,用於存放低於 sliceVisibilityThreshold 的所有配量。

類型:字串
預設:「其他」
Slice

物件陣列,每個物件會說明圓餅中對應切片的格式。如要使用 Slice 預設值,請指定空白物件 (例如{})。每個物件都支援下列屬性:

  • color:要用於這個片段的顏色。請指定有效的 HTML 色彩字串。
  • offset - 將切片與其他圓餅區隔開來的距離,從 0.0 (完全不是) 到 1.0 (圓餅的半徑範圍)。
  • textStyle - 覆寫這個片段的全域 pieSliceTextStyle

您可以指定物件陣列,每個物件都按指定順序套用至各區塊,或是指定一個物件,其中每個子項都有一個數值索引鍵,以標明其套用的區塊。舉例來說,下列兩個宣告相同,且將第一段宣告為黑色,第四項宣告為紅色:

slices: [{color: 'black'}, {}, {}, {color: 'red'}]
slices: {0: {color: 'black'}, 3: {color: 'red'}}
      
類型:物件陣列,或包含巢狀物件的物件
預設: {}
配銷顯示設定門檻

圓餅的分數值,我們不會在區塊下方顯示個別片段。所有未達到這個門檻的部分都會合併為單一「其他」區段,其大小代表所有大小的總和。預設設定不是單獨顯示任何小於半度的配量。

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

圖表上方顯示的文字。

類型:字串
預設:無標題
標題文字樣式

指定標題文字樣式的物件。物件採用以下格式:

{ 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}
類型:物件
預設值:空值
tooltip.ignoreBounds

如果設為 true,系統會允許工具提示的繪製範圍在圖表邊界外。

注意:這僅適用於 HTML 工具提示。如果您透過 SVG 工具提示啟用此功能,系統會忽略圖表邊界以外的溢位。詳情請參閱自訂工具提示內容

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

設為 True 時,請使用 HTML 轉譯 (而非 SVG 轉譯) 工具提示。詳情請參閱自訂工具提示內容

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

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

如為 true,則在工具提示中的資訊部分旁邊顯示彩色正方形。

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

當使用者將滑鼠遊標懸停在圓餅圖區塊上時,可以看到哪些資訊。可支援下列值:

  • 'when' - [Default] 顯示片段的絕對值和整個百分比。
  • 「value」:僅顯示片段的絕對值。
  • 「percentage」:僅顯示配量代表的整個百分比。
類型:字串
預設:「兩者」
tooltip.text 樣式

指定工具提示文字樣式的物件。物件採用以下格式:

{ 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

顯示工具提示的使用者互動:

  • 「focus」:當滑鼠遊標懸停在元素上時,就會顯示工具提示。
  • [無]:不顯示工具提示。
  • 'selection' - 在使用者選取元素時顯示工具提示。
類型:字串
預設值:「focus」
width

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

類型:數字
預設:內含元素的寬度

方法

方法
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()

屬性:無

資料政策

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