可视化数据网页开发Google Charts（七）：面积图-CSDN博客

<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([
          ['Year', 'Sales', 'Expenses'],
          ['2013',  1000,      400],
          ['2014',  1170,      460],
          ['2015',  660,       1120],
          ['2016',  1030,      540]
        ]);

        var options = {
          title: 'Company Performance',
          hAxis: {title: 'Year',  titleTextStyle: {color: '#333'}},
          vAxis: {minValue: 0}
        };

        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 100%; height: 500px;"></div>
  </body>
</html>

默认情况下，区域图将一个系列绘制在另一个之上。相反，您可以将它们堆叠在一起，以便对每个x值的数据值求和。在区域图中，每个系列的值总是相对于前一个系列的值进行堆叠。将负值和正值混合在一起将导致区域重叠。需要注意的是，插值图选项不能用于叠加区域图。

左边isStacked设置为false(默认值)，右边设置为true

注意，图例条目的顺序不同。在第二张堆叠图中，将顺序颠倒，将series 0放在底部，以便更好地对应series元素的堆叠，使图例与数据对应。

堆叠区域图也支持100%堆叠，其中每个域值上的元素堆叠被重新标度，使它们加起来达到100%。它的选项是isStacked: 'percent'，将每个值格式化为100%的百分比;'isStacked: 'relative''将每个值格式化为1的分数。还有一个isStacked: 'absolute'选项，它在功能上等价于isStacked:true。

Loading

The google.charts.load package name is "corechart".

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

The visualization's class name is google.visualization.AreaChart.

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

Data Format

Rows: Each row in the table represents a set of data points with the same x-axis location.

Columns:

	Column 0	Column 1	...	Column N
Purpose:	X-axis group labels (discrete) X-axis values (continuous)	Line 1 values	...	Line N values
Data Type:	string (discrete) number, date, datetime, or timeofday (continuous)	number	...	number
Role:	domain	data	...	data
Optional column roles:	annotation annotationText	annotation annotationText certainty emphasis interval scope style tooltip	...	annotation annotationText certainty emphasis interval scope style tooltip

Configuration Options

Name
aggregationTarget	How multiple data selections are rolled up into tooltips: `'category'`: Group selected data by x-value. `'series'`: Group selected data by series. `'auto'`: Group selected data by x-value if all selections have the same x-value, and by series otherwise. `'none'`: Show only one tooltip per selection. `aggregationTarget` will often be used in tandem with `selectionMode` and `tooltip.trigger`, e.g.: var options = { // Allow multiple // simultaneous selections. selectionMode: 'multiple', // Trigger tooltips // on selections. tooltip: {trigger: 'selection'}, // Group selections // by x-value. aggregationTarget: 'category', }; Type: string Default: 'auto'
animation.duration	The duration of the animation, in milliseconds. For details, see the animation documentation. Type: number Default: 0
animation.easing	The easing function applied to the animation. The following options are available: 'linear' - Constant speed. 'in' - Ease in - Start slow and speed up. 'out' - Ease out - Start fast and slow down. 'inAndOut' - Ease in and out - Start slow, speed up, then slow down. Type: string Default: 'linear'
animation.startup	Determines if the chart will animate on the initial draw. If `true`, the chart will start at the baseline and animate to its final state. Type: boolean Default false
annotations.boxStyle	For charts that support annotations, the `annotations.boxStyle` object controls the appearance of the boxes surrounding annotations: var options = { annotations: { boxStyle: { // Color of the box outline. stroke: '#888', // Thickness of the box outline. strokeWidth: 1, // x-radius of the corner curvature. rx: 10, // y-radius of the corner curvature. ry: 10, // Attributes for linear gradient fill. gradient: { // Start color for gradient. color1: '#fbf6a7', // Finish color for gradient. color2: '#33b679', // Where on the boundary to start and // end the color1/color2 gradient, // relative to the upper left corner // of the boundary. x1: '0%', y1: '0%', x2: '100%', y2: '100%', // If true, the boundary for x1, // y1, x2, and y2 is the box. If // false, it's the entire chart. useObjectBoundingBoxUnits: true } } } }; This option is currently supported for area, bar, column, combo, line, and scatter charts. It is not supported by the Annotation Chart. Type: object Default: null
annotations.datum	For charts that support annotations, the `annotations.datum` object lets you override Google Charts' choice for annotations provided for individual data elements (such as values displayed with each bar on a bar chart). You can control the color with `annotations.datum.stem.color`, the stem length with `annotations.datum.stem.length`, and the style with `annotations.datum.style`. Type: object Default: color is "black"; length is 12; style is "point".
annotations.domain	For charts that support annotations, the `annotations.domain` object lets you override Google Charts' choice for annotations provided for a domain (the major axis of the chart, such as the X axis on a typical line chart). You can control the color with `annotations.domain.stem.color`, the stem length with `annotations.domain.stem.length`, and the style with `annotations.domain.style`. Type: object Default: color is "black"; length is 5; style is "point".
annotations.highContrast	For charts that support annotations, the `annotations.highContrast` boolean lets you override Google Charts' choice of the annotation color. By default, `annotations.highContrast` is true, which causes Charts to select an annotation color with good contrast: light colors on dark backgrounds, and dark on light. If you set `annotations.highContrast` to false and don't specify your own annotation color, Google Charts will use the default series color for the annotation: Type: boolean Default: true
annotations.stem	For charts that support annotations, the `annotations.stem` object lets you override Google Charts' choice for the stem style. You can control color with `annotations.stem.color` and the stem length with `annotations.stem.length`. Note that the stem length option has no effect on annotations with style `'line'`: for `'line'` datum annotations, the stem length is always the same as the text, and for `'line'` domain annotations, the stem extends across the entire chart. Type: object Default: color is "black"; length is 5 for domain annotations and 12 for datum annotations.
annotations.style	For charts that support annotations, the `annotations.style` option lets you override Google Charts' choice of the annotation type. It can be either `'line'` or `'point'`. Type: string Default: 'point'
annotations.textStyle	For charts that support annotations, the `annotations.textStyle` object controls the appearance of the text of the annotation: var options = { annotations: { textStyle: { fontName: 'Times-Roman', fontSize: 18, bold: true, italic: true, // The color of the text. color: '#871b47', // The color of the text outline. auraColor: '#d799ae', // The transparency of the text. opacity: 0.8 } } }; This option is currently supported for area, bar, column, combo, line, and scatter charts. It is not supported by the Annotation Chart . Type: object Default: null
areaOpacity	The default opacity of the colored area under an area chart series, where 0.0 is fully transparent and 1.0 is fully opaque. To specify opacity for an individual series, set the areaOpacity value in the `series` property. Type: number, 0.0–1.0 Default: 0.3
axisTitlesPosition	Where to place the axis titles, compared to the chart area. Supported values: in - Draw the axis titles inside the chart area. out - Draw the axis titles outside the chart area. none - Omit the axis titles. Type: string Default: 'out'
backgroundColor	The background color for the main area of the chart. Can be either a simple HTML color string, for example: `'red'` or `'#00cc00'`, or an object with the following properties. Type: string or object Default: 'white'
backgroundColor.stroke	The color of the chart border, as an HTML color string. Type: string Default: '#666'
backgroundColor.strokeWidth	The border width, in pixels. Type: number Default: 0
backgroundColor.fill	The chart fill color, as an HTML color string. Type: string Default: 'white'
chartArea	An object with members to configure the placement and size of the chart area (where the chart itself is drawn, excluding axis and legends). Two formats are supported: a number, or a number followed by %. A simple number is a value in pixels; a number followed by % is a percentage. Example: `chartArea:{left:20,top:0,width:'50%',height:'75%'}` Type: object Default: null
chartArea.backgroundColor	Chart area background color. When a string is used, it can be either a hex string (e.g., '#fdc') or an English color name. When an object is used, the following properties can be provided: `stroke`: the color, provided as a hex string or English color name. `strokeWidth`: if provided, draws a border around the chart area of the given width (and with the color of `stroke`). Type: string or object Default: 'white'
chartArea.left	How far to draw the chart from the left border. Type: number