概览
使用 SVG 或 VML 在浏览器中呈现的气泡图。将鼠标悬停在气泡上时,显示相关提示。
气泡图用于直观呈现包含 2-4 个维度的数据集。前两个维度以坐标表示,第三个以颜色表示,第四个以颜色表示。
示例
<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>
上图的标签难以看清,其中一个原因是周围的空白。这称为 Aura,如果您希望在没有 Aura 的情况下使用图表,可以将 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 选项映射到实际像素值。 |
数据类型: | 字符串 | number | number | 字符串或数字 | number |
配置选项
名称 | |
---|---|
动画时长 |
动画的时长(以毫秒为单位)。如需了解详情,请参阅动画文档。 类型:数字
默认:0
|
动画缓和 |
已应用于动画的加/减速函数。提供的选项如下:
类型:字符串
默认:“线性”
|
animation.startup |
确定图表是否会在初始绘制时以动画形式呈现。如果为 类型:布尔值
默认 false
|
坐标轴位置 |
相较于图表区域,轴标题的放置位置。支持的值:
类型:字符串
默认:使用“out”
|
backgroundColor |
图表主区域的背景颜色。可以是简单的 HTML 颜色字符串(例如 类型:字符串或对象
默认:“白色”
|
backgroundColor.stroke 中 |
图表边框的颜色,采用 HTML 颜色字符串的形式。 类型:字符串
默认:'#666'
|
backgroundColor.strokeWidth |
边框宽度(以像素为单位)。 类型:数字
默认:0
|
backgroundColor.fill |
图表的填充颜色,以 HTML 颜色字符串表示。 类型:字符串
默认:“白色”
|
bubble |
一个具有成员的对象,用于配置气泡的视觉属性。 Type:对象
默认:null
|
bubble.opacity |
气泡的不透明度,其中 0 表示完全透明,1 表示完全不透明。 类型:介于 0.0 和 1.0 之间的数字
默认:0.8
|
描边 |
气泡描边的颜色。 类型:字符串
默认:“#ccc”
|
bubble.textStyle |
用于指定气泡文本样式的对象。此对象的格式如下: {color: <string>, fontName: <string>, fontSize: <number>}
Type:对象
默认:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
图表区域 |
一个具有成员的对象,用于配置图表区域的位置和大小(绘制图表本身时,不包括轴和图例)。支持两种格式:数字或后跟 % 的数字。简单的数字是一个以像素为单位的值,数字后跟 % 是一个百分比。示例: Type:对象
默认:null
|
chartArea.backgroundColor |
图表区域背景颜色。使用字符串时,它可以是十六进制字符串(例如,“#fdc”)或英语颜色名称。使用对象时,可以提供以下属性:
类型:字符串或对象
默认:“白色”
|
图表区域 |
从左边框绘制图表的距离。 类型:数字或字符串
默认:自动
|
图表区域 |
从上边框绘制图表的距离。 类型:数字或字符串
默认:自动
|
图表区域.宽度 |
图表区域宽度。 类型:数字或字符串
默认:自动
|
图表.a.height |
图表区域高度。 类型:数字或字符串
默认:自动
|
颜色 |
用于图表元素的颜色。字符串数组,其中每个元素都是一个 HTML 颜色字符串,例如: 类型:字符串数组
默认:默认颜色
|
colorAxis |
用于指定颜色列值与颜色或渐变比例之间的映射的对象。 要指定此对象的属性,您可以使用对象字面量表示法,如下所示: {minValue: 0, colors: ['#FF0000', '#00FF00']} Type:对象
默认:null
|
colorAxis.minValue |
如果存在,请指定图表颜色数据的最小值。此值及更低的颜色值将呈现为 类型:数字
默认:图表数据中颜色列的最小值
|
colorAxis.maxValue |
如果存在,请指定图表颜色数据的最大值。此值及以上的颜色值将呈现为 类型:数字
默认:图表数据中颜色列的最大值
|
colorAxis.values |
如果存在,则控制值如何与颜色相关联。每个值都与 类型:数字数组
默认:null
|
colorAxis.colors |
要分配给可视化图表中的值的颜色。字符串数组,其中每个元素都是一个 HTML 颜色字符串,例如: 类型:颜色字符串数组
默认:null
|
colorAxis.legend |
一个对象,用于指定渐变颜色图例的样式。 Type:对象
默认:null
|
colorAxis.legend.position |
图例的位置。可以是下列选项之一:
Type:对象
默认:“top”
|
colorAxis.legend.textStyle |
用于指定图例文本样式的对象。此对象的格式如下: {color: <string>, fontName: <string>, fontSize: <number>}
Type:对象
默认:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
colorAxis.legend.numberFormat |
数字标签的格式字符串。这是 ICU 模式集的一部分。例如, 类型:字符串
默认:自动
|
启用互动 |
图表是抛出基于用户的事件还是响应用户互动。如果设为 false,则图表不会抛出“select”事件或其他基于互动的事件(但会抛出“ready”或“error”事件),并且不会显示悬停文本或者根据用户输入以其他方式更改。 类型:布尔值
默认:true
|
explorer |
此功能是实验性功能,在未来版本中可能会更改。 注意:探索器仅适用于连续轴(例如数字或日期)。 Type:对象
默认: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
|
字体大小 |
图表中所有文字的默认字体大小(以像素为单位)。您可以使用特定图表元素的属性来替换此设置。 类型:数字
默认:自动
|
字体名称 |
图表中所有文本的默认字体。您可以使用特定图表元素的属性来替换此设置。 类型:字符串
默认:“Nearline”
|
forceIFrame |
在内嵌框架内绘制图表。(请注意,在 IE8 中,系统会忽略此选项;所有 IE8 图表都是在 iframe 中绘制的)。 类型:布尔值
默认:false
|
轴 |
包含用于配置各种横轴元素的成员。如需指定此对象的属性,您可以使用对象字面量表示法,如下所示: { title: 'Hello', titleTextStyle: { color: '#FF0000' } } Type:对象
默认:null
|
hAxis.baseline |
横轴的基准。 类型:数字
默认:自动
|
hAxis.baselineColor |
横轴基线的颜色。可以是任何 HTML 颜色字符串,例如 类型:数字
默认:'black'
|
haxis.direction |
横轴上值的方向。指定 类型:1 或 -1
默认:1
|
hAxis.format |
数字轴标签的格式字符串。这是 ICU 模式集的一部分。例如,对于值 10、7.5 和 0.5,
应用于标签的实际格式来自加载 API 时使用的语言区域。如需了解详情,请参阅加载包含特定语言区域的图表。
在计算刻度线值和网格线时,系统将考虑所有相关网格选项的若干备选组合,如果带格式的对勾标记被复制或重叠,则替代项将被拒绝。因此,如果您只想显示整数刻度值,则可以指定 类型:字符串
默认:自动
|
hAxis.gridlines |
一个用于配置横轴网格线的属性。 请注意,横轴网格线是垂直绘制的。如需指定此对象的属性,您可以使用对象字面量表示法,如下所示: {color: '#333', minSpacing: 20} Type:对象
默认: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*/]}, } } 如需了解详情,请参阅日期和时间。 Type:对象
默认:null
|
hAxis.minorGridline |
包含用于配置横轴上的次要网格线的对象,与 hAxis.gridlines 选项类似。 Type:对象
默认:null
|
hAxis.minorGridlines.color |
图表区域内水平次要网格线的颜色。请指定有效的 HTML 颜色字符串。 类型:字符串
默认:网格线和背景颜色的混合
|
hAxis.minorGridlines.count |
除了通过将计数设为 0 来停用次要网格外, 类型:数字
默认:1
|
hAxis.minorGridlines.units |
在与图表计算的 MinorDisk 网格线结合使用时,覆盖日期/日期时间/时段数据类型各个方面的默认格式。允许设置年、月、日、小时、分钟、秒和毫秒的格式。 常规格式为: 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*/]}, } } 如需了解详情,请参阅日期和时间。 Type:对象
默认: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> }
Type:对象
默认:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
hAxis.ticks |
使用指定的数组替换自动生成的 X 轴刻度线。数组的每个元素都应该是有效的 tick 值(例如数字、日期、日期时间或时间)或对象。如果是对象,它应该为 tick 值创建一个
除非您指定要替换的 示例:
类型:元素数组
默认:自动
|
Haxis.title |
类型:字符串
默认:null
|
hAxis.titleTextStyle |
用于指定横轴标题文本样式的对象。此对象的格式如下: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Type:对象
默认:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
hAxis.maxValue |
将横轴的最大值移动到指定值;在大多数图表中,该值会向右移动。如果设置的此值小于数据的最大 x 值,则忽略。
类型:数字
默认:自动
|
hAxis.minValue |
将横轴的最小值移动到指定值;在大多数图表中,该值会向左移动。如果设为大于数据最小值 x 值的值,系统会忽略此参数。
类型:数字
默认:自动
|
hAxis.viewWindowMode |
指定如何缩放横轴以在图表区域内呈现值。支持以下字符串值:
类型:字符串
默认:相当于“ nice”,但使用
haxis.viewWindow.min 和 haxis.viewWindow.max 时优先级更高。 |
hAxis.viewWindow |
指定横轴的剪裁范围。 Type:对象
默认:null
|
hAxis.viewWindow.max |
要呈现的最大水平数据值。 当 类型:数字
默认:自动
|
hAxis.viewWindow.min |
要呈现的最小水平数据值。 当 类型:数字
默认:自动
|
高度 |
图表的高度(以像素为单位)。 类型:数字
默认:包含元素的高度
|
传奇 |
包含用于配置图例各个方面的成员的对象。如需指定此对象的属性,您可以使用对象字面量表示法,如下所示: {position: 'top', textStyle: {color: 'blue', fontSize: 16}} Type:对象
默认:null
|
图例匹配 |
图例的对齐方式。可以是下列选项之一:
起点、中心和终点相对于图例的样式(垂直或水平)。例如,在“right”图例中,“start”和“end”分别位于顶部和底部;对于“top”图例,“start”和“end”分别位于该区域的左侧和右侧。 默认值取决于图例的位置。对于“底部”图例,默认值为“居中”;其他图例默认为“开始”。 类型:字符串
默认:自动
|
图例.max 行 |
图例中的行数上限。将此列设置为大于 1 的数字,以便为图例添加线条。注意:用于确定实际呈现的行数的准确逻辑仍在变化。 目前,仅当图例位置为“顶部”时,此选项才有效。 类型:数字
默认:1
|
图例页 |
选择的初始页面索引(从零开始)。 类型:数字
默认:0
|
图例位置 |
图例的位置。可以是下列选项之一:
类型:字符串
默认:“right”
|
图例样式 |
用于指定图例文本样式的对象。此对象的格式如下: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Type:对象
默认:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
选择模式 |
当 类型:字符串
默认:“单”
|
series |
一个对象的对象,其中键是系列名称(“颜色”列中的值),每个对象描述图表中对应系列的格式。如果未指定系列或值,将使用全局值。每个对象支持以下属性:
series: {'Europe': {color: 'green'}} 类型:包含嵌套对象的对象
默认:{}
|
sizeAxis [尺码轴] |
一个具有成员的对象,用于配置值与气泡大小的关联方式。如需指定此对象的属性,您可以使用对象字面量表示法,如下所示: {minValue: 0, maxSize: 20} Type:对象
默认:null
|
sizeAxis.maxSize |
可能的最大气泡的最大半径(以像素为单位)。 类型:数字
默认:30 个
|
sizeAxis.maxValue |
要映射到 类型:数字
默认:图表数据中尺寸列的最大值
|
sizeAxis.minSize |
可能的最小气泡的最小半径(以像素为单位)。 类型:数字
默认:5
|
sizeAxis.minValue |
要映射到 类型:数字
默认:图表数据中大小列的最小值
|
排序依据气泡大小 |
如果为 true,请按大小对气泡进行排序,使较小的气泡出现在较大的气泡上方。如果为 false,则按照在 DataTable 中的顺序对气泡进行排序。 类型:布尔值
默认:true
|
主题 |
主题是一组预定义的选项值,共同发挥作用以实现特定的图表行为或视觉效果。目前只提供一个主题:
类型:字符串
默认:null
|
标题 |
要在图表上方显示的文字。 类型:字符串
默认:无标题
|
title 位置 |
与图表区域相比,图表标题的放置位置。支持的值:
类型:字符串
默认:使用“out”
|
titleTextStyle |
用于指定标题文本样式的对象。此对象的格式如下: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Type:对象
默认:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
工具提示 |
一个具有成员的对象,用于配置各种提示元素。如需指定此对象的属性,您可以使用对象字面量表示法,如下所示: {textStyle: {color: '#FF0000'}, showColorCode: true} Type:对象
默认:null
|
hint.isHTML |
如果设置为 true,则使用 HTML 呈现(而不是 SVG 渲染)的提示。如需了解详情,请参阅自定义提示内容。 注意:气泡图可视化图表不支持通过提示列数据角色自定义 HTML 提示内容。 类型:布尔值
默认:false
|
提示文本 |
用于指定提示文本样式的对象。此对象的格式如下: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Type:对象
默认:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
tooltip.trigger |
使提示显示的用户交互:
类型:字符串
默认:焦点
|
轴 |
包含用于配置各种纵轴元素的成员。如需指定此对象的属性,您可以使用对象字面量表示法,如下所示: {title: 'Hello', titleTextStyle: {color: '#FF0000'}} Type:对象
默认:null
|
vAxis.baseline |
类型:数字
默认:自动
|
vAxis.baselineColor |
指定纵轴基线的颜色。可以是任何 HTML 颜色字符串,例如 类型:数字
默认:'black'
|
vAxis.direction |
纵轴上的值增大的方向。默认情况下,图表底部会显示低值。指定 类型:1 或 -1
默认:1
|
vAxis.format |
数字轴标签的格式字符串。这是 ICU 模式集的一部分。例如,对于值 10、7.5 和 0.5,
应用于标签的实际格式来自加载 API 时使用的语言区域。如需了解详情,请参阅加载包含特定语言区域的图表。
在计算刻度线值和网格线时,系统将考虑所有相关网格选项的若干备选组合,如果带格式的对勾标记被复制或重叠,则替代项将被拒绝。因此,如果您只想显示整数刻度值,则可以指定 类型:字符串
默认:自动
|
vAxis.gridlines |
一个具有成员的对象,用于在垂直轴上配置网格线。请注意,纵轴网格线是水平绘制的。如需指定此对象的属性,您可以使用对象字面量表示法,如下所示: {color: '#333', minSpacing: 20} Type:对象
默认: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*/]} } } 如需了解详情,请参阅日期和时间。 Type:对象
默认:null
|
vAxis.minorGridline |
一个对象,用于配置纵轴上的次要网格线,类似于 vAxis.gridlines 选项。 Type:对象
默认:null
|
vAxis.minorGridlines.color |
图表区域内垂直次要网格的颜色。请指定有效的 HTML 颜色字符串。 类型:字符串
默认:网格线和背景颜色的混合
|
vAxis.minorGridlines.count |
Minor 网格线选项大部分都已弃用,除非通过将计数设为 0 来停用次要网格线。次要网格线的数量取决于主要网格线(请参阅 vAxis.gridlines.interval)与最小所需空间之间的时间间隔(请参阅 vAxis.minorGridlines.minSpacing)。 类型:数字
默认:1
|
vAxis.minorGridlines.units |
在与图表计算的 MinorDisk 网格线结合使用时,覆盖日期/日期时间/时段数据类型各个方面的默认格式。允许设置年、月、日、小时、分钟、秒和毫秒的格式。 常规格式为: 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*/]}, } } 如需了解详情,请参阅日期和时间。 Type:对象
默认: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> }
Type:对象
默认:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
vAxis.ticks |
使用指定的数组替换自动生成的 Y 轴 tick。数组的每个元素都应该是有效的 tick 值(例如数字、日期、日期时间或时间)或对象。如果是对象,则它应该包含 tick 值的
除非您指定要替换的 示例:
类型:元素数组
默认:自动
|
vAxis.title |
类型:字符串
默认:无标题
|
vAxis.titleTextStyle |
用于指定纵轴标题文本样式的对象。此对象的格式如下: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Type:对象
默认:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
vAxis.maxValue |
将纵轴的最大值移动到指定值;在大多数图表中,该值会向上。如果该值设为小于数据最大 y 值的值,系统会忽略此参数。
类型:数字
默认:自动
|
vAxis.minValue |
将纵轴的最小值移至指定值;在大多数图表中,此值会下降。如果设置的此值大于数据中的最小 y 值,系统会忽略此参数。
类型:数字
默认:null
|
vAxis.viewWindowMode |
指定如何缩放纵轴以在图表区域内呈现值。支持以下字符串值:
类型:字符串
默认:相当于“ nice”,但使用
vaxis.viewWindow.min 和 vaxis.viewWindow.max 时优先级更高。 |
vAxis.viewWindow |
指定纵轴的剪裁范围。 Type:对象
默认:null
|
vAxis.viewWindow.max |
要呈现的垂直数据值的上限。 当 类型:数字
默认:自动
|
vAxis.viewWindow.min |
要呈现的最小垂直数据值。 当 类型:数字
默认:自动
|
width |
图表的宽度(以像素为单位)。 类型:数字
默认:包含元素的宽度
|
方法
方法 | |
---|---|
draw(data, options) |
绘制图表。图表仅在 返回值类型:无
|
getAction(actionID) |
返回包含请求的 返回值类型:
|
getBoundingBox(id) |
返回一个对象,包含图表元素
值是相对于图表容器而言的。在绘制图表之后调用此方法。 返回值类型:
|
getChartAreaBoundingBox() |
返回一个包含图表内容的左侧、顶部、宽度和高度的对象(即不包括标签和图例):
值是相对于图表容器而言的。在绘制图表之后调用此方法。 返回值类型:
|
getChartLayoutInterface() |
返回一个对象,其中包含有关图表的屏幕位置及其元素的信息。 可以对返回的对象调用以下方法:
在绘制图表之后调用此方法。 返回值类型:
|
getHAxisValue(xPosition, optional_axis_index) |
返回 示例: 在绘制图表之后调用此方法。 返回值类型:数字
|
getImageURI() |
返回序列化为图片 URI 的图表。 在绘制图表之后调用此方法。 请参阅打印 PNG 图表。 返回值类型:返回值类型
|
getSelection() |
返回一组选定图表实体。
可选择的实体是气泡。
在此图表中,在任何时候都只能选择一个实体。
返回值类型:一组选择元素
|
getVAxisValue(yPosition, optional_axis_index) |
返回 示例: 在绘制图表之后调用此方法。 返回值类型:数字
|
getXLocation(dataValue, optional_axis_index) |
返回 示例: 在绘制图表之后调用此方法。 返回值类型:数字
|
getYLocation(dataValue, optional_axis_index) |
返回 示例: 在绘制图表之后调用此方法。 返回值类型:数字
|
removeAction(actionID) |
从图表中移除所请求的 返回值类型:
none |
setAction(action) |
设置要在用户点击操作文本时执行的提示操作。
所有提示提示操作均应在调用图表的 返回值类型:
none |
setSelection() |
选择指定的图表实体。取消之前选择的所有内容。
可选择的实体是气泡。
对于此图表,一次只能选择一个实体。
返回值类型:无
|
clearChart() |
清除该图表,并释放其分配的所有资源。 返回值类型:无
|
事件
如需详细了解如何使用这些事件,请参阅基本互动、处理事件和触发事件。
名称 | |
---|---|
animationfinish |
在过渡动画播放完毕时触发。 属性:无
|
click |
在用户点击图表内时触发。可用于识别标题、数据元素、图例条目、轴、网格线或标签何时得到点击。 属性:targetID
|
error |
尝试渲染图表出错时触发。 属性:ID、消息
|
legendpagination |
在用户点击图例分页箭头时触发。传回当前图例中从零开始的页面索引和总页数。 属性:currentPageIndex、totalPages
|
onmouseover |
用户将鼠标放在视觉实体上时触发。传递相应数据表元素的行索引和列索引。 气泡与数据表中的行相关联(列索引为 null)。 属性:行、列
|
onmouseout |
在用户离开可见实体时触发。传递相应数据表元素的行索引和列索引。气泡与数据表中的行相关联(列索引为 null)。 属性:行、列
|
ready |
此图表已准备好进行外部方法调用。如果您想与图表交互,并在绘制后调用方法,则应在调用 属性:无
|
select |
在用户点击视觉实体时触发。如需了解所选内容,请调用 属性:无
|
数据政策
所有代码和数据都会在浏览器中进行处理和呈现。不会向任何服务器发送数据。