概览
柱形图是在浏览器中使用 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 的声明来控制列外观的多个方面:
color
opacity
fill-color
fill-opacity
stroke-color
stroke-opacity
stroke-width
我们不建议在图表中随意混合样式(选择样式并继续使用),但为了演示所有样式属性,下面是一个采样器:
前两列均使用特定的 color
(第一列使用英语名称,第二列使用 RGB 值)。未选择任何 opacity
,因此系统将使用默认值 1.0(完全不透明);正因如此,第二列会遮住它后面的网格线。在第三列中,使用值为 0.2 的 opacity
,以显示网格线。在第四个示例中,使用三个样式属性: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'] ]);
为列添加标签
图表有多种类型的标签,例如 tick 标签、图例标签和提示中的标签。在本部分中,我们将介绍如何在柱形图中的列内(或附近)放置标签。
假设我们希望使用适当的化学符号为每一列添加注解。我们可以使用 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" 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([ ["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.ColumnChart(document.getElementById("columnchart_values")); chart.draw(view, options); } </script> <div id="columnchart_values" style="width: 900px; height: 300px;"></div>
如果我们想要以其他方式设置值的格式,可以定义格式设置工具并将其封装在函数中,如下所示:
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}, vAxis: {minValue: 0} };
var options_fullStacked = { isStacked: 'percent', height: 300, legend: {position: 'top', maxLines: 3}, vAxis: { minValue: 0, ticks: [0, .3, .6, .9, 1] } };
创建 Material 柱形图
2014 年,Google 公布了相关准则,旨在支持在 Google 平台上运行的各种媒体资源和应用(例如 Android 应用)的通用外观和风格。我们将这项工作称为 Material Design。我们将提供所有核心图表的“Material”版本;如果您喜欢它们的外观,欢迎使用。
创建 Material 柱形图与创建我们现在所说的“经典”柱形图类似。加载 Google 可视化 API(尽管使用 'bar'
软件包,而不是 'corechart'
软件包),定义您的数据表,然后创建对象(但属于 google.charts.Bar
类,而非 google.visualization.ColumnChart
类)。
由于条形图和柱形图基本相同,但对于屏幕方向,因此无论柱形是竖屏(传统柱形图)还是水平条形图(条形图),我们都会同时调用它们。在 Material 中,唯一的区别在于 bars
选项。如果设置为 'horizontal'
,则屏幕方向将类似于传统的经典条形图;否则,竖条将是垂直的。
注意:Material 图表无法在旧版 Internet Explorer 中使用。(IE8 和更早版本不支持 SVG,而 Material Chart 要求使用 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', } }; var chart = new google.charts.Bar(document.getElementById('columnchart_material')); chart.draw(data, google.charts.Bar.convertOptions(options)); } </script> </head> <body> <div id="columnchart_material" style="width: 800px; 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
预设选项。
双 Y 轴图表
有时,您可能需要在柱形图中显示两个系列,有两个独立的 Y 轴:一个系列使用左轴,另一个系列使用右轴:
请注意,我们的两个 y 轴不仅具有不同的解析结果(“parsecs”和“apparent magnitude”),而且它们还具有自己的独立缩放比例和网格。如果要自定义此行为,请使用 vAxis.gridlines
选项。
在下面的代码中,axes
和 series
选项结合使用可指定图表的双重 Y 外观。series
选项指定每个轴使用的轴('distance'
和 'brightness'
;它们不需要与数据表中的列名称有任何关系)。然后,axes
选项可将此图表设为双 Y 轴图表,将 'distance'
轴放在左侧(标记为“解析器”),将 'brightness'
轴放在右侧(标记为“明显量级”)。
<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', 'bar']}); google.charts.setOnLoadCallback(drawStuff); function drawStuff() { var button = document.getElementById('change-chart'); var chartDiv = document.getElementById('chart_div'); var data = 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 materialOptions = { width: 900, chart: { title: 'Nearby galaxies', subtitle: 'distance on the left, brightness on the right' }, series: { 0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'. 1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'. }, axes: { y: { distance: {label: 'parsecs'}, // Left y-axis. brightness: {side: 'right', label: 'apparent magnitude'} // Right y-axis. } } }; var classicOptions = { width: 900, series: { 0: {targetAxisIndex: 0}, 1: {targetAxisIndex: 1} }, title: 'Nearby galaxies - distance on the left, brightness on the right', vAxes: { // Adds titles to each axis. 0: {title: 'parsecs'}, 1: {title: 'apparent magnitude'} } }; function drawMaterialChart() { var materialChart = new google.charts.Bar(chartDiv); materialChart.draw(data, google.charts.Bar.convertOptions(materialOptions)); button.innerText = 'Change to Classic'; button.onclick = drawClassicChart; } function drawClassicChart() { var classicChart = new google.visualization.ColumnChart(chartDiv); classicChart.draw(data, classicOptions); button.innerText = 'Change to Material'; button.onclick = drawMaterialChart; } drawMaterialChart(); }; </script> </head> <body> <button id="change-chart">Change to Classic</button> <br><br> <div id="chart_div" style="width: 800px; height: 500px;"></div> </body> </html>
热门 X 图
注意:顶部 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([ ['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 = { width: 800, legend: { position: 'none' }, chart: { title: 'Chess opening moves', subtitle: 'popularity by percentage' }, axes: { x: { 0: { side: 'top', label: 'White to move'} // Top x-axis. } }, bar: { groupWidth: "90%" } }; var chart = new google.charts.Bar(document.getElementById('top_x_div')); // Convert the Classic options to Material options. chart.draw(data, google.charts.Bar.convertOptions(options)); }; </script> </head> <body> <div id="top_x_div" style="width: 800px; height: 600px;"></div> </body> </html>
正在加载
google.charts.load
软件包名称为 "corechart"
。可视化图表的类名称为 google.visualization.ColumnChart
。
google.charts.load("current", {packages: ["corechart"]});
var visualization = new google.visualization.ColumnChart(container);
对于 Material 柱形图,google.charts.load
软件包名称为 "bar"
。(错别字:Material 条形图可处理两个方向。)
可视化图表的类名称为 google.charts.Bar
。(错别字:Material 条形图可处理两种方向。)
google.charts.load("current", {packages: ["bar"]});
var chart = new google.charts.Bar(container);
数据格式
表中的每一行代表一组相邻的条形。
行:表格中的每一行代表一组条形。
列:
第 0 列 | 第 1 列 | …… | 列 N | |
---|---|---|---|---|
目的: | 此群组中的条形 1 值 | …… | 此群组中的 N 值 | |
数据类型: |
|
number | …… | number |
角色: | 域 | 数据 | …… | 数据 |
可选的列角色: | …… |
配置选项
名称 | |
---|---|
动画时长 |
动画的时长(以毫秒为单位)。如需了解详情,请参阅动画文档。 类型:数字
默认:0
|
动画缓和 |
已应用于动画的加/减速函数。提供的选项如下:
类型:字符串
默认:“线性”
|
animation.startup |
确定图表是否会在初始绘制时以动画形式呈现。如果为 类型:布尔值
默认 false
|
始终在注解外 |
在条形图和柱形图中,如果设置为 类型:布尔值
默认:false
|
注解.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 } } } }; 目前,面积图、条形图、柱形图、组合图、折线图和散点图均支持此选项。注释图表不支持此图表。 Type:对象
默认:null
|
注解.datum |
对于支持注解的图表,您可以通过
annotations.datum 对象替换 Google 图表为个别数据元素提供的注解(例如条形图中每个条形显示的值)的选择。您可以使用 annotations.datum.stem.color 控制颜色,使用 annotations.datum.stem.length 来控制柄部长度,并使用 annotations.datum.style 控制样式。
Type:对象
默认:颜色为“黑色”;长度为 12;样式为“点”。
|
注释域 |
对于支持注释的图表,您可以通过
annotations.domain 对象替换 Google 图表为网域提供的注释(即图表的长轴,例如典型折线图中的 X 轴)。您可以使用 annotations.domain.stem.color 控制颜色,使用 annotations.domain.stem.length 来控制柄部长度,并使用 annotations.domain.style 控制样式。
Type:对象
默认:颜色为“黑色”;长度为 5;样式为“点”。
|
高对比度 |
对于支持注解的图表,您可以通过
annotations.highContrast 布尔值覆盖 Google 图表选择的注解颜色。默认情况下,annotations.highContrast 为 true,这会使图表选择对比度较高的注释颜色:深色背景上的浅色和浅色的深色。如果您将 annotations.highContrast 设置为 false,且未指定自己的注释颜色,则 Google 图表将对注释使用默认系列颜色:类型:布尔值
默认:true
|
注解.stem |
对于支持注解的图表,您可以使用
annotations.stem 对象来替换 Google 图表针对主干样式的选择。您可以使用 annotations.stem.color 控制颜色,并使用 annotations.stem.length 控制柄部长度。请注意,词干长度选项对样式为 'line' 的注解没有任何影响:对于 'line' 基准注解,词干长度始终与文本相同,对于 'line' 域注解,词干长度会延伸到整个图表上。
Type:对象
默认:颜色为“黑色”;网域注释的长度为 5,数据注释的长度为 12。
|
注解样式 |
类型:字符串
默认值:“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 } } }; 目前,面积图、条形图、柱形图、组合图、折线图和散点图均支持此选项。 注释图表不支持此注释。 Type:对象
默认:null
|
坐标轴位置 |
相较于图表区域,轴标题的放置位置。支持的值:
类型:字符串
默认:使用“out”
|
backgroundColor |
图表主区域的背景颜色。可以是简单的 HTML 颜色字符串(例如 类型:字符串或对象
默认:“白色”
|
backgroundColor.stroke 中 |
图表边框的颜色,采用 HTML 颜色字符串的形式。 类型:字符串
默认:'#666'
|
backgroundColor.strokeWidth |
边框宽度(以像素为单位)。 类型:数字
默认:0
|
backgroundColor.fill |
图表的填充颜色,以 HTML 颜色字符串表示。 类型:字符串
默认:“白色”
|
bar.groupWidth |
一组条形的宽度,采用以下任一格式指定:
类型:数字或字符串
默认:黄金比例,约为“61.8%”。
|
酒吧 |
Material 条形图中的条形是竖向还是水平。此选项对传统条形图或传统柱形图没有影响。 类型:“horizontal”或“vertical”
默认:垂直
|
图表区域 |
一个具有成员的对象,用于配置图表区域的位置和大小(绘制图表本身时,不包括轴和图例)。支持两种格式:数字或后跟 % 的数字。简单的数字是一个以像素为单位的值,数字后跟 % 是一个百分比。示例: Type:对象
默认:null
|
chartArea.backgroundColor |
图表区域背景颜色。使用字符串时,它可以是十六进制字符串(例如,“#fdc”)或英语颜色名称。使用对象时,可以提供以下属性:
类型:字符串或对象
默认:“白色”
|
图表区域 |
从左边框绘制图表的距离。 类型:数字或字符串
默认:自动
|
图表区域 |
从上边框绘制图表的距离。 类型:数字或字符串
默认:自动
|
图表区域.宽度 |
图表区域宽度。 类型:数字或字符串
默认:自动
|
图表.a.height |
图表区域高度。 类型:数字或字符串
默认:自动
|
副标题 |
对于 Material 图表,此选项用于指定副标题。只有 Material 图表支持字幕。 类型:字符串
默认:null
|
图表标题 |
对于 Material 图表,此选项指定标题。 类型:字符串
默认:null
|
颜色 |
用于图表元素的颜色。字符串数组,其中每个元素都是一个 HTML 颜色字符串,例如: 类型:字符串数组
默认:默认颜色
|
dataOpacity |
数据点的透明度,1.0 表示完全不透明,0.0 表示完全透明。在散点图、直方图、条形图和柱形图中,这指的是可见数据:散点图中的点和另一些视图中的矩形。在选择数据创建点(例如折线图和面积图)的图表中,这指的是悬停或选择时出现的圆形。组合图表同时显示了这两种行为,而且此选项对其他图表没有影响。(要更改趋势线的不透明度,请参阅趋势线的不透明度)。 类型:数字
默认:1.0
|
启用互动 |
图表是抛出基于用户的事件还是响应用户互动。如果设为 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
|
focusTarget |
悬停鼠标时获得焦点的实体的类型。此外,还会影响点击鼠标时选择的实体,以及与事件相关联的数据表元素。可以是以下某一项:
在 focusTarget 'category' 中,提示显示所有类别值。这可用于比较不同系列的值。 类型:字符串
默认:'datum'
|
字体大小 |
图表中所有文字的默认字体大小(以像素为单位)。您可以使用特定图表元素的属性来替换此设置。 类型:数字
默认:自动
|
字体名称 |
图表中所有文本的默认字体。您可以使用特定图表元素的属性来替换此设置。 类型:字符串
默认:“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,
对于日期轴标签,这是日期格式 ICU 模式集的子集。例如, 应用于标签的实际格式来自加载 API 时使用的语言区域。如需了解详情,请参阅加载包含特定语言区域的图表。
在计算刻度线值和网格线时,系统将考虑所有相关网格选项的若干备选组合,如果带格式的对勾标记被复制或重叠,则替代项将被拒绝。因此,如果您只想显示整数刻度值,则可以指定
只有 类型:字符串
默认:自动
|
hAxis.gridlines |
一个用于配置横轴网格线的属性。 请注意,横轴网格线是垂直绘制的。如需指定此对象的属性,您可以使用对象字面量表示法,如下所示: {color: '#333', minSpacing: 20}
只有 Type:对象
默认:null
|
hAxis.gridlines.color |
图表区域内水平网格线的颜色。请指定有效的 HTML 颜色字符串。 类型:字符串
默认:“#CCC”
|
hAxis.gridlines.count |
图表区域内水平网格线的大致数量。如果为 类型:数字
默认:-1
|
hAxis.gridlines.interval |
相邻网格线之间的大小数组(以数据值而非像素表示)。此选项目前仅适用于数字轴,但类似于仅用于日期和时间的 类型:介于 1 到 10 之间的数字,不包括 10。
默认:计算出的值
|
hAxis.gridlines.minSpacing |
hAxis 主网格线之间的最小屏幕空间(以像素为单位)。
主要网格的默认值是 类型:数字
默认:计算出的值
|
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*/]}, } } 如需了解详情,请参阅日期和时间。 Type:对象
默认:null
|
hAxis.minorGridline |
包含用于配置横轴上的次要网格线的对象,与 hAxis.gridlines 选项类似。
只有 Type:对象
默认:null
|
hAxis.minorGridlines.color |
图表区域内水平次要网格线的颜色。请指定有效的 HTML 颜色字符串。 类型:字符串
默认:网格线和背景颜色的混合
|
hAxis.minorGridlines.count |
除了通过将计数设为 0 来停用次要网格外, 类型:数字
默认:1
|
hAxis.minorGridlines.interval |
minGridlines.interval 选项与主网格线选项类似,但所选间隔将始终是主网格线的偶数除数。
线性缩放的默认间隔为 类型:数字
默认:1
|
hAxis.minorGridlines.minSpacing |
相邻的次要网格线之间以及次要网格和主要网格线之间所需的最小空间(以像素为单位)。对于线性比例,默认值是主要网格的 1/2;对于日志比例,最小值为 1/5 的 minSpacing。 类型:数字
默认:计算出
|
hAxis.minorGridlines.multiple |
与主要 类型:数字
默认: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.allowContainerBoundaryTextCutoff |
如果为 false,则将隐藏最外层的标签,而不是允许图表容器剪裁它们。如果为 true,将允许剪裁标签。 只有 类型:布尔值
默认:false
|
hAxis.slantedText |
如果为 true,请以某个角度绘制横轴文本,以帮助沿轴放置更多文本;如果为 false,则垂直绘制横轴文本。默认行为是,如果直立绘制时无法使文本完全适合文本,则将其倾斜。请注意,仅当 类型:布尔值
默认:自动
|
hAxis.slantedTextAngle |
横轴文本的角度(如果绘制为斜面)。如果 类型:数字,-90-90
默认:30 个
|
hAxis.maxAlternation |
水平轴文本的层级数上限。如果轴文本标签太拥挤,服务器可能会上移或下移相邻标签,以使标签更靠近。此值用于指定要使用的最多层数;如果标签可以拟合而不会重叠,服务器可以使用的层数会更少。对于日期和时间,默认值为 1。 类型:数字
默认:2
|
hAxis.maxTextLines |
文本标签允许的行数上限。如果标签过长,则标签可以占据多行,并且默认情况下,行数受可用空间的高度限制。 类型:数字
默认:自动
|
hAxis.minTextSpacing |
两个相邻文本标签之间允许的最小水平间距(以像素为单位)。如果标签间隔太密集或标签过长,间距可能会降至此阈值以下,并且在这种情况下,系统会应用其中一个标签简洁性指标(例如截断标签或丢弃一些标签)。 类型:数字
默认:
hAxis.textStyle.fontSize 的值 |
hAxis.showTextEvery |
要显示的横轴标签数量,其中 1 表示显示每个标签,2 表示显示其他标签,以此类推。默认设置为尝试在不重叠的情况下尽可能多显示标签。 类型:数字
默认:自动
|
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 |
当 类型:数字
默认:自动
|
高度 |
图表的高度(以像素为单位)。 类型:数字
默认:包含元素的高度
|
堆叠 |
如果设置为 true,则在每个网域值上堆叠所有系列的元素。注意:在 Column、Area 和 SteppedArea 图表中,Google 图表会颠倒图例项的顺序,以便更好地与堆叠系列元素的堆叠方式保持一致(例如,Series 0 将是最底层的图例项)。此要求不适用于条形图。
对于 100% 堆叠,每个元素的计算值将显示在实际值之后的提示中。
对于
100% 堆叠仅支持 类型:布尔值/字符串
默认:false
|
传奇 |
包含用于配置图例各个方面的成员的对象。如需指定此对象的属性,您可以使用对象字面量表示法,如下所示: {position: 'top', textStyle: {color: 'blue', fontSize: 16}} Type:对象
默认:null
|
图例页 |
选择的初始页面索引(从零开始)。 类型:数字
默认:0
|
图例位置 |
图例的位置。可以是下列选项之一:
类型:字符串
默认:“right”
|
图例匹配 |
图例的对齐方式。可以是下列选项之一:
起点、中心和终点相对于图例的样式(垂直或水平)。例如,在“right”图例中,“start”和“end”分别位于顶部和底部;对于“top”图例,“start”和“end”分别位于该区域的左侧和右侧。 默认值取决于图例的位置。对于“底部”图例,默认值为“居中”;其他图例默认为“开始”。 类型:字符串
默认:自动
|
图例样式 |
用于指定图例文本样式的对象。此对象的格式如下: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Type:对象
默认:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
屏幕方向 |
图表的方向。如果设置为 类型:字符串
默认:“横向”
|
反向类别 |
如果设置为 true,则会从右向左绘制系列。默认是从左向右绘制。 类型:布尔值
默认:false
|
series |
对象的数组,其中每个对象描述图表中相应系列的格式。如需为系列使用默认值,请指定空对象 {}。如果未指定系列或值,将使用全局值。每个对象支持以下属性:
您可以指定对象数组,每个对象按给定顺序应用于数据系列,也可以指定一个对象,其中每个子项都有一个指示其所适用的数据系列的数字键。例如,以下两个声明是相同的,并将第一个系列声明为黑色且未显示在图例中,第四个声明为红色且未显示在图例中: series: [ {color: 'black', visibleInLegend: false}, {}, {}, {color: 'red', visibleInLegend: false} ] series: { 0:{color: 'black', visibleInLegend: false}, 3:{color: 'red', visibleInLegend: false} } 类型:对象数组或包含嵌套对象的对象
默认:{}
|
主题 |
主题是一组预定义的选项值,共同发挥作用以实现特定的图表行为或视觉效果。目前只提供一个主题:
类型:字符串
默认: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.ignoreBounds |
如果设置为 注意:这仅适用于 HTML 提示。如果使用 SVG 工具提示启用此功能,则图表边界以外的任何溢出都将被剪裁。如需了解详情,请参阅自定义提示内容。 类型:布尔值
默认:false
|
hint.isHTML |
如果设置为 true,则使用 HTML 呈现(而不是 SVG 渲染)的提示。如需了解详情,请参阅自定义提示内容。 注意:气泡图可视化图表不支持通过提示列数据角色自定义 HTML 提示内容。 类型:布尔值
默认:false
|
tooltip.showColorCode |
如果为 true,则在提示中的系列信息旁边显示彩色方块。当 类型:布尔值
默认:自动
|
提示文本 |
用于指定提示文本样式的对象。此对象的格式如下: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Type:对象
默认:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
tooltip.trigger |
使提示显示的用户交互:
类型:字符串
默认:焦点
|
趋势线 |
在支持趋势线的图表上显示趋势线。默认使用线性趋势线,但您可以使用
趋势线是按系列指定的,因此大多数情况下您的选项如下所示: var options = { trendlines: { 0: { type: 'linear', color: 'green', lineWidth: 3, opacity: 0.3, showR2: true, visibleInLegend: true } } } Type:对象
默认:null
|
趋势线.颜色 |
趋势线的颜色,表示为英语颜色名称或十六进制字符串。 类型:字符串
默认:默认系列颜色
|
趋势线 |
对于 类型:数字
默认:3
|
趋势线.n.labelInLegend |
设置后,趋势线会在图例中显示为此字符串。 类型:字符串
默认:null
|
趋势线.n.lineWidth |
趋势线的线宽(以像素为单位)。 类型:数字
默认:2
|
趋势线.不透明度 |
趋势线的透明度,范围为 0.0(透明)到 1.0(不透明)。 类型:数字
默认:1.0
|
趋势线.n 点大小 |
趋势线通过在图表上标出多个点来构造;借助这个很少用到的选项,您可以自定义点的大小。通常情况下,最好选择趋势线的 类型:数字
默认:1
|
趋势线.显示状态 |
趋势线是通过在图表上盖住多个点构成的。趋势线的 类型:布尔值
默认:true
|
趋势线.showR2 |
是否在图例或趋势线提示中显示决定系数。 类型:布尔值
默认:false
|
趋势线.类型 |
趋势线是 类型:字符串
默认:线性
|
Trendslines.n.visibleInLegend |
趋势线方程式是否出现在图例中。(它会出现在趋势线提示中)。 类型:布尔值
默认:false
|
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
|
轴 |
包含用于配置各种纵轴元素的成员。如需指定此对象的属性,您可以使用对象字面量表示法,如下所示: {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.interval |
相邻网格线之间的大小数组(以数据值而非像素表示)。此选项目前仅适用于数字轴,但类似于仅用于日期和时间的 类型:介于 1 到 10 之间的数字,不包括 10。
默认:计算出的值
|
vAxis.gridlines.minSpacing |
hAxis 主网格线之间的最小屏幕空间(以像素为单位)。
主要网格的默认值是 类型:数字
默认:计算出的值
|
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*/]} } } 如需了解详情,请参阅日期和时间。 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.interval |
minGridlines.interval 选项与主网格线选项类似,但所选间隔将始终是主网格线的偶数除数。
线性缩放的默认间隔为 类型:数字
默认:1
|
vAxis.minorGridlines.minSpacing |
相邻的次要网格线之间以及次要网格和主要网格线之间所需的最小空间(以像素为单位)。对于线性比例,默认值是主要网格的 1/2;对于日志比例,最小值为 1/5 的 minSpacing。 类型:数字
默认:计算出
|
vAxis.minorGridlines.multiple |
与主要 类型:数字
默认: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() |
返回一组选定图表实体。
可选择的实体包括条形、图例条目和类别。
柱形对应于数据表中的单元格、列的图例条目(行索引为 null),以及行的类别(列索引为 null)。
在此图表中,在任何时候都只能选择一个实体。
返回值类型:一组选择元素
|
getVAxisValue(yPosition, optional_axis_index) |
返回 示例: 在绘制图表之后调用此方法。 返回值类型:数字
|
getXLocation(dataValue, optional_axis_index) |
返回 示例: 在绘制图表之后调用此方法。 返回值类型:数字
|
getYLocation(dataValue, optional_axis_index) |
返回 示例: 在绘制图表之后调用此方法。 返回值类型:数字
|
removeAction(actionID) |
从图表中移除所请求的 返回值类型:
none |
setAction(action) |
设置要在用户点击操作文本时执行的提示操作。
所有提示提示操作均应在调用图表的 返回值类型:
none |
setSelection() |
选择指定的图表实体。取消之前选择的所有内容。
可选择的实体包括条形、图例条目和类别。
柱形对应于数据表中的单元格、列的图例条目(行索引为 null),以及行的类别(列索引为 null)。
对于此图表,一次只能选择一个实体。
返回值类型:无
|
clearChart() |
清除该图表,并释放其分配的所有资源。 返回值类型:无
|
事件
如需详细了解如何使用这些事件,请参阅基本互动、处理事件和触发事件。
名称 | |
---|---|
animationfinish |
在过渡动画播放完毕时触发。 属性:无
|
click |
在用户点击图表内时触发。可用于识别标题、数据元素、图例条目、轴、网格线或标签何时得到点击。 属性:targetID
|
error |
尝试渲染图表出错时触发。 属性:ID、消息
|
legendpagination |
在用户点击图例分页箭头时触发。传回当前图例中从零开始的页面索引和总页数。 属性:currentPageIndex、totalPages
|
onmouseover |
用户将鼠标放在视觉实体上时触发。传递相应数据表元素的行索引和列索引。 属性:行、列
|
onmouseout |
在用户离开可见实体时触发。传递相应数据表元素的行索引和列索引。 属性:行、列
|
ready |
此图表已准备好进行外部方法调用。如果您想与图表交互,并在绘制后调用方法,则应在调用 属性:无
|
select |
在用户点击视觉实体时触发。如需了解所选内容,请调用 属性:无
|
数据政策
所有代码和数据都会在浏览器中进行处理和呈现。不会向任何服务器发送数据。