概览
使用 SVG 或 VML 在浏览器中渲染的折线图。将鼠标悬停在各个点上时,系统会显示提示。
示例
曲线
您可以通过将 curveType
选项设置为 function
来使线条平滑:
用于生成此图表的代码如下所示。请注意 curveType: function
选项的用法:
<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([ ['Year', 'Sales', 'Expenses'], ['2004', 1000, 400], ['2005', 1170, 460], ['2006', 660, 1120], ['2007', 1030, 540] ]); var options = { title: 'Company Performance', curveType: 'function', legend: { position: 'bottom' } }; var chart = new google.visualization.LineChart(document.getElementById('curve_chart')); chart.draw(data, options); } </script> </head> <body> <div id="curve_chart" style="width: 900px; height: 500px"></div> </body> </html>
创建 Material 折线图
2014 年,Google 公布了相关准则,旨在支持在 Google 平台上运行的各种媒体资源和应用(例如 Android 应用)的通用外观和风格。我们将这项工作称为 Material Design。我们将提供所有核心图表的“Material”版本;如果您喜欢它们的外观,欢迎您使用它们。
创建 Material 折线图与创建现在称为“传统”的折线图类似。
加载 Google 可视化 API(尽管使用 'line'
软件包,而不是 'corechart'
软件包),定义您的数据表,然后创建对象(但属于 google.charts.Line
类,而非 google.visualization.LineChart
类)。
注意:Material 图表无法在旧版 Internet Explorer 中使用。(IE8 及更低版本不支持 SVG,而 Material Chart 要求使用 SVG)。
与传统折线图相比,Material 折线图有许多细微的改进,其中包括改进的调色板、圆角、标签格式更清晰、系列之间的默认间距更紧凑、网格线和标题更柔和(以及添加字幕)。
google.charts.load('current', {'packages':['line']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('number', 'Day'); data.addColumn('number', 'Guardians of the Galaxy'); data.addColumn('number', 'The Avengers'); data.addColumn('number', 'Transformers: Age of Extinction'); data.addRows([ [1, 37.8, 80.8, 41.8], [2, 30.9, 69.5, 32.4], [3, 25.4, 57, 25.7], [4, 11.7, 18.8, 10.5], [5, 11.9, 17.6, 10.4], [6, 8.8, 13.6, 7.7], [7, 7.6, 12.3, 9.6], [8, 12.3, 29.2, 10.6], [9, 16.9, 42.9, 14.8], [10, 12.8, 30.9, 11.6], [11, 5.3, 7.9, 4.7], [12, 6.6, 8.4, 5.2], [13, 4.8, 6.3, 3.6], [14, 4.2, 6.2, 3.4] ]); var options = { chart: { title: 'Box Office Earnings in First Two Weeks of Opening', subtitle: 'in millions of dollars (USD)' }, width: 900, height: 500 }; var chart = new google.charts.Line(document.getElementById('linechart_material')); chart.draw(data, google.charts.Line.convertOptions(options)); }
Material 图表目前处于 Beta 版阶段。其外观和互动在很大程度上是最终的,但传统图表中的许多选项尚未提供。您可以在此问题中找到尚不支持的选项列表。
此外,声明选项的方式尚未最终确定,因此如果您使用的是任何传统选项,则必须将其替换为 Material 选项,具体方法是替换以下代码行:
chart.draw(data, options);
...替换为:
chart.draw(data, google.charts.Line.convertOptions(options));
双 Y 轴图表
有时,您可能需要在折线图中显示两个系列,并拥有两个独立的 y 轴:一个系列使用左轴,另一个系列使用右轴:
请注意,我们的两个 Y 轴不仅具有不同的“温度”(Temps) 标签,还有“光照”(Daylight) 标签,并且它们还具有自己的独立标度和网格线。如果要自定义此行为,请使用 vAxis.gridlines
和 vAxis.viewWindow
选项。
在下面的 Material 代码中,axes
和 series
选项共同指定了图表的双重 Y 外观。series
选项指定每个坐标轴使用的轴('Temps'
和 'Daylight'
;它们不需要与数据表中的列名称有任何关系)。然后,axes
选项将此图表设为双 Y 轴图表,将 'Temps'
轴放在左侧,'Daylight'
轴放在右侧。
在传统代码中,这略有不同。您应使用 vAxes
选项(在水平方向的图表中使用 hAxes
),而非 axes
选项。此外,您无需使用名称,而是使用索引编号和 targetAxisIndex
选项来使用轴协调系列。
var materialOptions = { chart: { title: 'Average Temperatures and Daylight in Iceland Throughout the Year' }, width: 900, height: 500, series: { // Gives each series an axis name that matches the Y-axis below. 0: {axis: 'Temps'}, 1: {axis: 'Daylight'} }, axes: { // Adds labels to each axis; they don't have to match the axis names. y: { Temps: {label: 'Temps (Celsius)'}, Daylight: {label: 'Daylight'} } } };
var classicOptions = { title: 'Average Temperatures and Daylight in Iceland Throughout the Year', width: 900, height: 500, // Gives each series an axis that matches the vAxes number below. series: { 0: {targetAxisIndex: 0}, 1: {targetAxisIndex: 1} }, vAxes: { // Adds titles to each axis. 0: {title: 'Temps (Celsius)'}, 1: {title: 'Daylight'} }, hAxis: { ticks: [new Date(2014, 0), new Date(2014, 1), new Date(2014, 2), new Date(2014, 3), new Date(2014, 4), new Date(2014, 5), new Date(2014, 6), new Date(2014, 7), new Date(2014, 8), new Date(2014, 9), new Date(2014, 10), new Date(2014, 11) ] }, vAxis: { viewWindow: { max: 30 } } };
X 轴热门图表
注意:顶部 X 轴仅适用于 Material 图表(即带有 line
软件包的图表)。
如果您想将 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':['line']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('number', 'Day'); data.addColumn('number', 'Guardians of the Galaxy'); data.addColumn('number', 'The Avengers'); data.addColumn('number', 'Transformers: Age of Extinction'); data.addRows([ [1, 37.8, 80.8, 41.8], [2, 30.9, 69.5, 32.4], [3, 25.4, 57, 25.7], [4, 11.7, 18.8, 10.5], [5, 11.9, 17.6, 10.4], [6, 8.8, 13.6, 7.7], [7, 7.6, 12.3, 9.6], [8, 12.3, 29.2, 10.6], [9, 16.9, 42.9, 14.8], [10, 12.8, 30.9, 11.6], [11, 5.3, 7.9, 4.7], [12, 6.6, 8.4, 5.2], [13, 4.8, 6.3, 3.6], [14, 4.2, 6.2, 3.4] ]); var options = { chart: { title: 'Box Office Earnings in First Two Weeks of Opening', subtitle: 'in millions of dollars (USD)' }, width: 900, height: 500, axes: { x: { 0: {side: 'top'} } } }; var chart = new google.charts.Line(document.getElementById('line_top_x')); chart.draw(data, google.charts.Line.convertOptions(options)); } </script> </head> <body> <div id="line_top_x"></div> </body> </html>
正在加载
google.charts.load
软件包名称为 "corechart"
,可视化图表的类名称为 google.visualization.LineChart
。
google.charts.load("current", {packages: ["corechart"]});
var visualization = new google.visualization.LineChart(container);
对于 Material 折线图,google.charts.load
软件包名称为 "line"
,而可视化图表的类名称为 google.charts.Line
。
google.charts.load("current", {packages: ["line"]});
var visualization = new google.charts.Line(container);
数据格式
行:表中的每一行表示一组具有相同 x 轴位置的数据点。
列:
第 0 列 | 第 1 列 | …… | 列 N | |
---|---|---|---|---|
目的: | 第 1 行的值 | …… | 第 N 行值 | |
数据类型: |
|
number | …… | number |
角色: | 域 | 数据 | …… | 数据 |
可选的列角色: | …… |
配置选项
名称 | |
---|---|
aggregateTarget |
如何将多项数据选择整合到提示中:
aggregationTarget 通常与 selectionMode 和 tooltip.trigger 搭配使用,例如:var options = { // Allow multiple // simultaneous selections. selectionMode: 'multiple', // Trigger tooltips // on selections. tooltip: {trigger: 'selection'}, // Group selections // by x-value. aggregationTarget: 'category', }; 类型:字符串
默认:自动
|
动画时长 |
动画的时长(以毫秒为单位)。如需了解详情,请参阅动画文档。 类型:数字
默认:0
|
animation.startup |
确定图表是否会在初始绘制时以动画形式呈现。如果为 类型:布尔值
默认 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 颜色字符串表示。 类型:字符串
默认:“白色”
|
图表区域 |
一个具有成员的对象,用于配置图表区域的位置和大小(绘制图表本身时,不包括轴和图例)。支持两种格式:数字或后跟 % 的数字。简单的数字是一个以像素为单位的值,数字后跟 % 是一个百分比。示例: Type:对象
默认:null
|
chartArea.backgroundColor |
图表区域背景颜色。使用字符串时,它可以是十六进制字符串(例如,“#fdc”)或英语颜色名称。使用对象时,可以提供以下属性:
类型:字符串或对象
默认:“白色”
|
图表区域 |
从左边框绘制图表的距离。 类型:数字或字符串
默认:自动
|
图表区域 |
从上边框绘制图表的距离。 类型:数字或字符串
默认:自动
|
图表区域.宽度 |
图表区域宽度。 类型:数字或字符串
默认:自动
|
图表.a.height |
图表区域高度。 类型:数字或字符串
默认:自动
|
颜色 |
用于图表元素的颜色。字符串数组,其中每个元素都是一个 HTML 颜色字符串,例如: 类型:字符串数组
默认:默认颜色
|
十字准线 |
包含图表的十字准线属性的对象。 Type:对象
默认:null
|
Crosshair.color |
十字准线颜色,以颜色名称表示(例如,“blue”)或 RGB 值(例如,“#adf”)。 类型:字符串
类型:默认值
|
Crosshair 聚焦 |
一个聚焦在十字准线属性上的对象。 Type:对象
默认:默认。
|
Crosshair.opacity |
十字光标的不透明度,其中 类型:数字
默认:1.0
|
Crosshair.orientation |
十字准线方向,只能为垂直头发使用“竖直”设置,仅水平头发可使用“水平”方向,或者使用传统十字准线时可使用“两者”同时使用。 类型:字符串
默认:“两者”
|
十字形 |
包含十字准线属性后的对象。 Type:对象
默认:默认。
|
Crosshair.trigger |
何时显示十字光标:在 类型:字符串
默认:“两者”
|
曲线类型 |
当线条宽度不为零时控制线条的曲线。可以是:
类型:字符串
默认:无
|
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 |
当 类型:数字
默认:自动
|
高度 |
图表的高度(以像素为单位)。 类型:数字
默认:包含元素的高度
|
interpolateNulls |
是否猜测缺少的点的值。如果为 true,则它将根据相邻点来猜测任何缺失数据的值。如果为 false,则会在未知点处换行。
使用 类型:布尔值
默认:false
|
传奇 |
包含用于配置图例各个方面的成员的对象。如需指定此对象的属性,您可以使用对象字面量表示法,如下所示: {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>}
|
lineDashStyle |
虚线的开启和关闭模式。例如, 类型:数字数组
默认:null
|
线宽 |
数据线宽(以像素为单位)。使用零可以隐藏所有线条,并且只显示相应的点。您可以使用 类型:数字
默认:2
|
屏幕方向 |
图表的方向。如果设置为 类型:字符串
默认:“横向”
|
点形状 |
各个数据元素的形状:“圆形”、“三角形”、“方形”、“菱形”、“星形”或“多边形”。如需查看示例,请参阅积分文档。 类型:字符串
默认:“圆形”
|
点大小 |
所显示点的直径(以像素为单位)。使用零可隐藏所有点。您可以使用 类型:数字
默认:0
|
积分可见 |
确定是否显示点。设置为
也可以通过使用 类型:布尔值
默认:true
|
反向类别 |
如果设置为 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 |
在用户点击视觉实体时触发。如需了解所选内容,请调用 属性:无
|
数据政策
所有代码和数据都会在浏览器中进行处理和呈现。不会向任何服务器发送数据。