概览
在浏览器中使用 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(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 或表示渐变比例的颜色的值,具体取决于列类型: 
 | 尺寸;此列中的值使用 sizeAxis选项映射到实际像素值。 | 
| 数据类型: | string | number | number | 字符串或数字 | number | 
配置选项
| 名称 | |
|---|---|
| animation.duration | 动画的时长(以毫秒为单位)。如需了解详情,请参阅动画文档。 类型:数字 默认值:0 | 
| animation.easing | 应用于动画的加/减速函数。提供的选项如下: 
 类型:字符串 默认值:“线性” | 
| animation.startup | 
      确定图表是否在首次绘制时呈现动画效果。如果为  类型:布尔值 默认值 false | 
| axisTitlesPosition | 轴标题的放置位置(相对于图表区域)。支持的值: 
 类型:字符串 默认值:“out” | 
| backgroundColor | 
      图表主要区域的背景颜色。可以是简单的 HTML 颜色字符串(例如  类型:字符串或对象 默认:“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>}
         类型:object 
        默认值: 
          {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
         | 
| chartArea | 
      一个对象,其中包含用于配置图表区域(绘制图表本身,不包括轴和图例)的位置和大小的成员。支持两种格式:数字或数字后跟 %。简单数字是以像素为单位的值;数字后跟 % 表示百分比。示例: 类型:object 默认值:null | 
| chartArea.backgroundColor | 
      图表区域背景颜色。使用字符串时,它可以是十六进制字符串(例如,'#fdc') 或英文颜色名称。使用对象时,可以提供以下属性:
 
 类型:字符串或对象 默认:“white” | 
| chartArea.left | 从左侧边框绘制图表的距离。 类型:数字或字符串 默认:auto | 
| chartArea.top | 从顶部边框绘制图表的距离。 类型:数字或字符串 默认:auto | 
| chartArea.width | 图表区域宽度。 类型:数字或字符串 默认:auto | 
| chartArea.height | 图表区域高度。 类型:数字或字符串 默认:auto | 
| 颜色 | 
      用于图表元素的颜色。字符串数组,其中每个元素都是一个 HTML 颜色字符串,例如: 类型:字符串数组 默认:默认颜色 | 
| colorAxis | 用于指定颜色列值和颜色之间的映射或渐变比例的对象。 要指定此对象的属性,您可以使用对象字面量表示法,如下所示:  {minValue: 0,  colors: ['#FF0000', '#00FF00']}类型:object 默认值:null | 
| colorAxis.minValue | 
      如果存在,则指定图表颜色数据的最小值。此值及以下值的颜色数据值将渲染为  类型:数字 默认:图表数据中颜色列的最小值 | 
| colorAxis.maxValue | 
      如果存在,则指定图表颜色数据的最大值。此值及更高级别的颜色数据值将渲染为  类型:数字 默认:图表数据中颜色列的最大值 | 
| colorAxis.values | 
      如果存在,用于控制值与颜色的关联方式。每个值都与  类型:数字数组 默认值:null | 
| colorAxis.colors | 
      要为可视化图表中的值指定的颜色。字符串数组,其中每个元素都是一个 HTML 颜色字符串,例如: 类型:颜色字符串数组 默认值:null | 
| colorAxis.legend | 用于指定渐变颜色图例样式的对象。 类型:object 默认值:null | 
| colorAxis.legend.position | 图例的位置。可以是下列选项之一: 
 类型:object 默认值:“top” | 
| colorAxis.legend.textStyle | 用于指定图例文本样式的对象。该对象的格式如下: {color: <string>, fontName: <string>, fontSize: <number>}
         类型:object 
        默认值: 
          {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
         | 
| colorAxis.legend.numberFormat | 
        数字标签的格式字符串。这是 
          ICU 模式集
        的一部分。
例如, 类型:字符串 默认:auto | 
| enableInteractivity | 图表是抛出基于用户的事件,还是对用户互动做出响应。如果为 false,则图表不会抛出“select”或其他基于互动的事件(但会抛出 ready 事件或 error 事件),也不会显示悬停文本或根据用户输入进行其他更改。 类型:布尔值 默认值:true | 
| explorer | 
       此功能是实验性功能,可能会在未来版本中发生变化。 注意:分层图表仅适用于连续轴(例如数字或日期)。 类型:object 默认值:null | 
| explorer.actions | Google 图表浏览器支持三种操作: 
 类型:字符串数组 默认值:['dragToPan', 'rightClickToReset'] | 
| explorer.axis | 
      默认情况下,使用  类型:字符串 默认:同时进行水平和垂直平移 | 
| explorer.keepInBounds | 
      默认情况下,无论数据位于何处,用户都可以平移。为确保用户不会平移到原始图表以外,请使用  类型:布尔值 默认值:false | 
| explorer.maxZoomIn | 
      探索器可以放大的最大数值。默认情况下,用户可以放大到只有 25% 的原始视图。设置  类型:数字 默认值:0.25 | 
| explorer.maxZoomOut | 
      探索器可以缩小的最大值。默认情况下,用户能够将图表缩小到仅占可用空间的 1/4。设置  类型:数字 默认值:4 | 
| 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 颜色字符串,例如: 类型:数字 默认:“black” | 
| hAxis.direction | 
      值沿水平轴的增长方向。指定  类型:1 或 -1 默认值:1 | 
| hAxis.format | 
      数字轴标签的格式字符串。这是 
        ICU 模式集
      的一部分。例如, 
 应用于标签的实际格式源自 API 加载时所使用的语言区域。如需了解详情,请参阅 加载具有特定语言区域的图表 。 
      在计算刻度线值和网格线时,系统会考虑所有相关网格线选项的几个备选组合,如果格式化的刻度线标签重复或重叠,则将拒绝备选组合。因此,如果您只想显示整数刻度线值,则可以指定  类型:字符串 默认:auto | 
| hAxis.gridlines | 一个对象,包含用于配置横轴上的网格线的属性。 请注意,横轴网格线是垂直绘制的。要指定此对象的属性,您可以使用对象字面量表示法,如下所示: {color: '#333', minSpacing: 20}类型:object 默认值:null | 
| hAxis.gridlines.color | 图表区域内水平网格线的颜色。请指定有效的 HTML 颜色字符串。 类型:字符串 默认:“#CCC” | 
| hAxis.gridlines.count | 
      图表区域内水平网格线的大致数量。
      如果您为  类型:数字 默认值:-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 来停用次要网格线之外, 类型:数字 默认值: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 | 
       类型:布尔值 默认值:false | 
| hAxis.scaleType | 
       
 类型:字符串 默认值:null | 
| hAxis.textPosition | 横轴文本相对于图表区域的位置。支持的值:“out”“in”“none”。 类型:字符串 默认值:“out” | 
| hAxis.textStyle | 一个对象,用于指定横轴文本样式。该对象的格式如下: 
{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    
       类型:object 
      默认值: 
        {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
       | 
| hAxis.ticks | 
      将自动生成的 X 轴刻度线替换为指定数组。数组的每个元素都应是有效的刻度值(例如数字、日期、日期时间或时间)或对象。如果是对象,则应具有用于 tick 值的  
      除非您指定要替换的  示例: 
 类型:元素数组 默认:auto | 
| hAxis.title | 
       类型:字符串 默认值:null | 
| hAxis.titleTextStyle | 一个对象,用于指定横轴标题文本样式。该对象的格式如下: 
{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    
       类型:object 
      默认值: 
        {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
       | 
| hAxis.maxValue | 
      将横轴的最大值移至指定值;在大多数图表中,此值为向右移动。如果设置的值小于数据最大 x 值,则忽略。
       类型:数字 默认:自动 | 
| hAxis.minValue | 
      将横轴的最小值移到指定值;在大多数图表中,该值将位于左侧。如果设为大于数据最小 x 值的值,则忽略。
       类型:数字 默认:自动 | 
| hAxis.viewWindowMode | 指定如何缩放横轴以在图表区域内渲染值。支持以下字符串值: 
 类型:字符串 
      默认值:相当于“pretty”,但如果使用,则  haxis.viewWindow.min和haxis.viewWindow.max优先。 | 
| hAxis.viewWindow | 指定横轴的剪裁范围。 类型:object 默认值:null | 
| hAxis.viewWindow.max | 要渲染的最大水平数据值。 当  类型:数字 默认:auto | 
| hAxis.viewWindow.min | 要渲染的最小水平数据值。 当  类型:数字 默认:auto | 
| 高度 | 图表的高度(以像素为单位)。 类型:数字 默认值:所包含元素的高度 | 
| 传奇 | 包含成员的对象,用于配置图例的各个方面。要指定此对象的属性,您可以使用对象字面量表示法,如下所示: {position: 'top', textStyle: {color: 'blue', fontSize: 16}}类型:object 默认值:null | 
| legend.alignment | 图例的对齐方式。可以是下列选项之一: 
 起点、中心和终点是相对于图例的样式(垂直或水平)而言的。 例如,在“右侧”图例中,“start”和“end”分别位于顶部和底部;对于“顶部”图例,“start”和“end”分别位于区域的左侧和右侧。 默认值取决于图例的位置。对于“底部”图例,默认值为“center”;其他图例默认为“start”。 类型:字符串 默认:自动 | 
| legend.maxLines | 图例中的行数上限。将此值设为大于 1 的数字即可向图例中添加线条。注意:用于确定实际渲染线条数的确切逻辑仍然处于变化之中。 此选项目前仅在 Legend.position 为“top”时有效。 类型:数字 默认值:1 | 
| legend.pageIndex | 图例最初选择的从零开始的页面索引。 类型:数字 默认值:0 | 
| legend.position | 图例的位置。可以是下列选项之一: 
 类型:字符串 默认:“right” | 
| legend.textStyle | 用于指定图例文本样式的对象。该对象的格式如下: 
{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    
       类型:object 
      默认值: 
        {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
       | 
| selectionMode | 
      当  类型:字符串 默认:“single” | 
| 系列图书 | 一个对象的对象,其中键是系列名称(Color 列中的值),每个对象都描述了图表中相应系列的格式。如果未指定系列或值,将使用全局值。每个对象都支持以下属性: 
 series: {'Europe': {color: 'green'}}类型:包含嵌套对象的对象 默认值: | 
| sizeAxis | 一个对象,其中包含用于配置值与气泡大小的关联方式的成员。要指定此对象的属性,您可以使用对象字面量表示法,如下所示:  {minValue: 0,  maxSize: 20}类型:object 默认值:null | 
| sizeAxis.maxSize | 可能的最大气泡的半径上限(以像素为单位)。 类型:数字 默认值:30 | 
| sizeAxis.maxValue | 
      要映射到  类型:数字 默认:图表数据中大小列的最大值 | 
| sizeAxis.minSize | 可能的最小气泡的最小半径(以像素为单位)。 类型:数字 默认值:5 | 
| sizeAxis.minValue | 
      要映射到  类型:数字 默认:图表数据中大小列的最小值 | 
| sortBubblesBySize | 如果为 true,则按大小对气泡进行排序,使较小的气泡显示在较大的气泡上方。如果为 false,则根据气泡在 DataTable 中的顺序对其进行排序。 类型:布尔值 默认值:true | 
| 主题 | 主题是一组预定义的选项值,这些值协同发挥作用来实现特定的图表行为或视觉效果。目前只有一个主题可用: 
 类型:字符串 默认值:null | 
| 标题 | 要在图表上方显示的文本。 类型:字符串 默认:无标题 | 
| titlePosition | 图表标题的放置位置(相对于图表区域)。支持的值: 
 类型:字符串 默认值:“out” | 
| titleTextStyle | 一个对象,用于指定标题文本样式。该对象的格式如下: 
{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    
       类型: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> }
    
       类型:object 
      默认值: 
        {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
       | 
| tooltip.trigger | 导致显示提示的用户互动: 
 类型:字符串 默认:“focus” | 
| vAxis | 包含用于配置各种纵轴元素的成员的对象。要指定此对象的属性,您可以使用对象字面量表示法,如下所示: {title: 'Hello', titleTextStyle: {color: '#FF0000'}}类型:object 默认值:null | 
| vAxis.baseline | 
       类型:数字 默认:自动 | 
| vAxis.baselineColor | 
      指定纵轴基线的颜色。可以是任何 HTML 颜色字符串,例如: 类型:数字 默认:“black” | 
| vAxis.direction | 
      值沿纵轴的增长方向。默认情况下,图表底部会显示较小的值。指定  类型:1 或 -1 默认值:1 | 
| vAxis.format | 
      数字轴标签的格式字符串。这是 
        ICU 模式集
      的一部分。
例如, 
 应用于标签的实际格式源自 API 加载时所使用的语言区域。如需了解详情,请参阅 加载具有特定语言区域的图表 。 
      在计算刻度线值和网格线时,系统会考虑所有相关网格线选项的几个备选组合,如果格式化的刻度线标签重复或重叠,则将拒绝备选组合。因此,如果您只想显示整数刻度线值,则可以指定  类型:字符串 默认:auto | 
| vAxis.gridlines | 一个对象,其中包含用于在纵轴上配置网格线的成员。 请注意,纵轴网格线是水平绘制的。如需指定此对象的属性,您可以使用对象字面量表示法,如下所示: {color: '#333', minSpacing: 20}类型:object 默认值:null | 
| vAxis.gridlines.color | 图表区域内垂直网格线的颜色。请指定有效的 HTML 颜色字符串。 类型:字符串 默认:“#CCC” | 
| vAxis.gridlines.count | 
      图表区域内水平网格线的大致数量。
      如果您为  类型:数字 默认值:-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 | 
       
 类型:字符串 默认值:null | 
| vAxis.textPosition | 纵轴文本相对于图表区域的位置。支持的值:“out”“in”“none”。 类型:字符串 默认值:“out” | 
| vAxis.textStyle | 用于指定纵轴文本样式的对象。该对象的格式如下: 
{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    
       类型:object 
      默认值: 
        {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
       | 
| vAxis.ticks | 
      将自动生成的 Y 轴刻度线替换为指定数组。数组的每个元素都应是有效的刻度值(例如数字、日期、日期时间或时间)或对象。如果是对象,则应具有用于 tick 值的  
      除非您指定要替换的  示例: 
 类型:元素数组 默认:auto | 
| vAxis.title | 
 类型:字符串 默认:无标题 | 
| vAxis.titleTextStyle | 一个对象,用于指定纵轴标题文本样式。该对象的格式如下: 
{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
  
     类型:object 
      默认值: 
        {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
       | 
| vAxis.maxValue | 
      将纵轴的最大值移动到指定值;在大多数图表中这个值都将向上移动。如果设置的值小于数据的最大 y 值,则忽略。
       类型:数字 默认:自动 | 
| vAxis.minValue | 
      将纵轴的最小值移到指定值;在大多数图表中,该值将是向下的。如果设为大于数据最小 y 值的值,则忽略。
       类型:数字 默认值:null | 
| vAxis.viewWindowMode | 指定如何缩放纵轴以在图表区域内渲染值。支持以下字符串值: 
 类型:字符串 
      默认值:相当于“pretty”,但如果使用,则  vaxis.viewWindow.min和vaxis.viewWindow.max优先。 | 
| vAxis.viewWindow | 指定纵轴的剪裁范围。 类型:object 默认值:null | 
| vAxis.viewWindow.max | 要呈现的最大行业数据值。 当  类型:数字 默认:auto | 
| vAxis.viewWindow.min | 要渲染的最小行业数据值。 当  类型:数字 默认:auto | 
| 宽度 | 图表的宽度,以像素为单位。 类型:数字 默认值:所包含元素的宽度 | 
方法
| 方法 | |
|---|---|
| draw(data, options) | 
      绘制图表。只有在  Return Type(返回类型):none | 
| getAction(actionID) | 返回具有所请求的  返回类型:object | 
| getBoundingBox(id) | 
      返回一个对象,其中包含图表元素  
 值是相对于图表容器而言的。在绘制图表之后调用此方法。 返回类型:object | 
| getChartAreaBoundingBox() | 返回一个对象,其中包含图表内容的左侧、顶部、宽度和高度(即不包括标签和图例): 
 值是相对于图表容器而言的。在绘制图表之后调用此方法。 返回类型:object | 
| getChartLayoutInterface() | 返回一个对象,其中包含有关图表在屏幕上的位置及其元素的信息。 可以对返回的对象调用以下方法: 
 在绘制图表之后调用此方法。 返回类型:object | 
| getHAxisValue(xPosition, optional_axis_index) | 
      返回  示例: 在绘制图表之后调用此方法。 Return Type(返回类型):number | 
| getImageURI() | 返回已序列化为图片 URI 的图表。 在绘制图表之后调用此方法。 请参阅打印 PNG 图表。 返回类型:字符串 | 
| getSelection() | 
      返回所选图表实体的数组。
    
      可选实体是气泡。
    
    
    
      对于此图表,在任何给定时刻,只能选择一个实体。
    
      
         返回类型:选择元素数组 | 
| getVAxisValue(yPosition, optional_axis_index) | 
      返回  示例: 在绘制图表之后调用此方法。 Return Type(返回类型):number | 
| getXLocation(dataValue, optional_axis_index) | 
      返回  示例: 在绘制图表之后调用此方法。 Return Type(返回类型):number | 
| getYLocation(dataValue, optional_axis_index) | 
      返回  示例: 在绘制图表之后调用此方法。 Return Type(返回类型):number | 
| removeAction(actionID) | 从图表中移除包含所请求  返回值类型: none | 
| setAction(action) | 设置当用户点击操作文本时要执行的提示操作。 
       
      任何和所有提示操作都应在调用图表的  返回值类型: none | 
| setSelection() | 
      选择指定的图表实体。取消之前的所有选择。
    
      可选实体是气泡。
    
    
    
      对于此图表,一次只能选择一个实体。
    
      
         Return Type(返回类型):none | 
| clearChart() | 清除图表,并释放为其分配的所有资源。 Return Type(返回类型):none | 
事件
如需详细了解如何使用这些事件,请参阅基本互动、处理事件和触发事件。
| 名称 | |
|---|---|
| animationfinish | 过渡动画完整播放时触发。 属性:无 | 
| click | 当用户点击图表内部时触发。可用于识别何时点击标题、数据元素、图例条目、轴、网格线或标签。 属性:targetID | 
| error | 尝试渲染图表时出错时触发。 属性:id、message | 
| legendpagination | 当用户点击图例分页箭头时触发。传回当前图例(从 0 开始)的网页索引和总页数。 属性:currentPageIndex、totalPages | 
| onmouseover | 用户将鼠标悬停在视觉实体上时触发。传回相应数据表元素的行和列索引。 气泡与数据表中的某行相关联(列索引为 null)。 属性:行、列 | 
| onmouseout | 用户将鼠标远离视觉实体时触发。传回相应数据表元素的行和列索引。 气泡与数据表中的某行相关联(列索引为 null)。 属性:行、列 | 
| ready | 
      该图表已准备好进行外部方法调用。如果您想与图表交互并在绘制图表后调用方法,则应在调用  属性:无 | 
| select | 
      当用户点击视觉实体时触发。如需了解已选择的内容,请调用  属性:无 | 
数据政策
所有代码和数据都会在浏览器中处理并呈现。系统不会向任何服务器发送任何数据。