此页面由 Cloud Translation API 翻译。

可视化：气泡图

概览

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

气泡图用于直观呈现具有二到四个维度的数据集。前两个维度以坐标的形式呈现，第三个维度表示颜色，第四个维度表示大小。

示例

google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawSeriesChart);

function drawSeriesChart() {

var data = google.visualization.arrayToDataTable([
        ['ID', 'Life Expectancy', 'Fertility Rate', 'Region',     'Population'],
        ['CAN',    80.66,              1.67,      'North America',  33739900],
        ['DEU',    79.84,              1.36,      'Europe',         81902307],
        ['DNK',    78.6,               1.84,      'Europe',         5523095],
        ['EGY',    72.73,              2.78,      'Middle East',    79716203],
        ['GBR',    80.05,              2,         'Europe',         61801570],
        ['IRN',    72.49,              1.7,       'Middle East',    73137148],
        ['IRQ',    68.09,              4.77,      'Middle East',    31090763],
        ['ISR',    81.55,              2.96,      'Middle East',    7485600],
        ['RUS',    68.6,               1.54,      'Europe',         141850000],
        ['USA',    78.09,              2.05,      'North America',  307007000]
      ]);

var options = {
        title: 'Fertility rate vs life expectancy in selected countries (2010).' +
          ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
        hAxis: {title: 'Life Expectancy'},
        vAxis: {title: 'Fertility Rate'},
        bubble: {textStyle: {fontSize: 11}}
      };

var chart = new google.visualization.BubbleChart(document.getElementById('series_chart_div'));
      chart.draw(data, options);
    }

<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(drawSeriesChart);

    function drawSeriesChart() {

      var data = google.visualization.arrayToDataTable([
        ['ID', 'Life Expectancy', 'Fertility Rate', 'Region',     'Population'],
        ['CAN',    80.66,              1.67,      'North America',  33739900],
        ['DEU',    79.84,              1.36,      'Europe',         81902307],
        ['DNK',    78.6,               1.84,      'Europe',         5523095],
        ['EGY',    72.73,              2.78,      'Middle East',    79716203],
        ['GBR',    80.05,              2,         'Europe',         61801570],
        ['IRN',    72.49,              1.7,       'Middle East',    73137148],
        ['IRQ',    68.09,              4.77,      'Middle East',    31090763],
        ['ISR',    81.55,              2.96,      'Middle East',    7485600],
        ['RUS',    68.6,               1.54,      'Europe',         141850000],
        ['USA',    78.09,              2.05,      'North America',  307007000]
      ]);

      var options = {
        title: 'Fertility rate vs life expectancy in selected countries (2010).' +
          ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
        hAxis: {title: 'Life Expectancy'},
        vAxis: {title: 'Fertility Rate'},
        bubble: {textStyle: {fontSize: 11}}
      };

      var chart = new google.visualization.BubbleChart(document.getElementById('series_chart_div'));
      chart.draw(data, options);
    }
    </script>
  </head>
  <body>
    <div id="series_chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

按数字着色

您可以使用 colorAxis 选项根据某个值按比例为气泡着色，如以下示例所示。

<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([
          ['ID', 'X', 'Y', 'Temperature'],
          ['',   80,  167,      120],
          ['',   79,  136,      130],
          ['',   78,  184,      50],
          ['',   72,  278,      230],
          ['',   81,  200,      210],
          ['',   72,  170,      100],
          ['',   68,  477,      80]
        ]);

        var options = {
          colorAxis: {colors: ['yellow', 'red']}
        };

        var chart = new google.visualization.BubbleChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

自定义标签

您可以使用 bubble.textStyle 选项控制气泡的字体、字体和颜色：

选项

  var options = {
    title: 'Fertility rate vs life expectancy in selected countries (2010).' +
      ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
    hAxis: {title: 'Life Expectancy'},
    vAxis: {title: 'Fertility Rate'},
    bubble: {
      textStyle: {
        fontSize: 12,
        fontName: 'Times-Roman',
        color: 'green',
        bold: true,
        italic: true
      }
    }
  };

完整网页

<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([
        ['ID', 'Life Expectancy', 'Fertility Rate', 'Region',     'Population'],
        ['CAN',    80.66,              1.67,      'North America',  33739900],
        ['DEU',    79.84,              1.36,      'Europe',         81902307],
        ['DNK',    78.6,               1.84,      'Europe',         5523095],
        ['EGY',    72.73,              2.78,      'Middle East',    79716203],
        ['GBR',    80.05,              2,         'Europe',         61801570],
        ['IRN',    72.49,              1.7,       'Middle East',    73137148],
        ['IRQ',    68.09,              4.77,      'Middle East',    31090763],
        ['ISR',    81.55,              2.96,      'Middle East',    7485600],
        ['RUS',    68.6,               1.54,      'Europe',         141850000],
        ['USA',    78.09,              2.05,      'North America',  307007000]
      ]);

      var options = {
        title: 'Fertility rate vs life expectancy in selected countries (2010).' +
          ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
        hAxis: {title: 'Life Expectancy'},
        vAxis: {title: 'Fertility Rate'},
        bubble: {
          textStyle: {
            fontSize: 12,
            fontName: 'Times-Roman',
            color: 'green',
            bold: true,
            italic: true
          }
        }
      };

      var chart = new google.visualization.BubbleChart(document.getElementById('textstyle'));

      chart.draw(data, options);
    }
  </script>
</head>
<body>
  <div id="textstyle" style="width: 900px; height: 500px;"></div>
</body>
</html>

上图中的标签难以阅读，原因之一是其周围有空白区域。这称为“灵气”，如果您希望图表没有它们，可以将 bubble.textStyle.auraColor 设置为 'none'。

选项

  var options = {
    title: 'Fertility rate vs life expectancy in selected countries (2010).' +
      ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
    hAxis: {title: 'Life Expectancy'},
    vAxis: {title: 'Fertility Rate'},
    bubble: {
      textStyle: {
        auraColor: 'none'
      }
    }
  };

完整网页

<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([
        ['ID', 'Life Expectancy', 'Fertility Rate', 'Region',     'Population'],
        ['CAN',    80.66,              1.67,      'North America',  33739900],
        ['DEU',    79.84,              1.36,      'Europe',         81902307],
        ['DNK',    78.6,               1.84,      'Europe',         5523095],
        ['EGY',    72.73,              2.78,      'Middle East',    79716203],
        ['GBR',    80.05,              2,         'Europe',         61801570],
        ['IRN',    72.49,              1.7,       'Middle East',    73137148],
        ['IRQ',    68.09,              4.77,      'Middle East',    31090763],
        ['ISR',    81.55,              2.96,      'Middle East',    7485600],
        ['RUS',    68.6,               1.54,      'Europe',         141850000],
        ['USA',    78.09,              2.05,      'North America',  307007000]
      ]);

      var options = {
        title: 'Fertility rate vs life expectancy in selected countries (2010).' +
          ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
        hAxis: {title: 'Life Expectancy'},
        vAxis: {title: 'Fertility Rate'},
        bubble: {
          textStyle: {
            auraColor: 'none',
          }
        }
      };

      var chart = new google.visualization.BubbleChart(document.getElementById('noAura'));

      chart.draw(data, options);
    }
  </script>
</head>
<body>
  <div id="noAura" style="width: 900px; height: 500px;"></div>
</body>
</html>

正在加载

google.charts.load 软件包名称为 "corechart"。

  google.charts.load("current", {packages: ["corechart"]});

该可视化图表的类名称为 google.visualization.BubbleChart。

  var visualization = new google.visualization.BubbleChart(container);

数据格式

行：表格中的每一行代表一个气泡。

列：

	第 0 列	第 1 列	第 2 列	第 3 列（可选）	第 4 列（可选）
用途：	气泡的 ID（名称）	X 坐标	Y 坐标	系列 ID 或表示渐变比例的颜色的值，具体取决于列类型： string 用于标识同一系列中的气泡的字符串。使用相同的值来标识属于同一系列的所有气泡；同一系列中的气泡将被分配到相同的颜色。可以使用 `series` 选项配置系列。数字使用 `colorAxis` 选项映射到渐变比例上实际颜色的值。	尺寸；此列中的值使用 `sizeAxis` 选项映射到实际像素值。
数据类型：	string	number	number	字符串或数字	number

配置选项

名称
animation.duration	动画的时长（以毫秒为单位）。如需了解详情，请参阅动画文档。类型：数字默认值：0
animation.easing	应用于动画的加/减速函数。提供的选项如下： “Linear”- 恒定速度。 “in”- 缓入 - 开始时要慢，速度快。 '出' - 缓出 - 快速启动，然后放慢速度。 'inAndOut' - 缓入和缓出 - 开始时要慢，加速，然后慢。类型：字符串默认值：“线性”
animation.startup	确定图表是否在首次绘制时呈现动画效果。如果为 `true`，则图表将从基线开始，并以动画方式达到其最终状态。类型：布尔值默认值 false
axisTitlesPosition	轴标题的放置位置（相对于图表区域）。支持的值： in - 在图表区域内绘制轴标题。 out - 在图表区域外绘制轴标题。 none - 省略轴标题。类型：字符串默认值：“out”
backgroundColor	图表主要区域的背景颜色。可以是简单的 HTML 颜色字符串（例如 `'red'` 或 `'#00cc00'`），也可以是具有以下属性的对象。类型：字符串或对象默认：“white”
backgroundColor.stroke	图表边框的颜色，以 HTML 颜色字符串表示。类型：字符串默认：“#666”
backgroundColor.strokeWidth	边框宽度（以像素为单位）。类型：数字默认值：0
backgroundColor.fill	图表的填充颜色，采用 HTML 颜色字符串的形式。类型：字符串默认：“white”
bubble	包含成员的对象，用于配置气泡的视觉属性。类型：object 默认值：null
bubble.opacity	气泡的不透明度，0 表示完全透明，1 表示完全不透明。类型：介于 0.0 和 1.0 之间的数字默认值：0.8
bubble.stroke	气泡的颜色。类型：字符串默认值：#ccc'
bubble.textStyle	一个对象，用于指定气泡文本样式。该对象的格式如下： {color: <string>, fontName: <string>, fontSize: <number>} `color` 可以是任何 HTML 颜色字符串，例如 `'red'` 或 `'#00cc00'`。另请参阅 `fontName` 和 `fontSize`。类型：object 默认值：`{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}`
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']`。类型：字符串数组默认：默认颜色
colorAxis	用于指定颜色列值和颜色之间的映射或渐变比例的对象。要指定此对象的属性，您可以使用对象字面量表示法，如下所示： {minValue: 0, colors: ['#FF0000', '#00FF00']} 类型：object 默认值：null
colorAxis.minValue	如果存在，则指定图表颜色数据的最小值。此值及以下值的颜色数据值将渲染为 `colorAxis.colors` 范围中的第一种颜色。类型：数字默认：图表数据中颜色列的最小值
colorAxis.maxValue	如果存在，则指定图表颜色数据的最大值。此值及更高级别的颜色数据值将渲染为 `colorAxis.colors` 范围内的最后一种颜色。类型：数字默认：图表数据中颜色列的最大值
colorAxis.values	如果存在，用于控制值与颜色的关联方式。每个值都与 `colorAxis.colors` 数组中的相应颜色相关联。这些值适用于图表颜色数据。根据此处指定的值的渐变进行着色。不为此选项指定值等同于指定 [minValue, maxValue]。类型：数字数组默认值：null
colorAxis.colors	要为可视化图表中的值指定的颜色。字符串数组，其中每个元素都是一个 HTML 颜色字符串，例如：`colorAxis: {colors:['red','#004411']}`。您必须具有至少两个值；渐变色将包含所有值，外加计算出的中间值，其中第一种颜色的值为最小值，最后的颜色值最高。类型：颜色字符串数组默认值：null
colorAxis.legend	用于指定渐变颜色图例样式的对象。类型：object 默认值：null
colorAxis.legend.position	图例的位置。可以是下列选项之一： “top”- 图表上方。 'bottom' - 图表下方。 “in”- 图表内部，顶部。 “none”- 不显示图例。类型：object 默认值：“top”
colorAxis.legend.textStyle	用于指定图例文本样式的对象。该对象的格式如下： {color: <string>, fontName: <string>, fontSize: <number>} `color` 可以是任何 HTML 颜色字符串，例如 `'red'` 或 `'#00cc00'`。另请参阅 `fontName` 和 `fontSize`。类型：object 默认值：`{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}`
colorAxis.legend.numberFormat	数字标签的格式字符串。这是 ICU 模式集的一部分。例如，`{numberFormat:'.##'}` 会针对值 10.666、10.6 和 10 显示值“10.66”“10.6”和“10.0”。类型：字符串默认：auto
enableInteractivity	图表是抛出基于用户的事件，还是对用户互动做出响应。如果为 false，则图表不会抛出“select”或其他基于互动的事件（但会抛出 ready 事件或 error 事件），也不会显示悬停文本或根据用户输入进行其他更改。类型：布尔值默认值：true
explorer	`explorer` 选项允许用户平移和缩放 Google 图表。`explorer: {}` 提供了默认的探索器行为，让用户能够通过拖动进行水平和垂直平移，以及通过滚动进行缩放。此功能是实验性功能，可能会在未来版本中发生变化。注意：分层图表仅适用于连续轴（例如数字或日期）。类型：object 默认值：null
explorer.actions	Google 图表浏览器支持三种操作： `dragToPan`：拖动可在图表水平和垂直方向上平移。如需仅沿水平轴平移，请使用 `explorer: { axis: 'horizontal' }`。纵轴也是如此。 `dragToZoom`：该探索器的默认行为是在用户滚动时放大和缩小。如果使用了 `explorer: { actions: ['dragToZoom', 'rightClickToReset'] }`，在矩形区域上拖动可放大该区域。我们建议每使用 `dragToZoom` 都使用 `rightClickToReset`。有关缩放自定义，请参阅 `explorer.maxZoomIn`、`explorer.maxZoomOut` 和 `explorer.zoomDelta`。 `rightClickToReset`：右键点击图表可将其恢复到原始的平移和缩放级别。类型：字符串数组默认值：['dragToPan', 'rightClickToReset']
explorer.axis	默认情况下，使用 `explorer` 选项时，用户可以同时水平和垂直平移。如果您只想用户水平平移，请使用 `explorer: { axis: 'horizontal' }`。同样，`explorer: { axis: 'vertical' }` 支持仅垂直平移。类型：字符串默认：同时进行水平和垂直平移
explorer.keepInBounds	默认情况下，无论数据位于何处，用户都可以平移。为确保用户不会平移到原始图表以外，请使用 `explorer: { keepInBounds: true }`。类型：布尔值默认值：false
explorer.maxZoomIn	探索器可以放大的最大数值。默认情况下，用户可以放大到只有 25% 的原始视图。设置 `explorer: { maxZoomIn: .5 }` 会让用户只能放大到可以看到原始视图的一半。类型：数字默认值：0.25
explorer.maxZoomOut	探索器可以缩小的最大值。默认情况下，用户能够将图表缩小到仅占可用空间的 1/4。设置 `explorer: { maxZoomOut: 8 }` 可以允许用户足够缩小，以至于图表仅占可用空间的 1/8。类型：数字默认值：4
explorer.zoomDelta	当用户执行缩放操作时，`explorer.zoomDelta` 会决定用户的缩放程度。数字越小，变焦越流畅，速度越慢。类型：数字默认值：1.5
fontSize	图表中所有文字的默认字体大小（以像素为单位）。您可以使用特定图表元素的属性替换此设置。类型：数字默认：自动
fontName	图表中所有文字的默认字体。您可以使用特定图表元素的属性替换此设置。类型：字符串默认：“Arial”
forceIFrame	在内嵌框架内绘制图表。（请注意，在 IE8 上，此选项会被忽略；所有 IE8 图表都是在 iframe 中绘制的。）类型：布尔值默认值：false
hAxis	包含成员（用于配置各种横轴元素）的对象。如需指定此对象的属性，您可以使用对象字面量表示法，如下所示： { title: 'Hello', titleTextStyle: { color: '#FF0000' } } 类型：object 默认值：null
hAxis.baseline	横轴的基线。类型：数字默认：自动
hAxis.baselineColor	横轴基线的颜色。可以是任何 HTML 颜色字符串，例如：`'red'` 或 `'#00cc00'`。类型：数字默认：“black”
hAxis.direction	值沿水平轴的增长方向。指定 `-1` 会反转值的顺序。类型：1 或 -1 默认值：1
hAxis.format	数字轴标签的格式字符串。这是 ICU 模式集的一部分。例如，`{format:'#,###%'}` 会针对值 10、7.5 和 0.5 显示“1,000%”“750%”和“50%”值。您还可以提供以下任一项： `{format: 'none'}`：显示不带格式的数字（例如，8000000） `{format: 'decimal'}`：显示带千位分隔符的数字（例如，8,000,000） `{format: 'scientific'}`：以科学计数法显示数字（例如，8e6） `{format: 'currency'}`：以本地货币显示数字（例如，$8,000,000.00） `{format: 'percent'}`：以百分比的形式显示数字（例如，800,000,000%） `{format: 'short'}`：显示缩写数字（例如，800 万） `{format: 'long'}`：将数字显示为完整字词（例如，800 万）应用于标签的实际格式源自 API 加载时所使用的语言区域。如需了解详情，请参阅加载具有特定语言区域的图表。在计算刻度线值和网格线时，系统会考虑所有相关网格线选项的几个备选组合，如果格式化的刻度线标签重复或重叠，则将拒绝备选组合。因此，如果您只想显示整数刻度线值，则可以指定 `format:"#"`，但请注意，如果没有满足此条件的备用内容，则不会显示网格线或刻度线。类型：字符串默认：auto
hAxis.gridlines	一个对象，包含用于配置横轴上的网格线的属性。请注意，横轴网格线是垂直绘制的。要指定此对象的属性，您可以使用对象字面量表示法，如下所示： {color: '#333', minSpacing: 20} 类型：object 默认值：null
hAxis.gridlines.color	图表区域内水平网格线的颜色。请指定有效的 HTML 颜色字符串。类型：字符串默认：“#CCC”
hAxis.gridlines.count	图表区域内水平网格线的大致数量。如果您为 `gridlines.count` 指定一个正数，它将用于计算网格线之间的 `minSpacing`。您可以指定值 `1` 表示仅绘制一条网格线，指定 `0` 则不绘制网格线。指定 -1（默认值），即可根据其他选项自动计算网格线的数量。类型：数字默认值：-1
hAxis.gridlines.units	当与图表计算的网格线搭配使用时，替换日期/日期时间/时间数据类型各方面的默认格式。允许设置年、月、日、小时、分钟、秒和毫秒的格式。常规格式为： gridlines: { units: { years: {format: [/format strings here/]}, months: {format: [/format strings here/]}, days: {format: [/format strings here/]} hours: {format: [/format strings here/]} minutes: {format: [/format strings here/]} seconds: {format: [/format strings here/]}, milliseconds: {format: [/format strings here/]}, } } 如需了解详情，请参阅日期和时间。类型：object 默认值：null
hAxis.minorGridlines	一个对象，其中包含用于在水平轴上配置次要网格线的成员，类似于 hAxis.gridlines 选项。类型：object 默认值：null
hAxis.minorGridlines.color	图表区域内水平次要网格线的颜色。请指定有效的 HTML 颜色字符串。类型：字符串默认：网格线和背景颜色的混合
hAxis.minorGridlines.count	除了通过将计数设置为 0 来停用次要网格线之外，`minorGridlines.count` 选项大多已废弃。次要网格线的数量现在完全取决于主要网格线之间的间距（请参阅 `hAxis.gridlines.interval`）和最小所需空间（请参阅 `hAxis.minorGridlines.minSpacing`）。类型：数字默认值：1
hAxis.minorGridlines.units	当与图表计算的 MinorGridlines 一起使用时，替换日期/日期时间/时间数据类型各方面的默认格式。允许设置年、月、日、小时、分钟、秒和毫秒的格式。常规格式为： gridlines: { units: { years: {format: [/format strings here/]}, months: {format: [/format strings here/]}, days: {format: [/format strings here/]} hours: {format: [/format strings here/]} minutes: {format: [/format strings here/]} seconds: {format: [/format strings here/]}, milliseconds: {format: [/format strings here/]}, } } 如需了解详情，请参阅日期和时间。类型：object 默认值：null
hAxis.logScale	`hAxis` 属性，将横轴设为对数刻度（要求所有值均为正数）。如果设为 true，则表示是的。类型：布尔值默认值：false
hAxis.scaleType	`hAxis` 属性，将横轴设为对数刻度。可以是： null - 不执行对数缩放。 “log”- 对数缩放。不绘制负值和零值。此选项与设置 `hAxis: { logscale: true }` 相同。 “MirrorLog”- 对数缩放，其中绘制负值和零值。绘制的负数值是绝对值的对数的负数。接近 0 的值按线性刻度绘制。类型：字符串默认值：null
hAxis.textPosition	横轴文本相对于图表区域的位置。支持的值：“out”“in”“none”。类型：字符串默认值：“out”
hAxis.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>}`
hAxis.ticks	将自动生成的 X 轴刻度线替换为指定数组。数组的每个元素都应是有效的刻度值（例如数字、日期、日期时间或时间）或对象。如果是对象，则应具有用于 tick 值的 `v` 属性，以及包含要显示为标签的文字字符串的可选 `f` 属性。除非您指定要替换的 `viewWindow.min` 或 `viewWindow.max`，否则 viewWindow 将自动展开即可包括最小和最大 tick。示例： `hAxis: { ticks: [5,10,15,20] }` `hAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }` `hAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }` `hAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }` 类型：元素数组默认：auto
hAxis.title	`hAxis` 属性，用于指定横轴的标题。类型：字符串默认值：null
hAxis.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>}`
hAxis.maxValue	将横轴的最大值移至指定值；在大多数图表中，此值为向右移动。如果设置的值小于数据最大 x 值，则忽略。 `hAxis.viewWindow.max` 会替换此属性。类型：数字默认：自动
hAxis.minValue	将横轴的最小值移到指定值；在大多数图表中，该值将位于左侧。如果设为大于数据最小 x 值的值，则忽略。 `hAxis.viewWindow.min` 会替换此属性。类型：数字默认：自动
hAxis.viewWindowMode	指定如何缩放横轴以在图表区域内渲染值。支持以下字符串值： 'pretty' - 缩放水平值，使最大和最小数据值稍微位于图表区域的左侧和右侧。 viewWindow 会展开为最近的主网格线（对于数字）或最近的次要网格线（对于日期和时间）。 'maximized' - 缩放水平值，使最大和最小数据值接触图表区域的左侧和右侧。这会导致 `haxis.viewWindow.min` 和 `haxis.viewWindow.max` 被忽略。 “露骨内容”- 用于指定图表区域左侧和右侧缩放比例值的已弃用选项。（已弃用，因为它与 `haxis.viewWindow.min` 和 `haxis.viewWindow.max` 重复）。系统将剪裁超出这些值的数据值。您必须指定一个 `hAxis.viewWindow` 对象，用于描述要显示的最大值和最小值。类型：字符串默认值：相当于“pretty”，但如果使用，则 `haxis.viewWindow.min` 和 `haxis.viewWindow.max` 优先。
hAxis.viewWindow	指定横轴的剪裁范围。类型：object 默认值：null
hAxis.viewWindow.max	要渲染的最大水平数据值。当 `hAxis.viewWindowMode` 为“pretty”或“maximized”时，会被忽略。类型：数字默认：auto
hAxis.viewWindow.min	要渲染的最小水平数据值。当 `hAxis.viewWindowMode` 为“pretty”或“maximized”时，会被忽略。类型：数字默认：auto
高度	图表的高度（以像素为单位）。类型：数字默认值：所包含元素的高度
传奇	包含成员的对象，用于配置图例的各个方面。要指定此对象的属性，您可以使用对象字面量表示法，如下所示： {position: 'top', textStyle: {color: 'blue', fontSize: 16}} 类型：object 默认值：null
legend.alignment	图例的对齐方式。可以是下列选项之一： “start”- 与分配至图例的区域起点对齐。 “center”- 在为图例分配的区域中居中。 'end' - 与分配至图例的区域末端对齐。起点、中心和终点是相对于图例的样式（垂直或水平）而言的。例如，在“右侧”图例中，“start”和“end”分别位于顶部和底部；对于“顶部”图例，“start”和“end”分别位于区域的左侧和右侧。默认值取决于图例的位置。对于“底部”图例，默认值为“center”；其他图例默认为“start”。类型：字符串默认：自动
legend.maxLines	图例中的行数上限。将此值设为大于 1 的数字即可向图例中添加线条。注意：用于确定实际渲染线条数的确切逻辑仍然处于变化之中。此选项目前仅在 Legend.position 为“top”时有效。类型：数字默认值：1
legend.pageIndex	图例最初选择的从零开始的页面索引。类型：数字默认值：0
legend.position	图例的位置。可以是下列选项之一： 'bottom' - 图表下方。 “left”- 位于图表左侧，前提是左轴没有与之关联的数据系列。因此，如果您希望显示左侧的图例，请使用 `targetAxisIndex: 1` 选项。 “in”- 在图表内，左上角。 “none”- 不显示图例。 “right”- 位于图表右侧。与 `vAxes` 选项不兼容。 “top”- 图表上方。类型：字符串默认：“right”
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>}`
selectionMode	当 `selectionMode` 为 `'multiple'` 时，用户可以选择多个数据点。类型：字符串默认：“single”
系列图书	一个对象的对象，其中键是系列名称（Color 列中的值），每个对象都描述了图表中相应系列的格式。如果未指定系列或值，将使用全局值。每个对象都支持以下属性： `color` - 要用于此系列的颜色。请指定有效的 HTML 颜色字符串。 `visibleInLegend` - 一个布尔值，其中 true 表示系列中应包含图例条目，false 表示不应包含图例条目。默认值为 true。示例： series: {'Europe': {color: 'green'}} 类型：包含嵌套对象的对象默认值：
sizeAxis	一个对象，其中包含用于配置值与气泡大小的关联方式的成员。要指定此对象的属性，您可以使用对象字面量表示法，如下所示： {minValue: 0, maxSize: 20} 类型：object 默认值：null
sizeAxis.maxSize	可能的最大气泡的半径上限（以像素为单位）。类型：数字默认值：30
sizeAxis.maxValue	要映射到 `sizeAxis.maxSize` 的尺寸值（如图表数据中所示）。较大的值将裁剪为该值。类型：数字默认：图表数据中大小列的最大值
sizeAxis.minSize	可能的最小气泡的最小半径（以像素为单位）。类型：数字默认值：5
sizeAxis.minValue	要映射到 `sizeAxis.minSize` 的尺寸值（如图表数据中所示）。较小的值将裁剪为该值。类型：数字默认：图表数据中大小列的最小值
sortBubblesBySize	如果为 true，则按大小对气泡进行排序，使较小的气泡显示在较大的气泡上方。如果为 false，则根据气泡在 DataTable 中的顺序对其进行排序。类型：布尔值默认值：true
主题	主题是一组预定义的选项值，这些值协同发挥作用来实现特定的图表行为或视觉效果。目前只有一个主题可用： 'maximized' - 最大化图表区域，并在图表区域内绘制图例和所有标签。设置以下选项： chartArea: {width: '100%', height: '100%'}, legend: {position: 'in'}, titlePosition: 'in', axisTitlesPosition: 'in', hAxis: {textPosition: 'in'}, vAxis: {textPosition: 'in'} 类型：字符串默认值：null
标题	要在图表上方显示的文本。类型：字符串默认：无标题
titlePosition	图表标题的放置位置（相对于图表区域）。支持的值： in - 在图表区域内绘制标题。 out - 在图表区域以外绘制标题。无 - 省略标题。类型：字符串默认值：“out”
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.isHtml	如果此政策设为 true，系统会使用 HTML 渲染（而非 SVG 渲染）提示。如需了解详情，请参阅自定义提示内容。注意：气泡图可视化图表不支持通过提示列数据角色自定义 HTML 提示内容。类型：布尔值默认值：false
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”
vAxis	包含用于配置各种纵轴元素的成员的对象。要指定此对象的属性，您可以使用对象字面量表示法，如下所示： {title: 'Hello', titleTextStyle: {color: '#FF0000'}} 类型：object 默认值：null
vAxis.baseline	`vAxis` 属性，用于指定纵轴的基准。如果基线大于最高网格线或小于最低网格线，则基线将四舍五入为最近的网格线。类型：数字默认：自动
vAxis.baselineColor	指定纵轴基线的颜色。可以是任何 HTML 颜色字符串，例如：`'red'` 或 `'#00cc00'`。类型：数字默认：“black”
vAxis.direction	值沿纵轴的增长方向。默认情况下，图表底部会显示较小的值。指定 `-1` 会反转值的顺序。类型：1 或 -1 默认值：1
vAxis.format	数字轴标签的格式字符串。这是 ICU 模式集的一部分。例如，`{format:'#,###%'}` 会针对值 10、7.5 和 0.5 显示“1,000%”“750%”和“50%”值。您还可以提供以下任一项： `{format: 'none'}`：显示不带格式的数字（例如，8000000） `{format: 'decimal'}`：显示带千位分隔符的数字（例如，8,000,000） `{format: 'scientific'}`：以科学计数法显示数字（例如，8e6） `{format: 'currency'}`：以本地货币显示数字（例如，$8,000,000.00） `{format: 'percent'}`：以百分比的形式显示数字（例如，800,000,000%） `{format: 'short'}`：显示缩写数字（例如，800 万） `{format: 'long'}`：将数字显示为完整字词（例如，800 万）应用于标签的实际格式源自 API 加载时所使用的语言区域。如需了解详情，请参阅加载具有特定语言区域的图表。在计算刻度线值和网格线时，系统会考虑所有相关网格线选项的几个备选组合，如果格式化的刻度线标签重复或重叠，则将拒绝备选组合。因此，如果您只想显示整数刻度线值，则可以指定 `format:"#"`，但请注意，如果没有满足此条件的备用内容，则不会显示网格线或刻度线。类型：字符串默认：auto
vAxis.gridlines	一个对象，其中包含用于在纵轴上配置网格线的成员。请注意，纵轴网格线是水平绘制的。如需指定此对象的属性，您可以使用对象字面量表示法，如下所示： {color: '#333', minSpacing: 20} 类型：object 默认值：null
vAxis.gridlines.color	图表区域内垂直网格线的颜色。请指定有效的 HTML 颜色字符串。类型：字符串默认：“#CCC”
vAxis.gridlines.count	图表区域内水平网格线的大致数量。如果您为 `gridlines.count` 指定一个正数，它将用于计算网格线之间的 `minSpacing`。您可以指定值 `1` 表示仅绘制一条网格线，指定 `0` 则不绘制网格线。指定 -1（默认值），即可根据其他选项自动计算网格线的数量。类型：数字默认值：-1
vAxis.gridlines.units	当与图表计算的网格线搭配使用时，替换日期/日期时间/时间数据类型各方面的默认格式。允许设置年、月、日、小时、分钟、秒和毫秒的格式。常规格式为： gridlines: { units: { years: {format: [/format strings here/]}, months: {format: [/format strings here/]}, days: {format: [/format strings here/]}, hours: {format: [/format strings here/]}, minutes: {format: [/format strings here/]}, seconds: {format: [/format strings here/]}, milliseconds: {format: [/format strings here/]} } } 如需了解详情，请参阅日期和时间。类型：object 默认值：null
vAxis.minorGridlines	一个对象，其中包含用于在纵轴上配置次要网格线的成员，类似于 vAxis.gridlines 选项。类型：object 默认值：null
vAxis.minorGridlines.color	图表区域内垂直次网格线的颜色。请指定有效的 HTML 颜色字符串。类型：字符串默认：网格线和背景颜色的混合
vAxis.minorGridlines.count	除通过将计数设置为 0 来停用次要网格线外，MinorGridlines.count 选项大体上已废弃。次网格线的数量取决于主要网格线的间距（请参阅 vAxis.gridlines.interval）和所需的最小空间（请参阅 vAxis.minorGridlines.minSpacing）。类型：数字默认值：1
vAxis.minorGridlines.units	当与图表计算的 MinorGridlines 一起使用时，替换日期/日期时间/时间数据类型各方面的默认格式。允许设置年、月、日、小时、分钟、秒和毫秒的格式。常规格式为： gridlines: { units: { years: {format: [/format strings here/]}, months: {format: [/format strings here/]}, days: {format: [/format strings here/]} hours: {format: [/format strings here/]} minutes: {format: [/format strings here/]} seconds: {format: [/format strings here/]}, milliseconds: {format: [/format strings here/]}, } } 如需了解详情，请参阅日期和时间。类型：object 默认值：null
vAxis.logScale	如果为 true，则使纵轴以对数刻度表示。注意：所有值必须为正数。类型：布尔值默认值：false
vAxis.scaleType	`vAxis` 属性，将纵轴设为对数刻度。可以是： null - 不执行对数缩放。 “log”- 对数缩放。不绘制负值和零值。此选项与设置 `vAxis: { logscale: true }` 相同。 “MirrorLog”- 对数缩放，其中绘制负值和零值。绘制的负数值是绝对值的对数的负数。接近 0 的值按线性刻度绘制。类型：字符串默认值：null
vAxis.textPosition	纵轴文本相对于图表区域的位置。支持的值：“out”“in”“none”。类型：字符串默认值：“out”
vAxis.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>}`
vAxis.ticks	将自动生成的 Y 轴刻度线替换为指定数组。数组的每个元素都应是有效的刻度值（例如数字、日期、日期时间或时间）或对象。如果是对象，则应具有用于 tick 值的 `v` 属性，以及包含要显示为标签的文字字符串的可选 `f` 属性。除非您指定要替换的 `viewWindow.min` 或 `viewWindow.max`，否则 viewWindow 将自动展开即可包括最小和最大 tick。示例： `vAxis: { ticks: [5,10,15,20] }` `vAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }` `vAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }` `vAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }` 类型：元素数组默认：auto
vAxis.title	`vAxis` 属性，用于指定纵轴的标题。类型：字符串默认：无标题
vAxis.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>}`
vAxis.maxValue	将纵轴的最大值移动到指定值；在大多数图表中这个值都将向上移动。如果设置的值小于数据的最大 y 值，则忽略。 `vAxis.viewWindow.max` 会替换此属性。类型：数字默认：自动
vAxis.minValue	将纵轴的最小值移到指定值；在大多数图表中，该值将是向下的。如果设为大于数据最小 y 值的值，则忽略。 `vAxis.viewWindow.min` 会替换此属性。类型：数字默认值：null
vAxis.viewWindowMode	指定如何缩放纵轴以在图表区域内渲染值。支持以下字符串值： 'pretty' - 缩放垂直值，使最大和最小数据值稍微位于图表区域的底部和顶部。 viewWindow 会展开为最近的主网格线（对于数字）或最近的次要网格线（对于日期和时间）。 'maximized' - 缩放垂直值，使最大和最小数据值接触图表区域的顶部和底部。这会导致 `vaxis.viewWindow.min` 和 `vaxis.viewWindow.max` 被忽略。 “露骨内容”- 用于指定图表区域的顶部和底部刻度值的已弃用选项。（已弃用，因为它与 `vaxis.viewWindow.min` 和 `vaxis.viewWindow.max` 重复。系统会剪裁超出这些值的数据值。您必须指定一个 `vAxis.viewWindow` 对象，用于描述要显示的最大值和最小值。类型：字符串默认值：相当于“pretty”，但如果使用，则 `vaxis.viewWindow.min` 和 `vaxis.viewWindow.max` 优先。
vAxis.viewWindow	指定纵轴的剪裁范围。类型：object 默认值：null
vAxis.viewWindow.max	要呈现的最大行业数据值。当 `vAxis.viewWindowMode` 为“pretty”或“maximized”时，会被忽略。类型：数字默认：auto
vAxis.viewWindow.min	要渲染的最小行业数据值。当 `vAxis.viewWindowMode` 为“pretty”或“maximized”时，会被忽略。类型：数字默认：auto
宽度	图表的宽度，以像素为单位。类型：数字默认值：所包含元素的宽度

方法

方法
`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

事件

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

名称
`animationfinish`	过渡动画完整播放时触发。属性：无
`click`	当用户点击图表内部时触发。可用于识别何时点击标题、数据元素、图例条目、轴、网格线或标签。属性：targetID
`error`	尝试渲染图表时出错时触发。属性：id、message
`legendpagination`	当用户点击图例分页箭头时触发。传回当前图例（从 0 开始）的网页索引和总页数。属性：currentPageIndex、totalPages
`onmouseover`	用户将鼠标悬停在视觉实体上时触发。传回相应数据表元素的行和列索引。气泡与数据表中的某行相关联（列索引为 null）。属性：行、列
`onmouseout`	用户将鼠标远离视觉实体时触发。传回相应数据表元素的行和列索引。气泡与数据表中的某行相关联（列索引为 null）。属性：行、列
`ready`	该图表已准备好进行外部方法调用。如果您想与图表交互并在绘制图表后调用方法，则应在调用 `draw` 方法之前为该事件设置监听器，并仅在事件触发后调用监听器。属性：无
`select`	当用户点击视觉实体时触发。如需了解已选择的内容，请调用 `getSelection()`。属性：无

数据政策

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