此页面由 Cloud Translation API 翻译。

可视化：面积图（旧版）

已弃用

此可视化图表已替换为新版本；请改用新版本。为了便于迁移，请参阅版本说明页面。

概览

使用 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);

数据格式

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

配置选项

名称	类型	默认	说明
轴颜色	字符串或对象	默认颜色	轴的颜色。可能的值是 backgroundColor 配置选项的值。
axisBackgroundColor	字符串或对象	默认颜色	轴背景周围的边框。可能的值是 backgroundColor 配置选项的值。
axisFontSize	number	自动	图表轴文本的字体大小（以像素为单位）。
backgroundColor	字符串或对象	默认颜色	图表主区域的背景颜色。可能是以下选项之一：一个采用 HTML 支持颜色的字符串，例如“red”或“#00cc00” 一个具有 `stroke` `fill` 和 `strokeSize` 属性的对象。 `stroke` 和 `fill` 应该是包含颜色的字符串。strokeSize 是一个数字。例如：`{backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1}`。如果只使用填充，不使用描边，请使用 `stroke:null, strokeSize: 0`。
边框颜色	字符串或对象	默认颜色	图表元素的边框。可能的值是 backgroundColor 配置选项的值。
颜色	字符串数组	默认颜色	用于图表元素的颜色。字符串数组。每个元素都是一个 HTML 支持的颜色字符串，例如“red”或“#00cc00”。
启用提示	布尔值	true	如果设置为 true，将在用户点击数据点时显示提示。
focusBorderColor	字符串或对象	默认颜色	被聚焦（由鼠标指向）的图表元素周围的边框。可能的值是 backgroundColor 配置选项的值。
高度	number	容器的高度	图表的高度（以像素为单位）。
堆叠	布尔值	false	如果设置为 true，则行值堆叠（累计）。
传奇	字符串	“right”	图例的位置和类型。可以是以下某一项： “right”- 位于图表右侧。 “left”- 位于图表左侧。 “top”- 图表上方。 “bottom”- 图表下方。 “none”- 不显示图例。
图例背景色	字符串或对象	默认颜色	图表图例区域的背景颜色。可能的值是 backgroundColor 配置选项的值。
图例字体大小	number	自动	图例字体的大小（以像素为单位）。
图例文字颜色	字符串或对象	默认颜色	图例文字颜色。可能的值是 backgroundColor 配置选项的值。
行大小	number	2	线条宽度（以像素为单位）。使用零可以隐藏所有线条，并且只显示相应的点。
logScale	布尔值	false	如果为 true，则主轴应沿对数进行缩放。
最大值	number	自动	指定 Y 轴的最高网格线。实际网格线将是两个值中的较大者：最大选项值或最高数据值，向上舍入到下一个较高的网格标记。
分钟	number	自动	指定 Y 轴底部的网格线。实际网格线将是两个值中的较小者：最小值选项值或最低的数据值，向下舍入到下一个较低网格标记。
点大小	number	3	所显示点的大小（以像素为单位）。使用零可隐藏所有点。
反向轴	布尔值	false	如果设置为 true，则会从右向左绘制类别。默认是从左向右绘制。
节目类别	布尔值	true	如果为 true，则显示类别标签。如果为 false，则不会。
标题	字符串	无标题	要在图表上方显示的文字。
商品名 X	字符串	无标题	要在横轴下方显示的文字。
标题 Y	字符串	无标题	要按纵轴显示的文本。
标题颜色	字符串或对象	默认颜色	图表标题的颜色。可能的值是 backgroundColor 配置选项的值。
titleFontSize	number	自动	图表标题的字体大小（以像素为单位）。
tooltipFontSize	number	11	提示文字的字体大小。如果提示太小，无法使文本采用指定字体，则字体可能会缩小。
工具提示高度	number	60	提示的高度（以像素为单位）。提示的高度是固定的，绝不会根据文字的长度或字体大小缩小或缩小。但大于图表高度的 1/3 的图片会被剪裁。
提示宽度	number	120	提示的宽度，以像素为单位。提示宽度是固定的，绝不会根据文字的长度或字体大小缩小或缩小。但大于图表宽度的内容将被剪裁。
width	number	容器的宽度	图表的宽度（以像素为单位）。

方法

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

事件

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

数据政策

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