概览
直方图是一种将数字数据分组为分箱的图表，这些分箱以细分列的形式显示。它们用于描述数据集的分布情况，即值落入范围的频率。
Google 图表会自动为您选择分箱数量。 所有分箱的宽度相同，并且高度与分箱中的数据点数量成比例。在其他方面，直方图与柱形图类似。
示例
以下是恐龙长度的直方图：
直方图告诉我们，最常见的分箱小于 10 米，并且只有一只超过 40 米的恐龙。我们可以将鼠标悬停在此柱形上，看看它是岩龙（可能只是一个非常大的横龙；古生物学家不确定）。
用于生成此直方图的代码如下所示。定义数据后（此处使用 google.visualization.arrayToDataTable），图表通过调用 google.visualization.Histogram 进行定义，并使用 draw 方法绘制。
<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([
['Dinosaur', 'Length'],
['Acrocanthosaurus (top-spined lizard)', 12.2],
['Albertosaurus (Alberta lizard)', 9.1],
['Allosaurus (other lizard)', 12.2],
['Apatosaurus (deceptive lizard)', 22.9],
['Archaeopteryx (ancient wing)', 0.9],
['Argentinosaurus (Argentina lizard)', 36.6],
['Baryonyx (heavy claws)', 9.1],
['Brachiosaurus (arm lizard)', 30.5],
['Ceratosaurus (horned lizard)', 6.1],
['Coelophysis (hollow form)', 2.7],
['Compsognathus (elegant jaw)', 0.9],
['Deinonychus (terrible claw)', 2.7],
['Diplodocus (double beam)', 27.1],
['Dromicelomimus (emu mimic)', 3.4],
['Gallimimus (fowl mimic)', 5.5],
['Mamenchisaurus (Mamenchi lizard)', 21.0],
['Megalosaurus (big lizard)', 7.9],
['Microvenator (small hunter)', 1.2],
['Ornithomimus (bird mimic)', 4.6],
['Oviraptor (egg robber)', 1.5],
['Plateosaurus (flat lizard)', 7.9],
['Sauronithoides (narrow-clawed lizard)', 2.0],
['Seismosaurus (tremor lizard)', 45.7],
['Spinosaurus (spiny lizard)', 12.2],
['Supersaurus (super lizard)', 30.5],
['Tyrannosaurus (tyrant lizard)', 15.2],
['Ultrasaurus (ultra lizard)', 30.5],
['Velociraptor (swift robber)', 1.8]]);
var options = {
title: 'Lengths of dinosaurs, in meters',
legend: { position: 'none' },
};
var chart = new google.visualization.Histogram(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
标签（此处为恐龙名称）可以省略，在这种情况下，提示将仅显示数值。
控制颜色
以下是国家人口的直方图：
有 200 多个国家/地区的人口数量少于 1 亿，之后再严重出现尾随趋势。
此直方图使用 colors 选项以绿色绘制数据：
var options = {
title: 'Country Populations',
legend: { position: 'none' },
colors: ['green'],
};
与所有 Google 图表一样，颜色可以指定为英文名称或十六进制值。
控制存储分区
默认情况下，Google 图表会使用众所周知的直方图算法自动选择存储分区大小。不过，有时您需要替换此设置，上方图表只是一个示例。由于第一类中的国家/地区如此之多，因此很难了解其他国家/地区的情况。
对于这种情况，直方图提供了两个选项：histogram.bucketSize（替换算法并对存储分区大小进行硬编码）和 histogram.lastBucketPercentile。第二个选项需要更多说明：它会更改存储分区大小的计算，以忽略高于或低于其余值（指定百分比）的值。这些值仍会包含在直方图中，但不会影响它们的分桶方式。如果您不希望离群值进入各自的分桶，这会非常有用；它们将归入第一个或最后一个分桶。
在上图中，我们在计算分桶大小时忽略了前 5% 和后 5% 的值。这些值仍以图表形式呈现；唯一发生变化的是分桶大小，但这使得直方图更易于阅读。
此示例还展示了如何更改纵轴的刻度以使用“镜像对数”刻度，这在绘制具有较小值的长尾数据的图表时也很有用。
var options = {
title: 'Country Populations',
legend: { position: 'none' },
colors: ['#e7711c'],
histogram: { lastBucketPercentile: 5 },
vAxis: { scaleType: 'mirrorLog' }
};
如您所见，如果从计算中移除顶部和底部 5%，则得到的存储分区大小为 10000000，而不是 100000000。如果您一直都知道 1000 万的存储分区大小是您需要的，那么您可以使用 histogram.bucketSize 来实现此目的：
var options = {
title: 'Country Populations',
legend: { position: 'none' },
colors: ['#e7711c'],
histogram: { bucketSize: 10000000 }
};
在以下示例中，我们将展示如何扩大分区的范围，并显示更多分区，且各分区之间没有间隙。maxNumBuckets 选项可用于增加默认分桶数量。histogram.minValue 和 histogram.maxValue 选项将扩展存储分区的范围，但请注意，如果存在超出此范围的数据，这些选项不会缩小范围。
此示例还展示了如何使用 hAxis 的显式 ticks 选项指定要为每个存储分区显示的 tick。这不会影响存储分区本身，而仅影响 tick 的显示方式。
另请注意，我们指定了 chartArea.width，以便在没有视觉伪影的情况下更准确地拟合存储分区的数量。以下是适用于此示例的选项。
var options = {
title: 'Approximating Normal Distribution',
legend: { position: 'none' },
colors: ['#4285F4'],
chartArea: { width: 405 },
hAxis: {
ticks: [-1, -0.75, -0.5, -0.25, 0, 0.25, 0.5, 0.75, 1]
},
bar: { gap: 0 },
histogram: {
bucketSize: 0.01,
maxNumBuckets: 400,
minValue: -1,
maxValue: 1
}
};
多系列
以下是亚原子粒子的电荷（根据标准模型）的直方图：
上面的图表有一个包含所有粒子的系列。 亚原子粒子可以分为四类：夸克、轻子和玻色子。我们将每个系列视为各自的系列：
在此图表中，我们针对四种亚原子粒子中的每一种使用不同的系列（因此也使用颜色）。我们已将 interpolateNulls 明确设置为 false，以确保不会绘制 null 值（这是必需的，因为数据系列长度不等）。我们还设置 legend.maxLines，以向图例添加另一行：
var data = google.visualization.arrayToDataTable([
['Quarks', 'Leptons', 'Gauge Bosons', 'Scalar Bosons'],
[2/3, -1, 0, 0],
[2/3, -1, 0, null],
[2/3, -1, 0, null],
[-1/3, 0, 1, null],
[-1/3, 0, -1, null],
[-1/3, 0, null, null],
[-1/3, 0, null, null]
]);
var options = {
title: 'Charges of subatomic particles',
legend: { position: 'top', maxLines: 2 },
colors: ['#5C3292', '#1A8763', '#871B47', '#999999'],
interpolateNulls: false,
};
正在加载
google.charts.load 软件包名称为 "corechart"。
google.charts.load("current", {packages: ["corechart"]});
该可视化图表的类名称为 google.visualization.Histogram：
var visualization = new google.visualization.Histogram(container);
数据格式
填充直方图数据表有两种方法。如果只有一个系列：
var data = google.visualization.arrayToDataTable([
['Name', 'Number'],
['Name 1', number1],
['Name 2', number2],
['Name 3', number3],
...
]);
...如果有多个系列：
var data = google.visualization.arrayToDataTable([
['Series Name 1', 'Series Name 2', 'Series Name 3', ...],
[series1_number1, series2_number1, series3_number1, ...],
[series1_number2, series2_number2, series3_number2, ...],
[series1_number3, series2_number3, series3_number3, ...],
...
]);
直方图目前不支持可选的列角色。
配置选项
| 名称 | |
|---|---|
| animation.duration |
动画的时长（以毫秒为单位）。如需了解详情，请参阅动画文档。 类型：数字
默认值：0
|
| animation.easing |
应用于动画的加/减速函数。提供的选项如下：
类型：字符串
默认值：“线性”
|
| animation.startup |
确定图表是否在首次绘制时呈现动画效果。如果为 类型：布尔值
默认值 false
|
| axisTitlesPosition |
轴标题的放置位置（相对于图表区域）。支持的值：
类型：字符串
默认值：“out”
|
| backgroundColor |
图表主要区域的背景颜色。可以是简单的 HTML 颜色字符串（例如 类型：字符串或对象
默认：“white”
|
| backgroundColor.stroke |
图表边框的颜色，以 HTML 颜色字符串表示。 类型：字符串
默认：“#666”
|
| backgroundColor.strokeWidth |
边框宽度（以像素为单位）。 类型：数字
默认值：0
|
| backgroundColor.fill |
图表的填充颜色，采用 HTML 颜色字符串的形式。 类型：字符串
默认：“white”
|
| bar.groupWidth |
一组条形的宽度，可采用以下任一格式指定：
类型：数字或字符串
默认值：黄金比例，约为“61.8%”。
|
| chartArea |
一个对象，其中包含用于配置图表区域（绘制图表本身，不包括轴和图例）的位置和大小的成员。支持两种格式：数字或数字后跟 %。简单数字是以像素为单位的值；数字后跟 % 表示百分比。示例： 类型：object
默认值：null
|
| chartArea.backgroundColor |
图表区域背景颜色。使用字符串时，它可以是十六进制字符串（例如，'#fdc') 或英文颜色名称。使用对象时，可以提供以下属性：
类型：字符串或对象
默认：“white”
|
| chartArea.left |
从左侧边框绘制图表的距离。 类型：数字或字符串
默认：auto
|
| chartArea.top |
从顶部边框绘制图表的距离。 类型：数字或字符串
默认：auto
|
| chartArea.width |
图表区域宽度。 类型：数字或字符串
默认：auto
|
| chartArea.height |
图表区域高度。 类型：数字或字符串
默认：auto
|
| 颜色 |
用于图表元素的颜色。字符串数组，其中每个元素都是一个 HTML 颜色字符串，例如： 类型：字符串数组
默认：默认颜色
|
| dataOpacity |
数据点的透明度，1.0 表示完全不透明，0.0 表示完全透明。 在散点图、直方图、条形图和柱形图中，这指的是可见数据：散点图中的点和矩形中的矩形。在选择数据会创建一个点的图表（如折线图和面积图）中，是指在光标悬停或选择时显示的圆形。组合图表展示了这两种行为，此选项对其他图表没有影响。（如需更改趋势线的不透明度，请参阅 趋势线不透明度 。） 类型：数字
默认值：1.0
|
| enableInteractivity |
图表是抛出基于用户的事件，还是对用户互动做出响应。如果为 false，则图表不会抛出“select”或其他基于互动的事件（但会抛出 ready 事件或 error 事件），也不会显示悬停文本或根据用户输入进行其他更改。 类型：布尔值
默认值：true
|
| focusTarget |
鼠标悬停时获得焦点的实体的类型。还会影响鼠标点击选择哪个实体，以及哪个数据表元素与事件相关联。可以是下列选项之一：
在 focusTarget“category”中，提示会显示所有类别值。这对于比较不同系列的值可能很有用。 类型：字符串
默认：“datum”
|
| fontSize |
图表中所有文字的默认字体大小（以像素为单位）。您可以使用特定图表元素的属性替换此设置。 类型：数字
默认：自动
|
| fontName |
图表中所有文字的默认字体。您可以使用特定图表元素的属性替换此设置。 类型：字符串
默认：“Arial”
|
| forceIFrame |
在内嵌框架内绘制图表。（请注意，在 IE8 上，此选项会被忽略；所有 IE8 图表都是在 iframe 中绘制的。） 类型：布尔值
默认值：false
|
| hAxis |
包含成员（用于配置各种横轴元素）的对象。如需指定此对象的属性，您可以使用对象字面量表示法，如下所示：
{
title: 'Hello',
titleTextStyle: {
color: '#FF0000'
}
}
类型：object
默认值：null
|
| hAxis.gridlines |
一个对象，包含用于配置横轴上的网格线的属性。 请注意，横轴网格线是垂直绘制的。要指定此对象的属性，您可以使用对象字面量表示法，如下所示： {color: '#333', minSpacing: 20}
类型：object
默认值：null
|
| hAxis.gridlines.color |
图表区域内水平网格线的颜色。请指定有效的 HTML 颜色字符串。 类型：字符串
默认：“#CCC”
|
| hAxis.gridlines.count |
图表区域内水平网格线的大致数量。
如果您为 类型：数字
默认值：-1
|
| hAxis.gridlines.interval |
相邻网格线之间的大小数组（以数据值形式，而不是像素）。此选项目前仅适用于数字轴，但与仅用于日期和时间的 类型：介于 1 到 10 之间的数字（不包括 10）。
默认值：计算
|
| hAxis.gridlines.minSpacing |
hA 轴主网格线之间的最小屏幕空间（以像素为单位）。
主要网格线的默认值是 类型：数字
默认值：计算
|
| hAxis.gridlines.multiple |
所有网格线和刻度线值都必须是此选项值的倍数。请注意，与间隔不同，不考虑倍数的 10 倍幂。
因此，您可以通过指定 类型：数字
默认值：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.interval |
smallGridlines.interval 选项与主网格线间隔选项类似，但所选间隔将始终是主网格间隔的偶除数。
线性刻度的默认间隔为 类型：数字
默认值：1
|
| hAxis.minorGridlines.minSpacing |
相邻的次要网格线之间以及次要网格线和主要网格线之间所需的最小空间（以像素为单位）。线性刻度的默认值为主网格线的 minSpacing 的 1/2，对数刻度的 minSpacing 为 1/5。 类型：数字
默认值：computed
|
| hAxis.minorGridlines.multiple |
与主要 类型：数字
默认值：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.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.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.allowContainerBoundaryTextCutoff |
如果为 false，将隐藏最外层的标签，而不是允许图表容器剪裁它们。如果为 true，将允许剪裁标签。 类型：布尔值
默认值：false
|
| hAxis.slantedText |
如果为 true，请以某个角度绘制横轴文本，以帮助沿着轴显示更多文本；如果为 false，则垂直绘制横轴文本。默认行为是倾斜文本（如果在竖直绘制时无法完全填满文本）。请注意，仅当 类型：布尔值
默认：自动
|
| hAxis.slantedTextAngle |
横轴文本的角度（如果文本为倾斜绘制）。如果 类型：数字、-90—90
默认值：30
|
| hAxis.maxAlternation |
横轴文本的级别数上限。如果轴的文本标签变得太拥挤，服务器可能会上下移动相邻标签，以使标签更靠近。此值可指定最多使用的楼层数；如果标签可以放得不重叠，服务器可以使用较少的楼层。对于日期和时间，默认值为 1。 类型：数字
默认值：2
|
| hAxis.maxTextLines |
文本标签允许的行数上限。如果标签太长，标签可以跨多行，并且行数默认受可用空间高度的限制。 类型：数字
默认：auto
|
| hAxis.minTextSpacing |
两个相邻文本标签之间的最小水平间距（以像素为单位）。如果标签的间距过密或过长，则间距可能会降至此阈值以下，在这种情况下，系统将采用一种标签整洁措施（例如，截断标签或丢弃部分标签）。 类型：数字
默认值：
hAxis.textStyle.fontSize 的值 |
| hAxis.showTextEvery |
要显示的横轴标签数量，其中 1 表示显示每个标签，2 表示显示其他所有标签，以此类推。默认设置为尝试显示尽可能多的标签，而不重叠。 类型：数字
默认：自动
|
| hAxis.viewWindowMode |
指定如何缩放横轴以在图表区域内渲染值。支持以下字符串值：
类型：字符串
默认值：相当于“pretty”，但如果使用，则
haxis.viewWindow.min 和 haxis.viewWindow.max 优先。
|
| hAxis.viewWindow |
指定横轴的剪裁范围。 类型：object
默认值：null
|
| hAxis.viewWindow.max |
剪裁窗口结束位置的行索引（从零开始）。此索引及更高索引处的数据点将被剪裁掉。与 当 类型：数字
默认：auto
|
| hAxis.viewWindow.min |
从零开始的行索引，剪裁窗口开始的位置。索引值低于此值的数据点将被剪裁掉。与 当 类型：数字
默认：auto
|
| histogram.bucketSize |
对每个直方图条形的大小进行硬编码，而不是让算法确定大小。 类型：数字
默认：auto
|
| histogram.hideBucketItems |
省略直方图各块之间的细分线，使其变为一系列实心条。 类型：布尔值
默认值：false
|
| histogram.lastBucketPercentile |
计算直方图的分桶大小时，忽略顶部和底部 类型：数字
默认值：0
|
| histogram.minValue |
扩展分桶范围以包含此值。 类型：数字
默认：自动 - 使用最低流量
|
| histogram.maxValue |
扩展分桶范围以包含此值。 类型：数字
默认：自动 - 使用数据流量上限
|
| histogram.numBucketsRule |
如何计算默认存储分区数。可能的值包括：
类型：字符串
默认值：
'sqrt' |
| 高度 |
图表的高度（以像素为单位）。 类型：数字
默认值：所包含元素的高度
|
| interpolateNulls |
是否猜测缺失点的值。如果为 true，它将根据相邻点猜测任何缺失数据的值。如果为 false，则会在未知点在线条上留出一个换行符。
带有 类型：布尔值
默认值：false
|
| isStacked |
如果设置为 true，则在每个域值处堆叠所有系列的元素。 注意：在列、面积和 SteppedArea 图表中，Google 图表会颠倒图例项的顺序，以便更好地与系列元素的堆叠对应（例如，系列 0 将是最底部的图例项）。此 不适用于 条形图。
对于 100% 堆叠，为每个元素计算出的值将显示在提示中实际值之后。
目标轴默认基于相对的 0-1 刻度刻度值，
100% 堆叠仅支持 类型：布尔值/字符串
默认值：false
|
| 传奇 |
包含成员的对象，用于配置图例的各个方面。要指定此对象的属性，您可以使用对象字面量表示法，如下所示： {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>}
|
| 屏幕方向 |
图表的方向。设置为 类型：字符串
默认：'水平'
|
| 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.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”
|
| vAxes |
如果图表包含多个纵轴，则指定各个纵轴的属性。
每个子对象都是一个
如需指定具有多个纵轴的图表，请先使用
{
series: {
2: {
targetAxisIndex:1
}
},
vAxes: {
1: {
title:'Losses',
textStyle: {color: 'red'}
}
}
}
此属性可以是对象或数组：对象是对象的集合，每个对象都带有一个数字标签，用于指定其定义的轴 - 如上所示的格式；数组是对象数组，每个轴一个。例如，以下数组样式的表示法与上面显示的
vAxes: [
{}, // Nothing specified for axis 0
{
title:'Losses',
textStyle: {color: 'red'} // Axis 1
}
]
类型：对象数组或包含子对象的对象
默认值：null
|
| 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.interval |
相邻网格线之间的大小数组（以数据值形式，而不是像素）。此选项目前仅适用于数字轴，但与仅用于日期和时间的 类型：介于 1 到 10 之间的数字（不包括 10）。
默认值：计算
|
| vAxis.gridlines.minSpacing |
hA 轴主网格线之间的最小屏幕空间（以像素为单位）。
主要网格线的默认值是 类型：数字
默认值：计算
|
| vAxis.gridlines.multiple |
所有网格线和刻度线值都必须是此选项值的倍数。请注意，与间隔不同，不考虑倍数的 10 倍幂。
因此，您可以通过指定 类型：数字
默认值：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.interval |
smallGridlines.interval 选项与主网格线间隔选项类似，但所选间隔将始终是主网格间隔的偶除数。
线性刻度的默认间隔为 类型：数字
默认值：1
|
| vAxis.minorGridlines.minSpacing |
相邻的次要网格线之间以及次要网格线和主要网格线之间所需的最小空间（以像素为单位）。线性刻度的默认值为主网格线的 minSpacing 的 1/2，对数刻度的 minSpacing 为 1/5。 类型：数字
默认值：computed
|
| vAxis.minorGridlines.multiple |
与主要 类型：数字
默认值：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 |
当用户点击视觉实体时触发。如需了解已选择的内容，请调用 属性：无
|
数据政策
所有代码和数据都会在浏览器中处理并呈现。系统不会向任何服务器发送任何数据。