可视化:饼图

使用集合让一切井井有条 根据您的偏好保存内容并对其进行分类。

概览

使用 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,则系统会以包含三个维度的形式绘制饼图:

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 对象,并为 Slice 编号分配一个介于 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 从 Slice 中移除了文本,使用 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>

Slice 可见性阈值

您可以将一个值设为饼图切片的阈值,以便单独进行呈现。此值对应于图表的一部分(整个图表的值均为 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(选填)
目的: Slice 标签 Slice 值 …… 可选角色
数据类型: 字符串 number ……
角色: 数据 ……
可选的列角色 ……

配置选项

名称
backgroundColor

图表主区域的背景颜色。可以是简单的 HTML 颜色字符串(例如 'red''#00cc00'),也可以是具有以下属性的对象。

类型:字符串或对象
默认:“白色”
backgroundColor.stroke 中

图表边框的颜色,采用 HTML 颜色字符串的形式。

类型:字符串
默认:'#666'
backgroundColor.strokeWidth

边框宽度(以像素为单位)。

类型:数字
默认:0
backgroundColor.fill

图表的填充颜色,以 HTML 颜色字符串表示。

类型:字符串
默认:“白色”
图表区域

一个具有成员的对象,用于配置图表区域的位置和大小(绘制图表本身时,不包括轴和图例)。支持两种格式:数字或后跟 % 的数字。简单的数字是一个以像素为单位的值,数字后跟 % 是一个百分比。示例:chartArea:{left:20,top:0,width:'50%',height:'75%'}

Type:对象
默认:null
chartArea.backgroundColor
图表区域背景颜色。使用字符串时,它可以是十六进制字符串(例如,“#fdc”)或英语颜色名称。使用对象时,可以提供以下属性:
  • stroke:颜色,以十六进制字符串或英语颜色名称的形式提供。
  • strokeWidth:如果提供,则会在给定宽度的图表区域周围绘制边框(颜色为 stroke)。
类型:字符串或对象
默认:“白色”
图表区域

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

类型:数字或字符串
默认:自动
图表区域

从上边框绘制图表的距离。

类型:数字或字符串
默认:自动
图表区域.宽度

图表区域宽度。

类型:数字或字符串
默认:自动
图表.a.height

图表区域高度。

类型:数字或字符串
默认:自动
颜色

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

类型:字符串数组
默认:默认颜色
启用互动

图表是抛出基于用户的事件还是响应用户互动。如果设为 false,则图表不会抛出“select”事件或其他基于互动的事件(但会抛出“ready”或“error”事件),并且不会显示悬停文本或者根据用户输入以其他方式更改。

类型:布尔值
默认:true
字体大小

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

类型:数字
默认:自动
字体名称

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

类型:字符串
默认:“Nearline”
forceIFrame

在内嵌框架内绘制图表。(请注意,在 IE8 中,系统会忽略此选项;所有 IE8 图表都是在 iframe 中绘制的)。

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

图表的高度(以像素为单位)。

类型:数字
默认:包含元素的高度
is3D

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

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

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

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
Type:对象
默认:null
图例匹配

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

  • “start”- 与为图例分配的区域的开头对齐。
  • “center”- 以分配给图例的区域为中心。
  • 'end' - 与为图例分配的区域末端对齐。

起点、中心和终点相对于图例的样式(垂直或水平)。例如,在“right”图例中,“start”和“end”分别位于顶部和底部;对于“top”图例,“start”和“end”分别位于该区域的左侧和右侧。

默认值取决于图例的位置。对于“底部”图例,默认值为“居中”;其他图例默认为“开始”。

类型:字符串
默认:自动
图例位置

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

  • “bottom”- 显示图表下方的图例。
  • “labeled”- 绘制将 Slice 与其数据值相关联的线条。
  • “left”- 显示图表左侧的图例。
  • “none”- 不显示图例。
  • “right”- 显示图表右侧的图例。
  • “top”- 在图表上方显示图例。
类型:字符串
默认:“right”
图例.max 行

图例中的行数上限。将此列设置为大于 1 的数字,以便为图例添加线条。注意:用于确定实际呈现的行数的准确逻辑仍在变化。

目前,仅当图例位置为“顶部”时,此选项才有效。

类型:数字
默认:1
图例样式

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

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

color 可以是任何 HTML 颜色字符串,例如:'red''#00cc00'。另请参阅 fontNamefontSize

Type:对象
默认 {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
饼洞

如果介于 0 到 1 之间,则显示圆环图。该孔的半径等于图表半径的 number 倍。

类型:数字
默认:0
饼状分块颜色

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

类型:字符串
默认:“白色”
饼图文本

Slice 上显示的文本内容。可以是下列选项之一:

  • 'percentage' - 切片大小占总大小的百分比。
  • “value”- 切片的量化值。
  • 'label' - 切片的名称。
  • 'none' - 未显示任何文本。
类型:字符串
默认:'percentage'
饼图切片样式

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

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

color 可以是任何 HTML 颜色字符串,例如:'red''#00cc00'。另请参阅 fontNamefontSize

Type:对象
默认 {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
饼起始角度

图表的旋转角度(以度为单位)。默认值为 0,表示第一个切片的最左边会直接向上。

类型:数字
默认0
反向类别

如果为 true,则会逆时针绘制切片。默认按顺时针绘制。

类型:布尔值
默认:false
饼状分块颜色

保留所有切片低于 sliceVisibilityThreshold 的组合切片的颜色。

类型:字符串
默认:“#ccc”
饼状分块切片

用于组合所有切片(低于 SliceVisibilityThreshold)的所有切片的标签。

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

一个对象数组,其中每个对象描述饼图中相应切片的格式。如需为切片使用默认值,请指定空对象(即{})。如果未指定 Slice 或值,则系统会使用全局值。每个对象支持以下属性:

  • color - 要用于此 Slice 的颜色。请指定有效的 HTML 颜色字符串。
  • offset - 将切片与饼图其余部分之间的距离,从 0.0(完全不)到 1.0(饼图的半径)。
  • textStyle - 替换此切片的全局 pieSliceTextStyle

您可以指定对象数组,每个对象按指定顺序应用于 Slice,也可以指定一个对象,其中每个子项都有一个表示其应用于的 Slice 的数字键。例如,以下两个声明是相同的,并将第一个切片声明为黑色,第四个切片声明为红色:

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
      
类型:数字
默认:半度(0.5/360、1/720 或 .0014)
标题

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

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

用于指定标题文本样式的对象。此对象的格式如下:

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

color 可以是任何 HTML 颜色字符串,例如:'red''#00cc00'。另请参阅 fontNamefontSize

Type:对象
默认 {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
工具提示

一个具有成员的对象,用于配置各种提示元素。如需指定此对象的属性,您可以使用对象字面量表示法,如下所示:

{textStyle: {color: '#FF0000'}, showColorCode: true}
Type:对象
默认:null
hint.ignoreBounds

如果设置为 true,则允许以非图形方式沿图表边界绘制提示。

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

类型:布尔值
默认:false
hint.isHTML

如果设置为 true,则使用 HTML 呈现(而不是 SVG 渲染)的提示。如需了解详情,请参阅自定义提示内容

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

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

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

类型:布尔值
默认:false
提示

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

  • 'two' - [默认] 同时显示切片的绝对值和总体百分比。
  • 'value' - 仅显示切片的绝对值。
  • 'percentage' - 仅显示切片表示的整体情况。
类型:字符串
默认:“两者”
提示文本

用于指定提示文本样式的对象。此对象的格式如下:

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

color 可以是任何 HTML 颜色字符串,例如:'red''#00cc00'。另请参阅 fontNamefontSize

Type:对象
默认 {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
tooltip.trigger

使提示显示的用户交互:

  • “focus”:用户将鼠标悬停在元素上时,系统会显示提示。
  • “none”- 提示将不会显示。
  • “selection”- 在用户选择元素时,系统会显示提示。
类型:字符串
默认:焦点
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()

返回一组选定图表实体。 可选择的实体是 Slice 和图例条目。在此图表中,在任何时候都只能选择一个实体。 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()

选择指定的图表实体。取消之前选择的所有内容。 可选择的实体是 Slice 和图例条目。对于此图表,一次只能选择一个实体。 Extended description

返回值类型:无
clearChart()

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

返回值类型:无

事件

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

名称
click

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

属性:targetID
error

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

属性:ID、消息
onmouseover

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

属性:行、列
onmouseout

在用户离开可见实体时触发。传递相应数据表元素的行索引和列索引。 切片或图例条目与数据表中的某一行(列索引为 null)相关联。

属性:行、列
ready

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

属性:无
select

在用户点击视觉实体时触发。如需了解所选内容,请调用 getSelection()

属性:无

数据政策

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