概览
Google 条形图使用 SVG 或 VML 在浏览器中呈现，具体看哪个适合用户浏览器。与所有 Google 图表一样，当用户将鼠标悬停在数据上时，条形图会显示提示。如需查看此图表的纵向版本，请参阅柱形图。
示例
彩条
让我们绘制四种贵金属的密度：
上面的所有颜色均默认为蓝色。这是因为它们都属于同一系列；如果有第二个系列，则会显示为红色。我们可以使用样式角色自定义这些颜色：
有三种不同的颜色选择方式，我们的数据表将它们全部展示了：RGB 值、英文颜色名称和类似 CSS 的声明：
var data = google.visualization.arrayToDataTable([
['Element', 'Density', { role: 'style' }],
['Copper', 8.94, '#b87333'], // RGB value
['Silver', 10.49, 'silver'], // English color name
['Gold', 19.30, 'gold'],
['Platinum', 21.45, 'color: #e5e4e2' ], // CSS-style declaration
]);
条形样式
通过样式角色，您可以使用类似 CSS 的声明控制条形外观的以下几个方面：
coloropacityfill-colorfill-opacitystroke-colorstroke-opacitystroke-width
我们建议您不要在图表中随意混合样式，建议您选择一种样式并坚持使用，但为了演示所有样式属性，我们使用了一个采样器：
前两个条形均使用特定的 color（第一个具有英文名称，第二个具有 RGB 值）。未选择任何 opacity，因此会使用默认值 1.0（完全不透明）；因此，第二个竖条会遮盖其后面的网格线。在第三个竖条中，使用的 opacity 为 0.2，显示网格线。在第四个栏中，使用了三个样式属性：stroke-color 和 stroke-width 用于绘制边框，而 fill-color 用于指定内部矩形的颜色。最右边的竖条还使用 stroke-opacity 和 fill-opacity 为边框和填充选择不透明度：
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Visitations', { role: 'style' } ],
['2010', 10, 'color: gray'],
['2020', 14, 'color: #76A7FA'],
['2030', 16, 'opacity: 0.2'],
['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
]);
为栏添加标签
图表具有多种标签，例如刻度标记、图例标签和提示中的标签。在本节中，我们将介绍如何在条形图的条形内部（或附近）添加标签。
假设我们希望为每个条形添加适当的化学符号。我们可以使用 annotation 角色执行此操作：
在数据表中，我们使用 { role:
'annotation' } 定义一个新列，用于保存条形标签：
var data = google.visualization.arrayToDataTable([
['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
['Copper', 8.94, '#b87333', 'Cu' ],
['Silver', 10.49, 'silver', 'Ag' ],
['Gold', 19.30, 'gold', 'Au' ],
['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
]);
虽然用户可以将鼠标悬停在条形上来查看数据值，但您可能希望将它们本身包含在条形中：
这会比实际情况稍微复杂一点，因为我们会创建一个 DataView 来指定每个竖条的注解。
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Element", "Density", { role: "style" } ],
["Copper", 8.94, "#b87333"],
["Silver", 10.49, "silver"],
["Gold", 19.30, "gold"],
["Platinum", 21.45, "color: #e5e4e2"]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" },
2]);
var options = {
title: "Density of Precious Metals, in g/cm^3",
width: 600,
height: 400,
bar: {groupWidth: "95%"},
legend: { position: "none" },
};
var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
chart.draw(view, options);
}
</script>
<div id="barchart_values" style="width: 900px; height: 300px;"></div>
如果要为值设置不同的格式，可以定义 formatter，并将其封装在函数中，如下所示：
function getValueAt(column, dataTable, row) {
return dataTable.getFormattedValue(row, column);
}
然后，我们可以使用 calc: getValueAt.bind(undefined, 1) 调用它。
如果标签太大而无法完全放入栏中，则会显示在外部：
堆叠条形图
堆叠条形图是一种条形图，可将相关值相互叠加。如果存在任何负值，它们会按反向顺序堆叠在图表轴基准线下方。 当某个类别自然地分为多个部分时，通常使用堆叠条形图。例如，假设一些图书销量按类型划分，并进行了不同时间的比较：
您可以通过将 isStacked 选项设置为 true 来创建堆叠条形图：
var data = google.visualization.arrayToDataTable([
['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
'Western', 'Literature', { role: 'annotation' } ],
['2010', 10, 24, 20, 32, 18, 5, ''],
['2020', 16, 22, 23, 30, 16, 9, ''],
['2030', 28, 19, 29, 30, 12, 13, '']
]);
var options = {
width: 600,
height: 400,
legend: { position: 'top', maxLines: 3 },
bar: { groupWidth: '75%' },
isStacked: true
};
堆叠条形图还支持 100% 堆叠，即重新缩放每个域值处的元素堆栈，使之和等于 100%。此选项的选项包括 isStacked: 'percent'（将每个值的格式设置为 100% 的百分比）和 isStacked: 'relative'（将每个值的格式设置为 1 的分数形式）。此外，还有一个 isStacked: 'absolute' 选项，它的功能等同于 isStacked: true。
请注意，在右侧的 100% 堆叠图表中，刻度值基于相对 0-1 的刻度（以 1 的分数表示），但轴值显示为百分比。这是因为百分比轴刻度是将“#.##%”格式应用于相对 0-1 刻度值的结果。使用 isStacked: 'percent' 时，请务必使用相对 0-1 的刻度指定所有基点。
var options_stacked = {
isStacked: true,
height: 300,
legend: {position: 'top', maxLines: 3},
hAxis: {minValue: 0}
};
var options_fullStacked = {
isStacked: 'percent',
height: 300,
legend: {position: 'top', maxLines: 3},
hAxis: {
minValue: 0,
ticks: [0, .3, .6, .9, 1]
}
};
创建 Material 条形图
2014 年，Google 发布了相关准则，旨在让 Google 平台的各种媒体资源和应用（例如 Android 应用）具有统一的外观和风格。我们将这项工作称为 Material Design。我们将提供所有核心图表的“Material”版本；如果您喜欢它们的外观，则可以使用它们。
创建 Material 条形图类似于创建我们现在所说的“经典”条形图。加载 Google Visualization API（尽管使用 'bar' 软件包，而不是 'corechart' 软件包），定义数据表，然后创建对象（但要创建对象，但要创建类 google.charts.Bar，而不是 google.visualization.BarChart）。
注意：Material 图表在旧版 Internet Explorer 中无法使用。（IE8 及更低版本不支持 Material 图表所需的 SVG。）
与传统条形图相比，Material 条形图表有很多小的改进，包括改进了调色板、圆角、更清晰的标签格式、更紧密的系列之间的默认间距、更柔和的网格线和标题（以及添加了字幕）。
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
bars: 'horizontal' // Required for Material Bar Charts.
};
var chart = new google.charts.Bar(document.getElementById('barchart_material'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
</script>
</head>
<body>
<div id="barchart_material" style="width: 900px; height: 500px;"></div>
</body>
</html>
Material 图表目前处于 Beta 版阶段。其外观和互动性基本上是最终决定，但是传统图表中的许多选项目前还没有在旧版图表中提供。您可以在此问题中找到尚不支持的选项列表。
此外，选项的声明方式并非最终确定，因此，如果您使用任何传统选项，则必须将其转换为 Material 选项，方法是替换下面这行代码：chart.draw(data, options);
...具体代码如下所示：
chart.draw(data, google.charts.Bar.convertOptions(options));
通过 google.charts.Bar.convertOptions()，您可以利用某些功能，如 hAxis/vAxis.format 预设选项。
Dual-X 图表
注意：双 X 轴仅适用于 Material 图表（即带有 bar 软件包的图表）。
有时，您可能希望在条形图中显示两个数据系列，并且具有两条独立的 x 轴：一个数据系列的顶部轴和另一个数据系列的底部轴：
请注意，我们不仅是两条 x 轴的标签（“解析器”与“视级”），而且它们都有自己独立的刻度和网格线。如果要自定义此行为，请使用 hAxis.gridlines 选项。
在下面的代码中，axes 和 series 选项共同指定图表的双 X 外观。series 选项指定为每个轴使用哪个轴（'distance' 和 'brightness'；它们与数据表中的列名称没有任何关系）。axes 选项随后可将此图表变成双 X 图表，并将 'apparent magnitude' 轴置于顶部，'parsecs' 轴置于底部。
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.arrayToDataTable([
['Galaxy', 'Distance', 'Brightness'],
['Canis Major Dwarf', 8000, 23.3],
['Sagittarius Dwarf', 24000, 4.5],
['Ursa Major II Dwarf', 30000, 14.3],
['Lg. Magellanic Cloud', 50000, 0.9],
['Bootes I', 60000, 13.1]
]);
var options = {
width: 800,
chart: {
title: 'Nearby galaxies',
subtitle: 'distance on the left, brightness on the right'
},
bars: 'horizontal', // Required for Material Bar Charts.
series: {
0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'.
1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'.
},
axes: {
x: {
distance: {label: 'parsecs'}, // Bottom x-axis.
brightness: {side: 'top', label: 'apparent magnitude'} // Top x-axis.
}
}
};
var chart = new google.charts.Bar(document.getElementById('dual_x_div'));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id="dual_x_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
热门排行榜
注意：前 X 轴仅适用于 Material 图表（即包含软件包 bar 的图表）。
如果要将 X 轴标签和标题放置在图表顶部而不是底部，您可以在 Material 图表中使用 axes.x 选项执行此操作：
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.arrayToDataTable([
['Opening Move', 'Percentage'],
["King's pawn (e4)", 44],
["Queen's pawn (d4)", 31],
["Knight to King 3 (Nf3)", 12],
["Queen's bishop pawn (c4)", 10],
['Other', 3]
]);
var options = {
title: 'Chess opening moves',
width: 900,
legend: { position: 'none' },
chart: { title: 'Chess opening moves',
subtitle: 'popularity by percentage' },
bars: 'horizontal', // Required for Material Bar Charts.
axes: {
x: {
0: { side: 'top', label: 'Percentage'} // Top x-axis.
}
},
bar: { groupWidth: "90%" }
};
var chart = new google.charts.Bar(document.getElementById('top_x_div'));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id="top_x_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
正在加载
google.charts.load 软件包名称为 "corechart"。该可视化图表的类名称为 google.visualization.BarChart。
google.charts.load("current", {packages: ["corechart"]});
var visualization = new google.visualization.BarChart(container);
对于 Material 条形图，google.charts.load 软件包名称为 "bar"。该可视化图表的类名称为 google.charts.Bar。
google.charts.load("current", {packages: ["bar"]});
var chart = new google.charts.Bar(container);
数据格式
行：表格中的每一行代表一组条形。
列：
| 第 0 列 | 第 1 列 | ... | 第 N 列 | |
|---|---|---|---|---|
| 用途： |
|
该组中的条形 1 值 | ... | 该组中的条形 N 值 |
| 数据类型： |
|
number | ... | number |
| 角色： | 网域 | data | ... | data |
| 可选的列角色： | ... |
配置选项
| 名称 | |
|---|---|
| animation.duration |
动画的时长（以毫秒为单位）。如需了解详情，请参阅动画文档。 类型：数字
默认值：0
|
| animation.easing |
应用于动画的加/减速函数。提供的选项如下：
类型：字符串
默认值：“线性”
|
| animation.startup |
确定图表是否在首次绘制时呈现动画效果。如果为 类型：布尔值
默认值 false
|
| annotations.alwaysOutside |
在 Bar 和
Column 图表中，如果设置为 类型：布尔值
默认值：false
|
| annotations.datum |
对于支持注释的图表，
annotations.datum 对象可让您覆盖 Google 图表为个别数据元素提供的注释（例如，条形图上每个条形显示的值）的选择。您可以使用 annotations.datum.stem.color 控制颜色，使用 annotations.datum.stem.length 控制树干长度，使用 annotations.datum.style 控制样式。
类型：object
默认：颜色为“黑色”；长度为 12；样式为“点”。
|
| annotations.domain |
对于支持注释的图表，借助
annotations.domain 对象，您可以替换 Google 图表为某个网域（图表的长轴，例如典型折线图上的 X 轴）提供的注释选择。您可以使用 annotations.domain.stem.color 控制颜色，使用 annotations.domain.stem.length 控制树干长度，使用 annotations.domain.style 控制样式。
类型：object
默认：颜色为“黑色”；长度为 5；样式为“点”。
|
| annotations.boxStyle |
对于支持注释的图表，
var options = {
annotations: {
boxStyle: {
// Color of the box outline.
stroke: '#888',
// Thickness of the box outline.
strokeWidth: 1,
// x-radius of the corner curvature.
rx: 10,
// y-radius of the corner curvature.
ry: 10,
// Attributes for linear gradient fill.
gradient: {
// Start color for gradient.
color1: '#fbf6a7',
// Finish color for gradient.
color2: '#33b679',
// Where on the boundary to start and
// end the color1/color2 gradient,
// relative to the upper left corner
// of the boundary.
x1: '0%', y1: '0%',
x2: '100%', y2: '100%',
// If true, the boundary for x1,
// y1, x2, and y2 is the box. If
// false, it's the entire chart.
useObjectBoundingBoxUnits: true
}
}
}
};
目前，此选项适用于面积图、条形图、柱形图、组合图、折线图和散点图。注释图表不支持此功能。 类型：object
默认值：null
|
| annotations.highContrast |
对于支持注释的图表，您可以使用
annotations.highContrast 布尔值替换 Google 图表选择的注释颜色。默认情况下，annotations.highContrast 为 true，这会导致图表选择对比度良好的注释颜色：浅色背景配深色，深色配浅色。如果您将 annotations.highContrast 设为 false 并且未指定自己的注释颜色，Google 图表将为注释使用默认系列颜色：
类型：布尔值
默认值：true
|
| annotations.stem |
对于支持注释的图表，您可以使用
annotations.stem 对象替换 Google 图表为主干样式选择的图表。您可以使用 annotations.stem.color 控制颜色，使用 annotations.stem.length 控制茎长度。请注意，主干长度选项对样式为 'line' 的注释没有影响：对于 'line' 基准注释，主干长度始终与文本相同；对于 'line' 域注释，主干长度会延伸在整个图表中。
类型：object
默认：颜色为“black”；域注释的长度为 5 个字符，数据注释的长度为 12 个字符。
|
| annotations.style |
类型：字符串
默认值：“point”
|
| annotations.textStyle |
对于支持注释的图表，
annotations.textStyle 对象用于控制注释文本的外观：
var options = {
annotations: {
textStyle: {
fontName: 'Times-Roman',
fontSize: 18,
bold: true,
italic: true,
// The color of the text.
color: '#871b47',
// The color of the text outline.
auraColor: '#d799ae',
// The transparency of the text.
opacity: 0.8
}
}
};
目前，此选项适用于面积图、条形图、柱形图、组合图、折线图和散点图。 注释图表 不支持此功能。 类型：object
默认值：null
|
| axisTitlesPosition |
轴标题的放置位置（相对于图表区域）。支持的值：
类型：字符串
默认值：“out”
|
| backgroundColor |
图表主要区域的背景颜色。可以是简单的 HTML 颜色字符串（例如 类型：字符串或对象
默认：“white”
|
| backgroundColor.stroke |
图表边框的颜色，以 HTML 颜色字符串表示。 类型：字符串
默认：“#666”
|
| backgroundColor.strokeWidth |
边框宽度（以像素为单位）。 类型：数字
默认值：0
|
| backgroundColor.fill |
图表的填充颜色，采用 HTML 颜色字符串的形式。 类型：字符串
默认：“white”
|
| bar.groupWidth |
一组条形的宽度，可采用以下任一格式指定：
类型：数字或字符串
默认值：黄金比例，约为“61.8%”。
|
| 条形 |
Material 条形图中的条形是垂直还是水平。此选项对传统条形图或传统柱形图没有影响。 类型：“水平”或“垂直”
默认：“vertical”
|
| chartArea |
一个对象，其中包含用于配置图表区域（绘制图表本身，不包括轴和图例）的位置和大小的成员。支持两种格式：数字或数字后跟 %。简单数字是以像素为单位的值；数字后跟 % 表示百分比。示例： 类型：object
默认值：null
|
| chartArea.backgroundColor |
图表区域背景颜色。使用字符串时，它可以是十六进制字符串（例如，'#fdc') 或英文颜色名称。使用对象时，可以提供以下属性：
类型：字符串或对象
默认：“white”
|
| chartArea.left |
从左侧边框绘制图表的距离。 类型：数字或字符串
默认：auto
|
| chartArea.top |
从顶部边框绘制图表的距离。 类型：数字或字符串
默认：auto
|
| chartArea.width |
图表区域宽度。 类型：数字或字符串
默认：auto
|
| chartArea.height |
图表区域高度。 类型：数字或字符串
默认：auto
|
| chart.subtitle |
对于材质图表，此选项会指定副标题。只有 Material 图表支持字幕。 类型：字符串
默认值：null
|
| chart.title |
对于 Material 图表，此选项会指定标题。 类型：字符串
默认值：null
|
| 颜色 |
用于图表元素的颜色。字符串数组，其中每个元素都是一个 HTML 颜色字符串，例如： 类型：字符串数组
默认：默认颜色
|
| dataOpacity |
数据点的透明度，1.0 表示完全不透明，0.0 表示完全透明。 在散点图、直方图、条形图和柱形图中，这指的是可见数据：散点图中的点和矩形中的矩形。在选择数据会创建一个点的图表（如折线图和面积图）中，是指在光标悬停或选择时显示的圆形。组合图表展示了这两种行为，此选项对其他图表没有影响。（如需更改趋势线的不透明度，请参阅 趋势线不透明度 。） 类型：数字
默认值：1.0
|
| 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
|
| focusTarget |
鼠标悬停时获得焦点的实体的类型。还会影响鼠标点击选择哪个实体，以及哪个数据表元素与事件相关联。可以是下列选项之一：
在 focusTarget“category”中，提示会显示所有类别值。这对于比较不同系列的值可能很有用。 类型：字符串
默认：“datum”
|
| fontSize |
图表中所有文字的默认字体大小（以像素为单位）。您可以使用特定图表元素的属性替换此设置。 类型：数字
默认：自动
|
| fontName |
图表中所有文字的默认字体。您可以使用特定图表元素的属性替换此设置。 类型：字符串
默认：“Arial”
|
| forceIFrame |
在内嵌框架内绘制图表。（请注意，在 IE8 上，此选项会被忽略；所有 IE8 图表都是在 iframe 中绘制的。） 类型：布尔值
默认值：false
|
| hAxes |
如果图表具有多个横轴，则指定各个横轴的属性。每个子对象都是一个
如需指定具有多个横轴的图表，请先使用
此属性可以是对象或数组：对象是对象的集合，每个对象都带有一个数字标签，用于指定其定义的轴 - 如上所示的格式；数组是对象数组，每个轴一个。例如，以下数组样式的表示法与上面显示的
hAxes: {
{}, // Nothing specified for axis 0
{
title:'Losses',
textStyle: {
color: 'red'
}
} // Axis 1
类型：对象数组或包含子对象的对象
默认值：null
|
| 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.textStyle |
一个对象，用于指定横轴文本样式。该对象的格式如下：
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
类型：object
默认值：
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| hAxis.textPosition |
横轴文本相对于图表区域的位置。支持的值：“out”“in”“none”。 类型：字符串
默认值：“out”
|
| 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
|
| 高度 |
图表的高度（以像素为单位）。 类型：数字
默认值：所包含元素的高度
|
| isStacked |
如果设置为 true，则在每个域值处堆叠所有系列的元素。 注意：在列、面积和 SteppedArea 图表中，Google 图表会颠倒图例项的顺序，以便更好地与系列元素的堆叠对应（例如，系列 0 将是最底部的图例项）。此 不适用于 条形图。
对于 100% 堆叠，为每个元素计算出的值将显示在提示中实际值之后。
目标轴默认基于相对的 0-1 刻度刻度值，
100% 堆叠仅支持 类型：布尔值/字符串
默认值：false
|
| 传奇 |
包含成员的对象，用于配置图例的各个方面。要指定此对象的属性，您可以使用对象字面量表示法，如下所示： {position: 'top', textStyle: {color: 'blue', fontSize: 16}}
类型：object
默认值：null
|
| legend.pageIndex |
图例最初选择的从零开始的页面索引。 类型：数字
默认值：0
|
| legend.position |
图例的位置。可以是下列选项之一：
类型：字符串
默认：“right”
|
| legend.alignment |
图例的对齐方式。可以是下列选项之一：
起点、中心和终点是相对于图例的样式（垂直或水平）而言的。 例如，在“右侧”图例中，“start”和“end”分别位于顶部和底部；对于“顶部”图例，“start”和“end”分别位于区域的左侧和右侧。 默认值取决于图例的位置。对于“底部”图例，默认值为“center”；其他图例默认为“start”。 类型：字符串
默认：自动
|
| legend.textStyle |
用于指定图例文本样式的对象。该对象的格式如下：
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
类型：object
默认值：
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| reverseCategories |
如果设为 true，系统将从下到上绘制数据系列。默认设置为从上到下绘制。 类型：布尔值
默认值：false
|
| 屏幕方向 |
图表的方向。设置为 类型：字符串
默认：'水平'
|
| 系列图书 |
一个对象数组，其中每个对象都描述了图表中相应系列的格式。要为系列使用默认值，请指定空对象 {}。如果未指定系列或值，系统将使用全局值。每个对象都支持以下属性：
您可以指定对象数组，其中每个对象都会按给定顺序应用于系列；也可以指定一个对象，其中每个子对象都有一个数字键，用于指示该对象所适用的系列。例如，以下两项声明完全相同，将第一个数据系列声明为黑色且未显示在图例中，而将第四个数据系列声明为红色数据并不存在于图例中：
series: [
{color: 'black', visibleInLegend: false}, {}, {},
{color: 'red', visibleInLegend: false}
]
series: {
0:{color: 'black', visibleInLegend: false},
3:{color: 'red', visibleInLegend: false}
}
类型：对象数组或包含嵌套对象的对象
默认值：
|
| 主题 |
主题是一组预定义的选项值，这些值协同发挥作用来实现特定的图表行为或视觉效果。目前只有一个主题可用：
类型：字符串
默认值：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.ignoreBounds |
如果设置为 注意：这仅适用于 HTML 提示。如果通过 SVG 提示启用此功能，图表边界以外的任何溢出都将被剪裁。如需了解详情，请参阅自定义提示内容。 类型：布尔值
默认值：false
|
| tooltip.isHtml |
如果此政策设为 true，系统会使用 HTML 渲染（而非 SVG 渲染）提示。如需了解详情，请参阅自定义提示内容。 注意：气泡图可视化图表不支持通过提示列数据角色自定义 HTML 提示内容。 类型：布尔值
默认值：false
|
| tooltip.showColorCode |
如果为 true，则在提示中的系列信息旁边显示彩色方块。当 类型：布尔值
默认：自动
|
| 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”
|
| 趋势线 |
在支持
趋势线
的图表上显示这些趋势线。默认使用线性趋势线，但您可以使用
趋势线是按系列指定的，因此大多数情况下，您的选项将如下所示：
var options = {
trendlines: {
0: {
type: 'linear',
color: 'green',
lineWidth: 3,
opacity: 0.3,
showR2: true,
visibleInLegend: true
}
}
}
类型：object
默认值：null
|
| trendlines.n.color |
趋势线 的颜色，以英文颜色名称或十六进制字符串表示。 类型：字符串
默认：默认系列图书颜色
|
| trendlines.n.degree |
对于 类型：数字
默认值：3
|
| trendlines.n.labelInLegend |
设置后， 趋势线 将以此字符串的形式显示在图例中。 类型：字符串
默认值：null
|
| trendlines.n.lineWidth |
趋势线 的线宽（以像素为单位）。 类型：数字
默认值：2
|
| trendlines.n.opacity |
趋势线 的透明度，介于 0.0（透明）到 1.0（不透明）。 类型：数字
默认值：1.0
|
| trendlines.n.pointSize |
趋势线
通过在图表上标注一组点来绘制；这个很少用到的选项可让您自定义点的大小。通常最好使用趋势线的 类型：数字
默认值：1
|
| trendlines.n.pointsVisible |
趋势线
是通过在图表上标注若干点来绘制的。趋势线的 类型：布尔值
默认值：true
|
| trendlines.n.showR2 |
是否在图例或趋势线提示中显示 决定系数 。 类型：布尔值
默认值：false
|
| trendlines.n.type |
趋势线
是 类型：字符串
默认：线性
|
| trendlines.n.visibleInLegend |
趋势线 等式是否显示在图例中。（显示在趋势线提示中。） 类型：布尔值
默认值：false
|
| vAxis |
包含用于配置各种纵轴元素的成员的对象。要指定此对象的属性，您可以使用对象字面量表示法，如下所示： {title: 'Hello', titleTextStyle: {color: '#FF0000'}}
类型：object
默认值：null
|
| vAxis.baseline |
只有 类型：数字
默认：自动
|
| vAxis.baselineColor |
指定纵轴基线的颜色。可以是任何 HTML 颜色字符串，例如：
只有 类型：数字
默认：“black”
|
| vAxis.direction |
值沿纵轴的增长方向。默认情况下，图表底部会显示较小的值。指定 类型：1 或 -1
默认值：1
|
| vAxis.format |
数字或日期轴标签的格式字符串。
对于数字轴标签，这是十进制格式
ICU 模式集
的子集。例如，
对于日期轴标签，这是日期格式
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）以及与行关联的类别（列索引为 null）。 属性：行、列
|
onmouseout |
用户将鼠标远离视觉实体时触发。传回相应数据表元素的行和列索引。 条形与数据表中的单元格、列的图例条目（行索引为 null）以及与行关联的类别（列索引为 null）。 属性：行、列
|
ready |
该图表已准备好进行外部方法调用。如果您想与图表交互并在绘制图表后调用方法，则应在调用 属性：无
|
select |
当用户点击视觉实体时触发。如需了解已选择的内容，请调用 属性：无
|
数据政策
所有代码和数据都会在浏览器中处理并呈现。系统不会向任何服务器发送任何数据。