可视化图表：面积图（旧版）

已弃用

此可视化图表已替换为新版本，请改用新版本。为了轻松进行迁移，请参阅版本说明页面。

概览

在浏览器中使用 SVG 或 VML 渲染的面积图。 点击点时显示提示。点击图例条目时为线条添加动画效果。

开发者：Google

示例

在可视化园地上自行编写代码

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["areachart"]});
      google.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 chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, legend: 'bottom', title: 'Company Performance'});
      }
    </script>
  </head>

  <body>
    <div id="chart_div"></div>
  </body>
</html>

正在加载

google.load 软件包名称为 "areachart".

  google.load("visualization", "1", {packages: ["areachart"]});

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

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

数据格式

第一列应为字符串，并且包含类别标签。 后面可跟随任意数量的列，且都必须为数字列。 每列都显示为单独的一行。

配置选项

名称 类型 默认 说明
axisColor 字符串或对象 默认颜色 轴的颜色。 可能的值包括backgroundColor配置选项的值。
axisBackgroundColor 字符串或对象 默认颜色 围绕轴背景的边框。 可能的值包括backgroundColor配置选项的值。
axisFontSize number 自动 图表轴文本的字体大小（以像素为单位）。
backgroundColor 字符串或对象 默认颜色 图表主要区域的背景颜色。 可以是以下选项之一：
  • 具有 HTML 支持颜色的字符串，例如“红色”或“#00cc00”
  • 一个具有 stroke、fill 和 strokeSize 属性的对象。stroke 和 fill 应为带颜色的字符串。strokeSize 是一个数字。 例如：{backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1}。如需只使用填充而不使用描边，请使用 stroke:null, strokeSize: 0。
borderColor 字符串或对象 默认颜色 图表元素周围的边框。 可能的值包括backgroundColor配置选项的值。
颜色 字符串数组 默认颜色 用于图表元素的颜色。 字符串数组。每个元素都是一个字符串，表示 HTML 支持的颜色，例如“红色”或“#00cc00”。
enableTooltip boolean true 如果设置为 true，则当用户点击数据点时，系统会显示提示。
focusBorderColor 字符串或对象 默认颜色 获得焦点（鼠标指向）的图表元素周围的边框。 可能的值包括backgroundColor配置选项的值。
高度 number 容器高度 图表的高度（以像素为单位）。
isStacked boolean false 如果设置为 true，则会对线条值进行堆叠（累积）。
传奇 string “right” 图例的位置和类型。可以是以下某一项：
  • “right”- 位于图表右侧。
  • 'left' - 位于图表左侧。
  • “top”- 图表上方。
  • 'bottom' - 图表下方。
  • “none”- 不显示图例。
legendBackgroundColor 字符串或对象 默认颜色 图表图例区域的背景颜色。 可能的值包括backgroundColor配置选项的值。
legendFontSize number 自动 图例字体大小（以像素为单位）。
legendTextColor 字符串或对象 默认颜色 图例文本颜色。 可能的值包括backgroundColor配置选项的值。
lineSize number 2 线条宽度（以像素为单位）。使用 0 可隐藏所有线条并仅显示点。
logScale boolean false 如果为 true，主轴应以对数方式缩放。
max number 自动 指定 Y 轴的最高网格线。实际网格线将是两个值中的较大者：最大选项值或最高数据值，向上舍入到下一个较高的网格标记。
分钟 number 自动 指定 Y 轴的最小网格线。实际网格线将是两个值中的较小者：最小选项值或最低数据值，向下舍入到下一个更低的网格标记。
pointSize number 3 显示的点的大小（以像素为单位）。使用 0 可隐藏所有点。
reverseAxis boolean false 如果设为 true，则会从右向左绘制类别。默认从左到右绘制。
showCategories boolean true 如果为 true，则会显示类别标签。如果为 false，则不会。
标题 string 无标题 要在图表上方显示的文本。
titleX string 无标题 要在横轴下方显示的文本。
titleY string 无标题 要按纵轴显示的文本。
titleColor 字符串或对象 默认颜色 图表标题的颜色。 可能的值包括backgroundColor配置选项的值。
titleFontSize number 自动 图表标题的字体大小（以像素为单位）。

tooltipFontSize		 number 11 提示文本的字体大小。如果提示过小，无法容纳指定字体中的文本，可能会缩小该值。
tooltipHeight
 number 60 提示的高度（以像素为单位）。提示高度是固定的，绝不会为了适应文本的长度或字体大小而放大或缩小。但是，任何大于图表高度 1/3 的内容都将被剪裁。
tooltipWidth number 120 提示的宽度（以像素为单位）。提示宽度是固定的，绝不会为了适应文本的长度或字体大小而放大或缩小。但是，任何大于图表宽度的内容都将被剪裁。
宽度 number 容器宽度 图表的宽度（以像素为单位）。

方法

方法 返回值类型 说明
draw(data, options) 无 绘制图表。
getSelection() 选择元素数组 标准 getSelection() 实现。所选元素为列元素和单元格元素。用户一次只能选择一列或单元格。
setSelection() 无 标准 setSelection() 实现，但仅支持选择一个元素。将每个选择条目视为选中的列或单元格。请注意，无法选择标签列。

事件

名称 说明 属性
onmouseover 用户将鼠标悬停在某个点上时触发，并传入相应单元格的行索引和列索引。 行，列
onmouseout 用户将鼠标远离某个点并传入相应单元格的行索引和列索引时触发。 行，列
ready 该图表已准备好进行外部方法调用。如果您想要与图表交互并在绘制图表后调用方法，则应在调用 draw 方法之前为此事件设置监听器，并且仅在事件触发后调用监听器。 无
select 当用户点击点或图例时触发。选择一个点后，系统会选择数据表中的相应单元格；选择图例后，系统会选择数据表中的相应列。 如需了解已选择的内容，请调用 getSelection()。 无

数据政策

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