可视化：气泡图

示例

```<html>
<script type="text/javascript">

function drawSeriesChart() {

['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}}
};

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

```

按数字着色

```<html>
<script type="text/javascript">
function drawChart() {
['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']}
};

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

自定义标签

```  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">

function drawChart() {

['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
}
}
};

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

```  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">

function drawChart() {

['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',
}
}
};

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

正在加载

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

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

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

数据格式

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

第 0 列 第 1 列 第 2 列 第 3 列（可选） 第 4 列（可选）

• string
用于标识同一系列中的气泡的字符串。使用相同的值来标识属于同一系列的所有气泡；同一系列中的气泡将被分配到相同的颜色。可以使用 `series` 选项配置系列。
• 数字
使用 `colorAxis` 选项映射到渐变比例上实际颜色的值。

配置选项

animation.duration

animation.easing

• “Linear”- 恒定速度。
• “in”- 缓入 - 开始时要慢，速度快。
• '出' - 缓出 - 快速启动，然后放慢速度。
• 'inAndOut' - 缓入和缓出 - 开始时要慢，加速，然后慢。

animation.startup

axisTitlesPosition

• in - 在图表区域内绘制轴标题。
• out - 在图表区域外绘制轴标题。
• none - 省略轴标题。

backgroundColor

backgroundColor.stroke

backgroundColor.strokeWidth

backgroundColor.fill

bubble

bubble.opacity

bubble.stroke

bubble.textStyle

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

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

chartArea

chartArea.backgroundColor

• `stroke`：颜色，以十六进制字符串或英文颜色名称的形式提供。
• `strokeWidth`：如果提供，则会在具有指定宽度（颜色为 `stroke`）的图表区域周围绘制边框。

chartArea.left

chartArea.top

chartArea.width

chartArea.height

colorAxis

` {minValue: 0,  colors: ['#FF0000', '#00FF00']}`

colorAxis.minValue

colorAxis.maxValue

colorAxis.values

colorAxis.colors

colorAxis.legend

colorAxis.legend.position

• “top”- 图表上方。
• 'bottom' - 图表下方。
• “in”- 图表内部，顶部。
• “none”- 不显示图例。

colorAxis.legend.textStyle

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

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

colorAxis.legend.numberFormat

enableInteractivity

explorer

`explorer` 选项允许用户平移和缩放 Google 图表。`explorer: {}` 提供了默认的探索器行为，让用户能够通过拖动进行水平和垂直平移，以及通过滚动进行缩放。

explorer.actions

• `dragToPan`：拖动可在图表水平和垂直方向上平移。如需仅沿水平轴平移，请使用 `explorer: { axis: 'horizontal' }`。 纵轴也是如此。
• `dragToZoom`：该探索器的默认行为是在用户滚动时放大和缩小。如果使用了 `explorer: { actions: ['dragToZoom', 'rightClickToReset'] }`，在矩形区域上拖动可放大该区域。我们建议每使用 `dragToZoom` 都使用 `rightClickToReset`。有关缩放自定义，请参阅 `explorer.maxZoomIn``explorer.maxZoomOut``explorer.zoomDelta`
• `rightClickToReset`：右键点击图表可将其恢复到原始的平移和缩放级别。

explorer.axis

explorer.keepInBounds

explorer.maxZoomIn

explorer.maxZoomOut

explorer.zoomDelta

fontSize

fontName

forceIFrame

hAxis

```{
title: 'Hello',
titleTextStyle: {
color: '#FF0000'
}
}
```

hAxis.baseline

hAxis.baselineColor

hAxis.direction

hAxis.format

• `{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 万）

hAxis.gridlines

`{color: '#333', minSpacing: 20}`

hAxis.gridlines.color

hAxis.gridlines.count

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*/]},
}
}
```

hAxis.minorGridlines

hAxis.minorGridlines.color

hAxis.minorGridlines.count

hAxis.minorGridlines.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*/]},
}
}
```

hAxis.logScale

`hAxis` 属性，将横轴设为对数刻度（要求所有值均为正数）。如果设为 true，则表示是的。

hAxis.scaleType

`hAxis` 属性，将横轴设为对数刻度。可以是：

• null - 不执行对数缩放。
• “log”- 对数缩放。不绘制负值和零值。此选项与设置 `hAxis: { logscale: true }` 相同。
• “MirrorLog”- 对数缩放，其中绘制负值和零值。绘制的负数值是绝对值的对数的负数。接近 0 的值按线性刻度绘制。

hAxis.textPosition

hAxis.textStyle

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

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

hAxis.ticks

• `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] }`

hAxis.title

`hAxis` 属性，用于指定横轴的标题。

hAxis.titleTextStyle

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

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

hAxis.maxValue

hAxis.minValue

hAxis.viewWindowMode

• 'pretty' - 缩放水平值，使最大和最小数据值稍微位于图表区域的左侧和右侧。 viewWindow 会展开为最近的主网格线（对于数字）或最近的次要网格线（对于日期和时间）。
• 'maximized' - 缩放水平值，使最大和最小数据值接触图表区域的左侧和右侧。这会导致 `haxis.viewWindow.min``haxis.viewWindow.max` 被忽略。
• “露骨内容”- 用于指定图表区域左侧和右侧缩放比例值的已弃用选项。（已弃用，因为它与 `haxis.viewWindow.min``haxis.viewWindow.max` 重复）。系统将剪裁超出这些值的数据值。您必须指定一个 `hAxis.viewWindow` 对象，用于描述要显示的最大值和最小值。

hAxis.viewWindow

hAxis.viewWindow.max

`hAxis.viewWindowMode` 为“pretty”或“maximized”时，会被忽略。

hAxis.viewWindow.min

`hAxis.viewWindowMode` 为“pretty”或“maximized”时，会被忽略。

`{position: 'top', textStyle: {color: 'blue', fontSize: 16}}`

legend.alignment

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

legend.maxLines

legend.pageIndex

legend.position

• 'bottom' - 图表下方。
• “left”- 位于图表左侧，前提是左轴没有与之关联的数据系列。 因此，如果您希望显示左侧的图例，请使用 `targetAxisIndex: 1` 选项。
• “in”- 在图表内，左上角。
• “none”- 不显示图例。
• “right”- 位于图表右侧。与 `vAxes` 选项不兼容。
• “top”- 图表上方。

legend.textStyle

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

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

selectionMode

`selectionMode``'multiple'` 时，用户可以选择多个数据点。

• `color` - 要用于此系列的颜色。请指定有效的 HTML 颜色字符串。
• `visibleInLegend` - 一个布尔值，其中 true 表示系列中应包含图例条目，false 表示不应包含图例条目。默认值为 true。

`series: {'Europe': {color: 'green'}}`

sizeAxis

` {minValue: 0,  maxSize: 20}`

sizeAxis.maxSize

sizeAxis.maxValue

sizeAxis.minSize

sizeAxis.minValue

sortBubblesBySize

• 'maximized' - 最大化图表区域，并在图表区域内绘制图例和所有标签。设置以下选项：
```chartArea: {width: '100%', height: '100%'},
legend: {position: 'in'},
titlePosition: 'in', axisTitlesPosition: 'in',
hAxis: {textPosition: 'in'}, vAxis: {textPosition: 'in'}
```

titlePosition

• in - 在图表区域内绘制标题。
• out - 在图表区域以外绘制标题。
• 无 - 省略标题。

titleTextStyle

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

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

`{textStyle: {color: '#FF0000'}, showColorCode: true}`

tooltip.isHtml

tooltip.textStyle

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

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

tooltip.trigger

• “focus”- 用户将鼠标悬停在元素上时将显示提示。
• “none”- 不会显示提示。
• “selection”- 当用户选择元素时，系统将显示提示。

vAxis

`{title: 'Hello', titleTextStyle: {color: '#FF0000'}}`

vAxis.baseline

`vAxis` 属性，用于指定纵轴的基准。如果基线大于最高网格线或小于最低网格线，则基线将四舍五入为最近的网格线。

vAxis.baselineColor

vAxis.direction

vAxis.format

• `{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 万）

vAxis.gridlines

`{color: '#333', minSpacing: 20}`

vAxis.gridlines.color

vAxis.gridlines.count

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*/]}
}
}
```

vAxis.minorGridlines

vAxis.minorGridlines.color

vAxis.minorGridlines.count

vAxis.minorGridlines.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*/]},
}
}
```

vAxis.logScale

vAxis.scaleType

`vAxis` 属性，将纵轴设为对数刻度。可以是：

• null - 不执行对数缩放。
• “log”- 对数缩放。不绘制负值和零值。此选项与设置 `vAxis: { logscale: true }` 相同。
• “MirrorLog”- 对数缩放，其中绘制负值和零值。绘制的负数值是绝对值的对数的负数。接近 0 的值按线性刻度绘制。

vAxis.textPosition

vAxis.textStyle

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

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

vAxis.ticks

• `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] }`

vAxis.title

`vAxis` 属性，用于指定纵轴的标题。

vAxis.titleTextStyle

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

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

vAxis.maxValue

vAxis.minValue

vAxis.viewWindowMode

• 'pretty' - 缩放垂直值，使最大和最小数据值稍微位于图表区域的底部和顶部。 viewWindow 会展开为最近的主网格线（对于数字）或最近的次要网格线（对于日期和时间）。
• 'maximized' - 缩放垂直值，使最大和最小数据值接触图表区域的顶部和底部。这会导致 `vaxis.viewWindow.min``vaxis.viewWindow.max` 被忽略。
• “露骨内容”- 用于指定图表区域的顶部和底部刻度值的已弃用选项。（已弃用，因为它与 `vaxis.viewWindow.min``vaxis.viewWindow.max` 重复。系统会剪裁超出这些值的数据值。您必须指定一个 `vAxis.viewWindow` 对象，用于描述要显示的最大值和最小值。

vAxis.viewWindow

vAxis.viewWindow.max

`vAxis.viewWindowMode` 为“pretty”或“maximized”时，会被忽略。

vAxis.viewWindow.min

`vAxis.viewWindowMode` 为“pretty”或“maximized”时，会被忽略。

方法

`draw(data, options)`

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

`getBoundingBox(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)`

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

`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)`

`setAction(action)`

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

`setSelection()`

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

Return Type（返回类型）：none

事件

`animationfinish`

`click`

`error`

`legendpagination`

`onmouseover`

`onmouseout`

`ready`

`select`

数据政策

[{ "type": "thumb-down", "id": "missingTheInformationINeed", "label":"没有我需要的信息" },{ "type": "thumb-down", "id": "tooComplicatedTooManySteps", "label":"太复杂/步骤太多" },{ "type": "thumb-down", "id": "outOfDate", "label":"内容需要更新" },{ "type": "thumb-down", "id": "translationIssue", "label":"翻译问题" },{ "type": "thumb-down", "id": "samplesCodeIssue", "label":"示例/代码问题" },{ "type": "thumb-down", "id": "otherDown", "label":"其他" }]
[{ "type": "thumb-up", "id": "easyToUnderstand", "label":"易于理解" },{ "type": "thumb-up", "id": "solvedMyProblem", "label":"解决了我的问题" },{ "type": "thumb-up", "id": "otherUp", "label":"其他" }]