此页面由 Cloud Translation API 翻译。

可视化图表：面积图（图片）

重要提示：Google 图表工具的“图片图表”部分自 2012 年 4 月 20 日起已被正式弃用。根据我们的弃用政策，该 API 仍可继续使用。

Overview
示例
正在加载
数据格式
配置选项
方法
事件
数据政策

概览

使用 Google Charts API 以图像形式渲染的面积图。

示例

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["imageareachart"]});
      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 chart = new google.visualization.ImageAreaChart(document.getElementById('chart_div'));

        chart.draw(data, {width: 400, height: 240, min: 300, max: 1400, title: 'Yearly Expenses and Sales'});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

正在加载

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

  google.charts.load('current', {packages: ['imageareachart']});

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

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

数据格式

每一列代表图表中的一条线；每个条目是同一 X 轴点处的 Y 轴值，可视化结果会用一条直线将它们连接起来，然后填充该线下方的区域。

数据按列处理，从第 0 列开始，按列递增。您应先写出最高线，然后再写较低的线，因为如果先绘制较低的线，则较高的线会绘制并隐藏所有较低的线。因此，请尝试使第 1 列的数据点高于第 2 列，使第 2 列的数据点高于第 3 列，依此类推。如果右列比左列高 1-2 个点，那么下一行可能会部分遮挡，但下线仍应可见。

所有数据都必须为数字类型，但第一种类型可以是数字或字符串。如果第一列是字符串类型，则第一列条目将在 X 上显示为标签；如果第一列是数字，则不会显示 X 轴标签。所有列（第一列除外）都必须是数字。列数无限制。

配置选项

名称	类型	默认	说明
backgroundColor	string	'#FFFFFF'（白色）	图表的背景颜色，采用 Chart API 颜色格式。
颜色	数组<字符串>	自动选择	用于为每个数据系列指定特定的颜色。颜色以 Chart API 颜色格式指定。颜色 i 用于数据列 i；如果数据列数多于颜色，则换行到开头。如果一种颜色的变体适用于所有系列，请改用 `color` 选项。
enableEvents	boolean	false	使图表抛出用户触发的事件，例如点击或鼠标悬停。仅支持特定图表类型。请参阅下面的“事件”。
高度	number	容器高度	图表的高度（以像素为单位）。
传奇	string	“right”	图例的位置和类型。可以是以下某一项： “right”- 位于图表右侧。 'left' - 位于图表左侧。 “top”- 图表上方。 'bottom' - 图表下方。 “none”- 不显示图例。
max	number	自动	要在 Y 轴中显示的最大值。
分钟	number	自动	要在 Y 轴中显示的最小值。
showCategoryLabels	boolean	true	如果设为 false，系统会移除类别的标签（X 轴标签）。
showValueLabels	boolean	true	如果设为 false，系统会移除值的标签（Y 轴标签）。
标题	string	无标题	要在图表上方显示的文本。
valueLabelsInterval	number	自动选择	显示值轴标签的时间间隔。例如，如果 `min` 为 0、`max` 为 100 且 `valueLabelsInterval` 为 20，则图表将在 (0, 20, 40, 60, 80 100) 处显示轴标签。
宽度	number	容器宽度	图表的宽度（以像素为单位）。

方法

方法	返回值类型	说明
`draw(data, options)`	无	绘制图表。

事件

您可以注册以监听通用图片图表页面中所述的事件。

数据政策

请参阅 Chart API 日志记录政策。