可视化:饼图

概览

在浏览器中使用 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 度。(之所以如此选择,是因为这个特定角度恰好可以让“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'。另请参阅 fontNamefontSize

类型: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'。另请参阅 fontNamefontSize

类型: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'。另请参阅 fontNamefontSize

类型: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'。另请参阅 fontNamefontSize

类型: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()

属性:无

数据政策

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