阶梯面积图

概览

在浏览器中使用 SVGVML 渲染的阶梯面积图。 将鼠标悬停在步骤上时显示提示。

简单示例

<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([
          ['Director (Year)',  'Rotten Tomatoes', 'IMDB'],
          ['Alfred Hitchcock (1935)', 8.4,         7.9],
          ['Ralph Thomas (1959)',     6.9,         6.5],
          ['Don Sharp (1978)',        6.5,         6.4],
          ['James Hawes (2008)',      4.4,         6.2]
        ]);

        var options = {
          title: 'The decline of \'The 39 Steps\'',
          vAxis: {title: 'Accumulated Rating'},
          isStacked: true
        };

        var chart = new google.visualization.SteppedAreaChart(document.getElementById('chart_div'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

一些常用选项

与所有 Google 图表一样,阶梯面积图也有许多选项,如此处所示。以下示例演示了一些常见示例:

在上图中,我们使用 backgroundColor 更改了背景颜色,使用 legend.position 将图例移到底部,通过将 connectSteps 设置为 false 移除了垂直线,并自定义了颜色。具体操作步骤如下:

  var options = {
      backgroundColor: '#ddd',
      legend: { position: 'bottom' },
      connectSteps: false,
      colors: ['#4374E0', '#53A8FB', '#F1CA3A', '#E49307'],
      isStacked: true,
  };

阶梯堆叠面积图

阶梯面积图还支持堆叠,包括 100% 堆叠。阶梯堆叠面积图是一种阶梯面积图,用于将相关值相互叠加。如果存在任何负值,它们会按反向顺序堆叠在图表基准下方。对于 100% 堆叠,每个域值处的元素堆栈都会重新调整,使总和为 100%。此选项的选项包括 isStacked: 'percent'(将每个值的格式设置为 100% 的百分比)和 isStacked: 'relative'(将每个值的格式设置为 1 的分数形式)。此外,还有一个 isStacked: 'absolute' 选项,它的功能等同于 isStacked: true

请注意,在右侧的 100% 堆叠图表中,刻度值是基于相对 0-1 的刻度表示的,并且以 1 的分数表示。

堆叠
        var options_stacked = {
          isStacked: true,
          height: 300,
          legend: {position: 'top', maxLines: 3},
          vAxis: {minValue: 0}
        };
    
100% 堆叠
        var options_fullStacked = {
          isStacked: 'relative',
          height: 300,
          legend: {position: 'top', maxLines: 3},
          vAxis: {
            minValue: 0,
            ticks: [0, .3, .6, .9, 1]
          }
        };
    

正在加载

google.charts.load 软件包名称为 "corechart"

  google.charts.load("current", {packages: ["corechart"]});

该可视化图表的类名称为 google.visualization.SteppedAreaChart

  var visualization = new google.visualization.SteppedAreaChart(container);

数据格式

:表格中的每一行代表一组条形。

  第 0 列 第 1 列 ... N
用途: X 轴组标签 该组中的条形 1 值 ... 该组中的条形 N
数据类型: string number ... number
角色: 网域 data ... data
可选的列角色 ...

 

配置选项

名称
aggregationTarget
如何将多项数据选择汇总为提示:
  • 'category':按 x 值对所选数据进行分组。
  • 'series':按系列对所选数据进行分组。
  • 'auto':如果所有选定项具有相同的 x 值,则按 x 值对选定数据进行分组;否则按系列对数据进行分组。
  • 'none':每个选项仅显示一条提示。
aggregationTarget 通常与 selectionModetooltip.trigger 一起使用,例如:
var options = {
  // Allow multiple
  // simultaneous selections.
  selectionMode: 'multiple',
  // Trigger tooltips
  // on selections.
  tooltip: {trigger: 'selection'},
  // Group selections
  // by x-value.
  aggregationTarget: 'category',
};
    
类型:字符串
默认:“auto”
animation.duration

动画的时长(以毫秒为单位)。如需了解详情,请参阅动画文档

类型:数字
默认值:0
animation.easing

应用于动画的加/减速函数。提供的选项如下:

  • “Linear”- 恒定速度。
  • “in”- 缓入 - 开始时要慢,速度快。
  • '出' - 缓出 - 快速启动,然后放慢速度。
  • 'inAndOut' - 缓入和缓出 - 开始时要慢,加速,然后慢。
类型:字符串
默认值:“线性”
animation.startup

确定图表是否在首次绘制时呈现动画效果。如果为 true,则图表将从基线开始,并以动画方式达到其最终状态。

类型:布尔值
默认值 false
areaOpacity

阶梯下方区域的默认不透明度,0.0 表示完全透明,1.0 表示完全不透明。不影响阶梯线的不透明度。要生成阶梯折线图,请将此值设置为 0。如需为单个数据系列指定不透明度,请在 series 属性中设置 areaOpacity 值。

类型:数字,0.0–1.0
默认值:0.3
axisTitlesPosition

轴标题的放置位置(相对于图表区域)。支持的值:

  • in - 在图表区域内绘制轴标题。
  • out - 在图表区域外绘制轴标题。
  • none - 省略轴标题。
类型:字符串
默认值:“out”
backgroundColor

图表主要区域的背景颜色。可以是简单的 HTML 颜色字符串(例如 'red''#00cc00'),也可以是具有以下属性的对象。

类型:字符串或对象
默认:“white”
backgroundColor.stroke

图表边框的颜色,以 HTML 颜色字符串表示。

类型:字符串
默认:“#666”
backgroundColor.strokeWidth

边框宽度(以像素为单位)。

类型:数字
默认值:0
backgroundColor.fill

图表的填充颜色,采用 HTML 颜色字符串的形式。

类型:字符串
默认:“white”
chartArea

一个对象,其中包含用于配置图表区域(绘制图表本身,不包括轴和图例)的位置和大小的成员。支持两种格式:数字或数字后跟 %。简单数字是以像素为单位的值;数字后跟 % 表示百分比。示例:chartArea:{left:20,top:0,width:'50%',height:'75%'}

类型:object
默认值:null
chartArea.backgroundColor
图表区域背景颜色。使用字符串时,它可以是十六进制字符串(例如,'#fdc') 或英文颜色名称。使用对象时,可以提供以下属性:
  • stroke:颜色,以十六进制字符串或英文颜色名称的形式提供。
  • strokeWidth:如果提供,则会在具有指定宽度(颜色为 stroke)的图表区域周围绘制边框。
类型:字符串或对象
默认:“white”
chartArea.left

从左侧边框绘制图表的距离。

类型:数字或字符串
默认:auto
chartArea.top

从顶部边框绘制图表的距离。

类型:数字或字符串
默认:auto
chartArea.width

图表区域宽度。

类型:数字或字符串
默认:auto
chartArea.height

图表区域高度。

类型:数字或字符串
默认:auto
颜色

用于图表元素的颜色。字符串数组,其中每个元素都是一个 HTML 颜色字符串,例如:colors:['red','#004411']

类型:字符串数组
默认:默认颜色
connectSteps

如果设为 true,则会将各个步骤连接起来,形成一条阶梯线。否则,系统只会显示顶行。默认值为连接步骤。

类型:布尔值
默认值:true
enableInteractivity

图表是抛出基于用户的事件,还是对用户互动做出响应。如果为 false,则图表不会抛出“select”或其他基于互动的事件(但会抛出 ready 事件或 error 事件),也不会显示悬停文本或根据用户输入进行其他更改。

类型:布尔值
默认值:true
focusTarget

鼠标悬停时获得焦点的实体的类型。还会影响鼠标点击选择哪个实体,以及哪个数据表元素与事件相关联。可以是下列选项之一:

  • “datum”- 关注单个数据点。与数据表中的单元格相关。
  • “category”- 聚焦于主轴上所有数据点的分组。与数据表中的行相关。

在 focusTarget“category”中,提示会显示所有类别值。这对于比较不同系列的值可能很有用。

类型:字符串
默认:“datum”
fontSize

图表中所有文字的默认字体大小(以像素为单位)。您可以使用特定图表元素的属性替换此设置。

类型:数字
默认:自动
fontName

图表中所有文字的默认字体。您可以使用特定图表元素的属性替换此设置。

类型:字符串
默认:“Arial”
forceIFrame

在内嵌框架内绘制图表。(请注意,在 IE8 上,此选项会被忽略;所有 IE8 图表都是在 iframe 中绘制的。)

类型:布尔值
默认值:false
hAxis

包含成员(用于配置各种横轴元素)的对象。如需指定此对象的属性,您可以使用对象字面量表示法,如下所示:

{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
    
类型:object
默认值:null
hAxis.direction

值沿水平轴的增长方向。指定 -1 会反转值的顺序。

类型:1 或 -1
默认值:1
hAxis.textPosition

横轴文本相对于图表区域的位置。支持的值:“out”“in”“none”。

类型:字符串
默认值:“out”
hAxis.textStyle

一个对象,用于指定横轴文本样式。该对象的格式如下:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color 可以是任何 HTML 颜色字符串,例如 'red''#00cc00'。另请参阅 fontNamefontSize

类型:object
默认值 {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.ticks

将自动生成的 X 轴刻度线替换为指定数组。数组的每个元素都应是有效的刻度值(例如数字、日期、日期时间或时间)或对象。如果是对象,则应具有用于 tick 值的 v 属性,以及包含要显示为标签的文字字符串的可选 f 属性。

除非您指定要替换的 viewWindow.minviewWindow.max,否则 viewWindow 将自动展开即可包括最小和最大 tick。

示例:

  • hAxis: { ticks: [5,10,15,20] }
  • hAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
  • hAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
  • hAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }
类型:元素数组
默认:auto
hAxis.title

hAxis 属性,用于指定横轴的标题。

类型:字符串
默认值:null
hAxis.titleTextStyle

一个对象,用于指定横轴标题文本样式。该对象的格式如下:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color 可以是任何 HTML 颜色字符串,例如 'red''#00cc00'。另请参阅 fontNamefontSize

类型:object
默认值 {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.allowContainerBoundaryTextCutoff

如果为 false,将隐藏最外层的标签,而不是允许图表容器剪裁它们。如果为 true,将允许剪裁标签。

类型:布尔值
默认值:false
hAxis.slantedText

如果为 true,请以某个角度绘制横轴文本,以帮助沿着轴显示更多文本;如果为 false,则垂直绘制横轴文本。默认行为是倾斜文本(如果在竖直绘制时无法完全填满文本)。请注意,仅当 hAxis.textPosition 设置为“out”(默认值)时,此选项才可用。 日期和时间的默认值为 false

类型:布尔值
默认:自动
hAxis.slantedTextAngle

横轴文本的角度(如果文本为倾斜绘制)。如果 hAxis.slantedTextfalse 或处于自动模式,而图表决定水平绘制文本,则忽略。如果角度为正,则逆时针旋转;如果角度为正,则逆时针旋转;如果角度为正,则顺时针旋转。

类型:数字、-90—90
默认值:30
hAxis.maxAlternation

横轴文本的级别数上限。如果轴的文本标签变得太拥挤,服务器可能会上下移动相邻标签,以使标签更靠近。此值可指定最多使用的楼层数;如果标签可以放得不重叠,服务器可以使用较少的楼层。对于日期和时间,默认值为 1。

类型:数字
默认值:2
hAxis.maxTextLines

文本标签允许的行数上限。如果标签太长,标签可以跨多行,并且行数默认受可用空间高度的限制。

类型:数字
默认:auto
hAxis.minTextSpacing

两个相邻文本标签之间的最小水平间距(以像素为单位)。如果标签的间距过密或过长,则间距可能会降至此阈值以下,在这种情况下,系统将采用一种标签整洁措施(例如,截断标签或丢弃部分标签)。

类型:数字
默认值hAxis.textStyle.fontSize 的值
hAxis.showTextEvery

要显示的横轴标签数量,其中 1 表示显示每个标签,2 表示显示其他所有标签,以此类推。默认设置为尝试显示尽可能多的标签,而不重叠。

类型:数字
默认:自动
hAxis.viewWindow

指定横轴的剪裁范围。

类型:object
默认值:null
hAxis.viewWindow.max

剪裁窗口结束位置的行索引(从零开始)。此索引及更高索引处的数据点将被剪裁掉。与 vAxis.viewWindowMode.min 结合使用时,它可以定义半开范围 [min, max),用于表示要显示的元素索引。 换句话说,系统会显示 min <= index < max 的所有索引。

hAxis.viewWindowMode 为“pretty”或“maximized”时,会被忽略。

类型:数字
默认:auto
hAxis.viewWindow.min

从零开始的行索引,剪裁窗口开始的位置。索引值低于此值的数据点将被剪裁掉。与 vAxis.viewWindowMode.max 结合使用时,它可以定义半开范围 [min, max),用于表示要显示的元素索引。换句话说,系统会显示 min <= index < max 的每个索引。

hAxis.viewWindowMode 为“pretty”或“maximized”时,会被忽略。

类型:数字
默认:auto
高度

图表的高度(以像素为单位)。

类型:数字
默认值:所包含元素的高度
isStacked

如果设置为 true,则在每个域值处堆叠所有系列的元素。 注意:在面积SteppedArea 图表中,Google 图表会颠倒图例项的顺序,以便更好地与系列元素的堆叠对应(例如,系列 0 将是最底部的图例项)。此 不适用于 条形图

isStacked 选项还支持 100% 堆叠,即每个域值处的元素堆栈都会重新缩放,加起来为 100%。

isStacked 的选项包括:

  • false - 元素不会堆叠。这是默认选项。
  • true - 堆叠每个域值处所有系列的元素。
  • 'percent' - 堆叠每个域值处所有系列的元素,并重新缩放它们,使它们相加为 100%,其中每个元素的值都按 100% 的百分比计算。
  • 'relative' - 堆叠每个域值处所有系列的元素,并重新缩放它们,使它们相加为 1,每个元素的值按 1 的分数计算。
  • 'absolute' - 功能与 isStacked: true 相同。

对于 100% 堆叠,为每个元素计算出的值将显示在提示中实际值之后。

目标轴默认基于相对的 0-1 刻度刻度值,'relative' 为 1 的小数部分,'percent' 为 0-100% 的刻度值(注意:使用 'percent' 选项时,轴/刻度点值显示为百分比,但实际值是相对 0-1 的刻度值。 这是因为百分比轴刻度是将“#.##%”格式应用于相对 0-1 刻度值的结果。使用 isStacked: 'percent' 时,请务必使用相对的 0-1 缩放值指定任何刻度线/网格线。您可以使用适当的 hAxis/vAxis 选项自定义网格线/刻度线值和格式。

100% 堆叠仅支持 number 类型的数据值,并且基准必须为 0。

类型:布尔值/字符串
默认值:false
传奇

包含成员的对象,用于配置图例的各个方面。要指定此对象的属性,您可以使用对象字面量表示法,如下所示:

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
类型:object
默认值:null
legend.alignment

图例的对齐方式。可以是下列选项之一:

  • “start”- 与分配至图例的区域起点对齐。
  • “center”- 在为图例分配的区域中居中。
  • 'end' - 与分配至图例的区域末端对齐。

起点、中心和终点是相对于图例的样式(垂直或水平)而言的。 例如,在“右侧”图例中,“start”和“end”分别位于顶部和底部;对于“顶部”图例,“start”和“end”分别位于区域的左侧和右侧。

默认值取决于图例的位置。对于“底部”图例,默认值为“center”;其他图例默认为“start”。

类型:字符串
默认:自动
legend.maxLines

图例中的行数上限。将此值设为大于 1 的数字即可向图例中添加线条。注意:用于确定实际渲染线条数的确切逻辑仍然处于变化之中。

此选项目前仅在 Legend.position 为“top”时有效。

类型:数字
默认值:1
legend.position

图例的位置。可以是下列选项之一:

  • 'bottom' - 图表下方。
  • “left”- 位于图表左侧,前提是左轴没有与之关联的数据系列。 因此,如果您希望显示左侧的图例,请使用 targetAxisIndex: 1 选项。
  • “in”- 在图表内,左上角。
  • “none”- 不显示图例。
  • “right”- 位于图表右侧。与 vAxes 选项不兼容。
  • “top”- 图表上方。
类型:字符串
默认:“right”
legend.textStyle

用于指定图例文本样式的对象。该对象的格式如下:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color 可以是任何 HTML 颜色字符串,例如 'red''#00cc00'。另请参阅 fontNamefontSize

类型:object
默认值 {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
lineDashStyle

虚线的开/关模式。例如,[4, 4] 会重复显示 4 条短划线,后跟 4 条间隙;[5, 1, 3] 会重复显示 5 条短划线、1 条间隙、3 条短划线、5 条间隙、一条长度短划线和 3 条间隙。 如需了解详情,请参阅虚线

类型:数字数组
默认值:null
reverseCategories

如果设为 true,系统将从右向左绘制系列。默认从左到右绘制。

类型:布尔值
默认值:false
selectionMode

selectionMode'multiple' 时,用户可以选择多个数据点。

类型:字符串
默认:“single”
系列图书

一个对象数组,其中每个对象都描述了图表中相应系列的格式。要为系列使用默认值,请指定空对象 {}。如果未指定系列或值,系统将使用全局值。每个对象都支持以下属性:

  • areaOpacity - 替换此系列的全局 areaOpacity
  • color - 要用于此系列的颜色。请指定有效的 HTML 颜色字符串。
  • labelInLegend - 要在图表图例中显示的系列说明。
  • lineDashStyle - 替换此系列的全局 lineDashStyle 值。
  • targetAxisIndex - 要为此系列指定哪条轴,0 是默认轴,1 是相反轴。默认值为 0;设置为 1 可定义一个图表,其中不同的数据系列针对不同的轴进行渲染。至少有一个系列大量分配给默认轴。您可以为不同的轴定义不同的刻度。
  • visibleInLegend - 一个布尔值,其中 true 表示系列中应包含图例条目,false 表示不应包含图例条目。默认值为 true。

您可以指定对象数组,其中每个对象都会按给定顺序应用于系列;也可以指定一个对象,其中每个子对象都有一个数字键,用于指示该对象所适用的系列。例如,以下两项声明完全相同,将第一个数据系列声明为黑色且未显示在图例中,而将第四个数据系列声明为红色数据并不存在于图例中:

series: [
  {color: 'black', visibleInLegend: false}, {}, {},
  {color: 'red', visibleInLegend: false}
]
series: {
  0:{color: 'black', visibleInLegend: false},
  3:{color: 'red', visibleInLegend: false}
}
    
类型:对象数组或包含嵌套对象的对象
默认值
主题

主题是一组预定义的选项值,这些值协同发挥作用来实现特定的图表行为或视觉效果。目前只有一个主题可用:

  • 'maximized' - 最大化图表区域,并在图表区域内绘制图例和所有标签。设置以下选项:
    chartArea: {width: '100%', height: '100%'},
    legend: {position: 'in'},
    titlePosition: 'in', axisTitlesPosition: 'in',
    hAxis: {textPosition: 'in'}, vAxis: {textPosition: 'in'}
            
类型:字符串
默认值:null
标题

要在图表上方显示的文本。

类型:字符串
默认:无标题
titlePosition

图表标题的放置位置(相对于图表区域)。支持的值:

  • in - 在图表区域内绘制标题。
  • out - 在图表区域以外绘制标题。
  • 无 - 省略标题。
类型:字符串
默认值:“out”
titleTextStyle

一个对象,用于指定标题文本样式。该对象的格式如下:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color 可以是任何 HTML 颜色字符串,例如 'red''#00cc00'。另请参阅 fontNamefontSize

类型:object
默认值 {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
提示

包含用于配置各种提示元素的成员的对象。要指定此对象的属性,您可以使用对象字面量表示法,如下所示:

{textStyle: {color: '#FF0000'}, showColorCode: true}
类型:object
默认值:null
tooltip.ignoreBounds

如果设置为 true,则允许绘制提示在所有边超出图表边界。

注意:这仅适用于 HTML 提示。如果通过 SVG 提示启用此功能,图表边界以外的任何溢出都将被剪裁。如需了解详情,请参阅自定义提示内容

类型:布尔值
默认值:false
tooltip.isHtml

如果此政策设为 true,系统会使用 HTML 渲染(而非 SVG 渲染)提示。如需了解详情,请参阅自定义提示内容

注意气泡图可视化图表支持通过提示列数据角色自定义 HTML 提示内容。

类型:布尔值
默认值:false
tooltip.showColorCode

如果为 true,则在提示中的系列信息旁边显示彩色方块。当 focusTarget 设置为“category”时,默认值为 true,否则默认值为 false。

类型:布尔值
默认:自动
tooltip.textStyle

一个用于指定提示文本样式的对象。该对象的格式如下:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color 可以是任何 HTML 颜色字符串,例如 'red''#00cc00'。另请参阅 fontNamefontSize

类型:object
默认值 {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
tooltip.trigger

导致显示提示的用户互动:

  • “focus”- 用户将鼠标悬停在元素上时将显示提示。
  • “none”- 不会显示提示。
  • “selection”- 当用户选择元素时,系统将显示提示。
类型:字符串
默认:“focus”
vAxes

如果图表包含多个纵轴,则指定各个纵轴的属性。 每个子对象都是一个 vAxis 对象,可以包含 vAxis 支持的所有属性。这些属性值会替换同一媒体资源的任何全局设置。

如需指定具有多个纵轴的图表,请先使用 series.targetAxisIndex 定义新轴,然后使用 vAxes 配置轴。以下示例将系列 2 分配给右轴,并为其指定了自定义标题和文本样式:

{
  series: {
    2: {
      targetAxisIndex:1
    }
  },
  vAxes: {
    1: {
      title:'Losses',
      textStyle: {color: 'red'}
    }
  }
}
    

此属性可以是对象或数组:对象是对象的集合,每个对象都带有一个数字标签,用于指定其定义的轴 - 如上所示的格式;数组是对象数组,每个轴一个。例如,以下数组样式的表示法与上面显示的 vAxis 对象完全相同:

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 属性,用于指定纵轴的基准。如果基线大于最高网格线或小于最低网格线,则基线将四舍五入为最近的网格线。

类型:数字
默认:自动
vAxis.baselineColor

指定纵轴基线的颜色。可以是任何 HTML 颜色字符串,例如:'red''#00cc00'

类型:数字
默认:“black”
vAxis.direction

值沿纵轴的增长方向。默认情况下,图表底部会显示较小的值。指定 -1 会反转值的顺序。

类型:1 或 -1
默认值:1
vAxis.format

数字轴标签的格式字符串。这是 ICU 模式集 的一部分。 例如,{format:'#,###%'} 会针对值 10、7.5 和 0.5 显示“1,000%”“750%”和“50%”值。您还可以提供以下任一项:

  • {format: 'none'}:显示不带格式的数字(例如,8000000)
  • {format: 'decimal'}:显示带千位分隔符的数字(例如,8,000,000)
  • {format: 'scientific'}:以科学计数法显示数字(例如,8e6)
  • {format: 'currency'}:以本地货币显示数字(例如,$8,000,000.00)
  • {format: 'percent'}:以百分比的形式显示数字(例如,800,000,000%)
  • {format: 'short'}:显示缩写数字(例如,800 万)
  • {format: 'long'}:将数字显示为完整字词(例如,800 万)

应用于标签的实际格式源自 API 加载时所使用的语言区域。如需了解详情,请参阅 加载具有特定语言区域的图表

在计算刻度线值和网格线时,系统会考虑所有相关网格线选项的几个备选组合,如果格式化的刻度线标签重复或重叠,则将拒绝备选组合。因此,如果您只想显示整数刻度线值,则可以指定 format:"#",但请注意,如果没有满足此条件的备用内容,则不会显示网格线或刻度线。

类型:字符串
默认:auto
vAxis.gridlines

一个对象,其中包含用于在纵轴上配置网格线的成员。 请注意,纵轴网格线是水平绘制的。如需指定此对象的属性,您可以使用对象字面量表示法,如下所示:

{color: '#333', minSpacing: 20}
类型:object
默认值:null
vAxis.gridlines.color

图表区域内垂直网格线的颜色。请指定有效的 HTML 颜色字符串。

类型:字符串
默认:“#CCC”
vAxis.gridlines.count

图表区域内水平网格线的大致数量。 如果您为 gridlines.count 指定一个正数,它将用于计算网格线之间的 minSpacing。 您可以指定值 1 表示仅绘制一条网格线,指定 0 则不绘制网格线。 指定 -1(默认值),即可根据其他选项自动计算网格线的数量。

类型:数字
默认值:-1
vAxis.minorGridlines

一个对象,其中包含用于在纵轴上配置次要网格线的成员,类似于 vAxis.gridlines 选项。

类型:object
默认值:null
vAxis.minorGridlines.color

图表区域内垂直次网格线的颜色。请指定有效的 HTML 颜色字符串。

类型:字符串
默认:网格线和背景颜色的混合
vAxis.minorGridlines.count

除通过将计数设置为 0 来停用次要网格线外,MinorGridlines.count 选项大体上已废弃。次网格线的数量取决于主要网格线的间距(请参阅 vAxis.gridlines.interval)和所需的最小空间(请参阅 vAxis.minorGridlines.minSpacing)。

类型:数字
默认值:1
vAxis.logScale

如果为 true,则使纵轴以对数刻度表示。注意:所有值必须为正数。

类型:布尔值
默认值:false
vAxis.scaleType

vAxis 属性,将纵轴设为对数刻度。可以是:

  • null - 不执行对数缩放。
  • “log”- 对数缩放。不绘制负值和零值。此选项与设置 vAxis: { logscale: true } 相同。
  • “MirrorLog”- 对数缩放,其中绘制负值和零值。绘制的负数值是绝对值的对数的负数。接近 0 的值按线性刻度绘制。
类型:字符串
默认值:null
vAxis.textPosition

纵轴文本相对于图表区域的位置。支持的值:“out”“in”“none”。

类型:字符串
默认值:“out”
vAxis.textStyle

用于指定纵轴文本样式的对象。该对象的格式如下:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color 可以是任何 HTML 颜色字符串,例如 'red''#00cc00'。另请参阅 fontNamefontSize

类型:object
默认值 {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.ticks

将自动生成的 Y 轴刻度线替换为指定数组。数组的每个元素都应是有效的刻度值(例如数字、日期、日期时间或时间)或对象。如果是对象,则应具有用于 tick 值的 v 属性,以及包含要显示为标签的文字字符串的可选 f 属性。

除非您指定要替换的 viewWindow.minviewWindow.max,否则 viewWindow 将自动展开即可包括最小和最大 tick。

示例:

  • vAxis: { ticks: [5,10,15,20] }
  • vAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
  • vAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
  • vAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }
类型:元素数组
默认:auto
vAxis.title

vAxis 属性,用于指定纵轴的标题。

类型:字符串
默认:无标题
vAxis.titleTextStyle

一个对象,用于指定纵轴标题文本样式。该对象的格式如下:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
  

color 可以是任何 HTML 颜色字符串,例如 'red''#00cc00'。另请参阅 fontNamefontSize

类型:object
默认值 {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.maxValue

将纵轴的最大值移动到指定值;在大多数图表中这个值都将向上移动。如果设置的值小于数据的最大 y 值,则忽略。 vAxis.viewWindow.max 会替换此属性。

类型:数字
默认:自动
vAxis.minValue

将纵轴的最小值移到指定值;在大多数图表中,该值将是向下的。如果设为大于数据最小 y 值的值,则忽略。 vAxis.viewWindow.min 会替换此属性。

类型:数字
默认值:null
vAxis.viewWindowMode

指定如何缩放纵轴以在图表区域内渲染值。支持以下字符串值:

  • 'pretty' - 缩放垂直值,使最大和最小数据值稍微位于图表区域的底部和顶部。 viewWindow 会展开为最近的主网格线(对于数字)或最近的次要网格线(对于日期和时间)。
  • 'maximized' - 缩放垂直值,使最大和最小数据值接触图表区域的顶部和底部。这会导致 vaxis.viewWindow.minvaxis.viewWindow.max 被忽略。
  • “露骨内容”- 用于指定图表区域的顶部和底部刻度值的已弃用选项。(已弃用,因为它与 vaxis.viewWindow.minvaxis.viewWindow.max 重复。系统会剪裁超出这些值的数据值。您必须指定一个 vAxis.viewWindow 对象,用于描述要显示的最大值和最小值。
类型:字符串
默认值:相当于“pretty”,但如果使用,则 vaxis.viewWindow.minvaxis.viewWindow.max 优先。
vAxis.viewWindow

指定纵轴的剪裁范围。

类型:object
默认值:null
vAxis.viewWindow.max

要呈现的最大行业数据值。

vAxis.viewWindowMode 为“pretty”或“maximized”时,会被忽略。

类型:数字
默认:auto
vAxis.viewWindow.min

要渲染的最小行业数据值。

vAxis.viewWindowMode 为“pretty”或“maximized”时,会被忽略。

类型:数字
默认:auto
宽度

图表的宽度,以像素为单位。

类型:数字
默认值:所包含元素的宽度

方法

方法
draw(data, options)

绘制图表。只有在 ready 事件触发后,图表才会接受进一步的方法调用。Extended description

Return Type(返回类型):none
getAction(actionID)

返回具有所请求的 actionID 的提示操作对象。

返回类型:object
getBoundingBox(id)

返回一个对象,其中包含图表元素 id 的左侧、顶部、宽度和高度。尚未记录 id 的格式(它们是事件处理脚本的返回值),以下是一些示例:

var cli = chart.getChartLayoutInterface();

图表区域的高度
cli.getBoundingBox('chartarea').height
条形图或柱形图第一个系列中第三条柱的宽度
cli.getBoundingBox('bar#0#2').width
饼图第五个楔形的边界框
cli.getBoundingBox('slice#4')
垂直(如柱形)图表的图表数据的边界框:
cli.getBoundingBox('vAxis#0#gridline')
水平(例如条形图)图表数据的边界框:
cli.getBoundingBox('hAxis#0#gridline')

值是相对于图表容器而言的。在绘制图表之后调用此方法。

返回类型:object
getChartAreaBoundingBox()

返回一个对象,其中包含图表内容的左侧、顶部、宽度和高度(即不包括标签和图例):

var cli = chart.getChartLayoutInterface();

cli.getChartAreaBoundingBox().left
cli.getChartAreaBoundingBox().top
cli.getChartAreaBoundingBox().height
cli.getChartAreaBoundingBox().width

值是相对于图表容器而言的。在绘制图表之后调用此方法。

返回类型:object
getChartLayoutInterface()

返回一个对象,其中包含有关图表在屏幕上的位置及其元素的信息。

可以对返回的对象调用以下方法:

  • getBoundingBox
  • getChartAreaBoundingBox
  • getHAxisValue
  • getVAxisValue
  • getXLocation
  • getYLocation

在绘制图表之后调用此方法。

返回类型:object
getHAxisValue(xPosition, optional_axis_index)

返回 xPosition 处的水平数据值,这是相对于图表容器左边缘的像素偏移量。可以是负数。

示例:chart.getChartLayoutInterface().getHAxisValue(400)

在绘制图表之后调用此方法。

Return Type(返回类型):number
getImageURI()

返回已序列化为图片 URI 的图表。

在绘制图表之后调用此方法。

请参阅打印 PNG 图表

返回类型:字符串
getSelection()

返回所选图表实体的数组。 可选择的实体包括步骤、图例条目和类别。 步骤对应数据表中的单元格、列的图例条目(行索引为 null)以及类别(列索引为 null)。 对于此图表,在任何给定时刻,只能选择一个实体。 Extended description

返回类型:选择元素数组
getVAxisValue(yPosition, optional_axis_index)

返回 yPosition 处的垂直数据值,该值是从图表容器上边缘向下偏移的像素值。可以是负数。

示例:chart.getChartLayoutInterface().getVAxisValue(300)

在绘制图表之后调用此方法。

Return Type(返回类型):number
getXLocation(dataValue, optional_axis_index)

返回 dataValue 相对于图表容器左边缘的像素 x 坐标。

示例:chart.getChartLayoutInterface().getXLocation(400)

在绘制图表之后调用此方法。

Return Type(返回类型):number
getYLocation(dataValue, optional_axis_index)

返回 dataValue 相对于图表容器上边缘的像素 y 坐标。

示例:chart.getChartLayoutInterface().getYLocation(300)

在绘制图表之后调用此方法。

Return Type(返回类型):number
removeAction(actionID)

从图表中移除包含所请求 actionID 的提示操作。

返回值类型none
setAction(action)

设置当用户点击操作文本时要执行的提示操作。

setAction 方法接受一个对象作为其操作参数。此对象应指定 3 个属性:id(所设置的操作的 ID)、text(应显示在操作提示中的文本)和 action(应在用户点击操作文本时应运行的函数)。

任何和所有提示操作都应在调用图表的 draw() 方法之前设置。详细描述

返回值类型none
setSelection()

选择指定的图表实体。取消之前的所有选择。 可选择的实体包括步骤、图例条目和类别。 步骤对应数据表中的单元格、列的图例条目(行索引为 null)以及类别(列索引为 null)。 对于此图表,一次只能选择一个实体。 Extended description

Return Type(返回类型):none
clearChart()

清除图表,并释放为其分配的所有资源。

Return Type(返回类型):none

事件

如需详细了解如何使用这些事件,请参阅基本互动处理事件触发事件

名称
animationfinish

过渡动画完整播放时触发。

属性:无
click

当用户点击图表内部时触发。可用于识别何时点击标题、数据元素、图例条目、轴、网格线或标签。

属性:targetID
error

尝试渲染图表时出错时触发。

属性:id、message
legendpagination

当用户点击图例分页箭头时触发。传回当前图例(从 0 开始)的网页索引和总页数。

属性:currentPageIndex、totalPages
onmouseover

用户将鼠标悬停在视觉实体上时触发。传回相应数据表元素的行和列索引。

属性:行、列
onmouseout

用户将鼠标远离视觉实体时触发。传回相应数据表元素的行和列索引。

属性:行、列
ready

该图表已准备好进行外部方法调用。如果您想与图表交互并在绘制图表后调用方法,则应在调用 draw 方法之前为该事件设置监听器,并仅在事件触发后调用监听器。

属性:无
select

当用户点击视觉实体时触发。如需了解已选择的内容,请调用 getSelection()

属性:无

数据政策

所有代码和数据都会在浏览器中处理并呈现。系统不会向任何服务器发送任何数据。