可视化：饼图

概览

在浏览器中使用 SVG 或 VML 渲染的饼图。 将鼠标悬停在切片上时显示提示。

示例

 
<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 度。（之所以如此选择，是因为这个特定角度恰好可以让“Italian”标签位于 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>

分解 Slice

您可以使用 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.

小于此阈值的所有切片都将合并到一个“其他”切片中，并且将具有低于该阈值的所有切片的总值。 

    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 列（可选）
用途： 切片标签 切片值 ... 可选角色
数据类型： string number ...
角色： 网域 data ...
可选的列角色： 无 无 ...

配置选项

名称
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%'}

类型：object
默认值：null
chartArea.backgroundColor
图表区域背景颜色。使用字符串时，它可以是十六进制字符串（例如，'#fdc') 或英文颜色名称。使用对象时，可以提供以下属性：
  • stroke：颜色，以十六进制字符串或英文颜色名称的形式提供。
  • strokeWidth：如果提供，则会在具有指定宽度（颜色为 stroke）的图表区域周围绘制边框。
类型：字符串或对象
默认：“white”
chartArea.left

从左侧边框绘制图表的距离。

类型：数字或字符串
默认：auto
chartArea.top

从顶部边框绘制图表的距离。

类型：数字或字符串
默认：auto
chartArea.width

图表区域宽度。

类型：数字或字符串
默认：auto
chartArea.height

图表区域高度。

类型：数字或字符串
默认：auto
颜色

用于图表元素的颜色。字符串数组，其中每个元素都是一个 HTML 颜色字符串，例如：colors:['red','#004411']。

类型：字符串数组
默认：默认颜色
enableInteractivity

图表是抛出基于用户的事件，还是对用户互动做出响应。如果为 false，则图表不会抛出“select”或其他基于互动的事件（但会抛出 ready 事件或 error 事件），也不会显示悬停文本或根据用户输入进行其他更改。

类型：布尔值
默认值：true
fontSize

图表中所有文字的默认字体大小（以像素为单位）。您可以使用特定图表元素的属性替换此设置。

类型：数字
默认：自动
fontName

图表中所有文字的默认字体。您可以使用特定图表元素的属性替换此设置。

类型：字符串
默认：“Arial”
forceIFrame

在内嵌框架内绘制图表。（请注意，在 IE8 上，此选项会被忽略；所有 IE8 图表都是在 iframe 中绘制的。）

类型：布尔值
默认值：false
高度

图表的高度（以像素为单位）。

类型：数字
默认值：所包含元素的高度
3D

如果为 true，则显示三维图表。

类型：布尔值
默认值：false
传奇

包含成员的对象，用于配置图例的各个方面。要指定此对象的属性，您可以使用对象字面量表示法，如下所示： 

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
类型：object
默认值：null
legend.alignment

图例的对齐方式。可以是下列选项之一：

  • “start”- 与分配至图例的区域起点对齐。
  • “center”- 在为图例分配的区域中居中。
  • 'end' - 与分配至图例的区域末端对齐。

起点、中心和终点是相对于图例的样式（垂直或水平）而言的。 例如，在“右侧”图例中，“start”和“end”分别位于顶部和底部；对于“顶部”图例，“start”和“end”分别位于区域的左侧和右侧。

默认值取决于图例的位置。对于“底部”图例，默认值为“center”；其他图例默认为“start”。

类型：字符串
默认：自动
legend.position

图例的位置。可以是下列选项之一：

  • 'bottom' - 在图表下方显示图例。
  • 'labeled' - 绘制将切片连接到其数据值的线条。
  • “left”- 在图表左侧显示图例。
  • “none”- 不显示图例。
  • “right”- 在图表右侧显示图例。
  • “top”- 在图表上方显示图例。
类型：字符串
默认：“right”
legend.maxLines

图例中的行数上限。将此值设为大于 1 的数字即可向图例中添加线条。注意：用于确定实际渲染线条数的确切逻辑仍然处于变化之中。

此选项目前仅在 Legend.position 为“top”时有效。

类型：数字
默认值：1
legend.textStyle

用于指定图例文本样式的对象。该对象的格式如下：

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

color 可以是任何 HTML 颜色字符串，例如 'red' 或 '#00cc00'。另请参阅 fontName 和 fontSize。

类型：object
默认值： {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
pieHole

如果介于 0 和 1 之间，则显示圆环图。该孔的半径等于 number 与图表半径的乘积。

类型：数字
默认值：0
pieSliceBorderColor

切片边框的颜色。仅适用于二维图表。

类型：字符串
默认：“white”
pieSliceText

切片上显示的文本内容。可以是下列选项之一：

  • “percentage”- 切片大小占总数的百分比。
  • “value”- 切片的定量值。
  • “label”- 切片的名称。
  • “none”- 不显示文本。
类型：字符串
默认值：“percentage”
pieSliceTextStyle

用于指定切片文本样式的对象。该对象的格式如下：

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

color 可以是任何 HTML 颜色字符串，例如 'red' 或 '#00cc00'。另请参阅 fontName 和 fontSize。

类型：object
默认值： {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
pieStartAngle

将图表旋转的角度（以度为单位）。如果使用默认值 0，系统会将第一个切片的最左边直接朝上。

类型：数字
默认值：0
reverseCategories

如果为 true，则逆时针绘制切片。默认方向为顺时针绘制。

类型：布尔值
默认值：false
pieResidueSliceColor

包含低于 sliceVisibilityThreshold 的所有切片的组合切片的颜色。

类型：字符串
默认值：#ccc'
pieResidueSliceLabel

组合切片的标签，其中包含低于 sliceVisibilityThreshold 的所有切片。

类型：字符串
默认：“其他”
切片

一个对象数组，其中每个对象都描述了饼图中相应切片的格式。要为切片使用默认值，请指定空对象（即{}）。如果未指定切片或值，将使用全局值。每个对象都支持以下属性：

  • color - 此 Slice 使用的颜色。请指定有效的 HTML 颜色字符串。
  • offset - 将切片与其余饼图隔开的距离，介于 0.0（完全没有）到 1.0（饼的半径）之间。
  • textStyle - 替换此 Slice 的全局 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）
标题

要在图表上方显示的文本。

类型：字符串
默认：无标题
titleTextStyle

一个对象，用于指定标题文本样式。该对象的格式如下：

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

color 可以是任何 HTML 颜色字符串，例如 'red' 或 '#00cc00'。另请参阅 fontName 和 fontSize。

类型：object
默认值： {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
提示

包含用于配置各种提示元素的成员的对象。要指定此对象的属性，您可以使用对象字面量表示法，如下所示： 

{textStyle: {color: '#FF0000'}, showColorCode: true}
类型：object
默认值：null
tooltip.ignoreBounds

如果设置为 true，则允许绘制提示在所有边超出图表边界。

注意：这仅适用于 HTML 提示。如果通过 SVG 提示启用此功能，图表边界以外的任何溢出都将被剪裁。如需了解详情，请参阅自定义提示内容。

类型：布尔值
默认值：false
tooltip.isHtml

如果此政策设为 true，系统会使用 HTML 渲染（而非 SVG 渲染）提示。如需了解详情，请参阅自定义提示内容。

注意：气泡图可视化图表不支持通过提示列数据角色自定义 HTML 提示内容。

类型：布尔值
默认值：false
tooltip.showColorCode

如果为 true，则在提示中的切片信息旁边显示彩色方块。

类型：布尔值
默认值：false
tooltip.text

用户将鼠标悬停在饼图切片上时显示的信息。支持以下值：

  • 'two' - [默认] 显示切片的绝对值和整体的百分比。
  • “value”- 仅显示切片的绝对值。
  • “percentage”- 仅显示切片所表示的总百分比。
类型：字符串
默认：“选中二者”
tooltip.textStyle

一个用于指定提示文本样式的对象。该对象的格式如下：

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

color 可以是任何 HTML 颜色字符串，例如 'red' 或 '#00cc00'。另请参阅 fontName 和 fontSize。

类型：object
默认值： {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
tooltip.trigger

导致显示提示的用户互动：

  • “focus”- 用户将鼠标悬停在元素上时将显示提示。
  • “none”- 不会显示提示。
  • “selection”- 当用户选择元素时，系统将显示提示。
类型：字符串
默认：“focus”
宽度

图表的宽度，以像素为单位。

类型：数字
默认值：所包含元素的宽度

方法

方法
draw(data, options)

绘制图表。只有在 ready 事件触发后，图表才会接受进一步的方法调用。Extended description。

Return Type（返回类型）：none
getAction(actionID)

返回具有所请求的 actionID 的提示操作对象。

返回类型：object
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')

值是相对于图表容器而言的。在绘制图表之后调用此方法。

返回类型：object
getChartAreaBoundingBox()

返回一个对象，其中包含图表内容的左侧、顶部、宽度和高度（即不包括标签和图例）：

var cli = chart.getChartLayoutInterface();

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

值是相对于图表容器而言的。在绘制图表之后调用此方法。

返回类型：object
getChartLayoutInterface()

返回一个对象，其中包含有关图表在屏幕上的位置及其元素的信息。

可以对返回的对象调用以下方法：

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

在绘制图表之后调用此方法。

返回类型：object
getHAxisValue(xPosition, optional_axis_index)

返回 xPosition 处的水平数据值，这是相对于图表容器左边缘的像素偏移量。可以是负数。

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

在绘制图表之后调用此方法。

Return Type（返回类型）：number
getImageURI()

返回已序列化为图片 URI 的图表。

在绘制图表之后调用此方法。

请参阅打印 PNG 图表。

返回类型：字符串
getSelection()

返回所选图表实体的数组。 可选择的实体包括切片和图例条目。 对于此图表，在任何给定时刻，只能选择一个实体。 Extended description 。

返回类型：选择元素数组
getVAxisValue(yPosition, optional_axis_index)

返回 yPosition 处的垂直数据值，该值是从图表容器上边缘向下偏移的像素值。可以是负数。

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

在绘制图表之后调用此方法。

Return Type（返回类型）：number
getXLocation(dataValue, optional_axis_index)

返回 dataValue 相对于图表容器左边缘的像素 x 坐标。

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

在绘制图表之后调用此方法。

Return Type（返回类型）：number
getYLocation(dataValue, optional_axis_index)

返回 dataValue 相对于图表容器上边缘的像素 y 坐标。

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

在绘制图表之后调用此方法。

Return Type（返回类型）：number
removeAction(actionID)

从图表中移除包含所请求 actionID 的提示操作。

返回值类型：none
setAction(action)

设置当用户点击操作文本时要执行的提示操作。

setAction 方法接受一个对象作为其操作参数。此对象应指定 3 个属性：id（所设置的操作的 ID）、text（应显示在操作提示中的文本）和 action（应在用户点击操作文本时应运行的函数）。

任何和所有提示操作都应在调用图表的 draw() 方法之前设置。详细描述。

返回值类型：none
setSelection()

选择指定的图表实体。取消之前的所有选择。 可选择的实体包括切片和图例条目。 对于此图表，一次只能选择一个实体。 Extended description 。

Return Type（返回类型）：none
clearChart()

清除图表，并释放为其分配的所有资源。

Return Type（返回类型）：none

事件

如需详细了解如何使用这些事件，请参阅基本互动、处理事件和触发事件。

名称
click

当用户点击图表内部时触发。可用于识别何时点击标题、数据元素、图例条目、轴、网格线或标签。

属性：targetID
error

尝试渲染图表时出错时触发。

属性：id、message
onmouseover

用户将鼠标悬停在视觉实体上时触发。传回相应数据表元素的行和列索引。 切片或图例条目与数据表中的一行相关联（列索引为 null）。

属性：行、列
onmouseout

用户将鼠标远离视觉实体时触发。传回相应数据表元素的行和列索引。 切片或图例条目与数据表中的一行相关联（列索引为 null）。

属性：行、列
ready

该图表已准备好进行外部方法调用。如果您想与图表交互并在绘制图表后调用方法，则应在调用 draw 方法之前为该事件设置监听器，并仅在事件触发后调用监听器。

属性：无
select

当用户点击视觉实体时触发。如需了解已选择的内容，请调用 getSelection()。

属性：无

数据政策

所有代码和数据都会在浏览器中处理并呈现。系统不会向任何服务器发送任何数据。