可视化图表:面积图(图片)

重要提示:Google 图表工具的“图片图表”部分自 2012 年 4 月 20 日起已正式弃用。根据我们的弃用政策,该政策将继续有效。

概览

使用 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 列高,依此类推。如果右侧列中比左侧列高一或两个点,则下一行可能部分遮挡住,但应该仍然可见。

除数字(可以是数字或字符串)外,所有数据都必须是数字类型。如果第一列是字符串类型,则第一列条目将在 X 上显示为标签;如果第一列是数字,则不会显示任何 X 轴标签。所有列(第一列除外)都必须是数字。列数没有限制。

配置选项

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

方法

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

事件

您可以进行注册,听听通用图片图表页面中介绍的事件。

数据政策

请参阅 Chart API 日志记录政策