Google Chart Tools学习笔记 二 Area Chart
今天我们来学习一下，不同chart 的具体使用方法。本次的主角是Area Chart。
.png)
概述：
面积图（Area Chart)使用SVG 或者VML显示在浏览器中，可以在鼠标悬停时显示提示信息。
作用：Google
示例：
示例代码：
<html><head><scripttype="text/javascript"src="https://www.google.com/jsapi"></script><scripttype="text/javascript"> google.load("visualization","1",{packages:["corechart"]}); 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 options ={ title:'Company Performance', hAxis:{title:'Year', titleTextStyle:{color:'red'}}};var chart =new google.visualization.AreaChart(document.getElementById('chart_div')); chart.draw(data, options);}</script></head><body><divid="chart_div"style="width:900px;height:500px;"></div></body></html>
Loading（加载）
google.load加载的包名是“corechart”
google.load("visualization","1",{packages:["corechart"]});
可视化的类名是
google.visualization.AreaChart
var visualization =new google.visualization.AreaChart(container);
Warning: 不能同时加载 areachart和corechart包在同一页面的.
Data Format（数据格式）
Rows: 每一行，在表中代表在相同X轴位置的一系列的数据点
Colunmns:
| Column 0 | Column 1 | ... | Column N | |
|---|---|---|---|---|
| 作用: |
|
线1 的值 | ... | 线N的值 |
| 数据类型: |
|
number | ... | number |
| 规则: | domain | data | ... | data |
| 可选项|列规则: | ... |
Configuration Options（配置选项)
| Name | Type | Default | Description |
|---|---|---|---|
| animation.duration | number | 0 | 动画的持续时间，以毫秒为单位，详细用法请参考文档 animation documentation. |
| animation.easing | string | 'linear' | easing 定义的动画效果将被应用到动画上. 下面是一些可用的动画效果:
|
| areaOpacity | number, 0.0–1.0 | 0.3 | 面积图下面的彩色区域不透明度, 0.0是完全透明，1.0是完全不透明. 你也可以在 series 属性中，为每一个系列指定单独的透明度值. |
| axisTitlesPosition | string | 'out' | 轴标题相对于图表的位置, 支持下列值:
|
| backgroundColor | string or object | 'white' | 图表主区域的背景色，这个值可以是一个简单的HTML值，如 'red' or'#00cc00' 也可以是一个对象（这个对象具有下面三个属性） |
| backgroundColor.stroke | string | '#666' | 图表边框的颜色,可以是一个 HTML 颜色的字符串. |
| backgroundColor.strokeWidth | number | 0 | 边框的宽度, 单位是像素. |
| backgroundColor.fill | string | 'white' | 图表的填充色,可以是一个 HTML 颜色的字符串. |
| chartArea | Object | null | 对图表位置和大小进行配置的对象(图表被绘在什么地方, 不包括轴和图例). 支持两种格式: 数字或者是数字后跟%. 数字代表具体的像素; 数字后跟%代表百分表. 例如: chartArea:{left:20,top:0,width:"50%",height:"75%"} |
| chartArea.left | number or string | auto | 图表离左边框的距离. |
| chartArea.top | number or string | auto | 图表离上边框的距离. |
| chartArea.width | number or string | auto | 图表的区域的宽度. |
| chartArea.height | number or string | auto | 图表区域的高度. |
| colors | Array of strings | default colors | 被用到图表中元素的颜色. 一个数组格式的字符串, 每个元素都是一个HTML格式的字符串, 如:colors:['red','#004411']. |
| enableInteractivity | boolean | true | 是否抛出基于用户事件的交互，如果是false则图表将不抛出‘select’或者其它基于事件的交互（但ready和error事件仍然会抛出）， 也不会显示如鼠标悬停文字及其它基于用于输入而发生改变的效果。 |
| focusTarget | string | 'datum' | 接收鼠标悬停时的实体类型，同时也对鼠标点击时哪个实体被选中，以及哪个数据表格元素与事件进行了关联具有影响。值可以是下面的其中一个：
在‘category’中，提示框会显示所有类别的值，对于比较不同系列的值是有用的。 |
| fontSize | number | automatic | 当前图表中所有文本的默认字体大小，以像素为单元. 你可以为每一个图表元素重载它. |
| fontName | string | 'Arial' | 当前图表中所有文本的默认字体样式. 你可以为每一个图表元素重载它. |
| hAxis | Object | null | 用于配置水平轴元素的对象，它包含多个成员.你可以以如下方式指定对象属性: {title: 'Hello', titleTextStyle: {color: '#FF0000'}}
|
| hAxis.baseline | number | automatic | 水平轴的基准线. 此选项仅支持连续的轴 |
| hAxis.baselineColor | number | 'black' | 水平轴基准线的颜色. 可以是任何HTML颜色的字符串, 例如: 'red' or '#00cc00'.
此选项仅支持连续的轴
continuous axis.
|
| hAxis.direction | 1 or -1 | 1 | 水平轴值排列的方向. 指定 -1 则按倒序排列. |
| hAxis.format | string | auto | 数字或日期轴标签的格式化字符串. 针对数字标签, 这是一个 decimal 格式的子集ICU pattern set. 例如, 针对日期标签, 这是一个 date 格式的子集 ICU pattern set. 例如, 实际的格式来源于被加载的API,更详细的信息可以参考loading charts with a specific locale.
此选项仅支持连续的轴
continuous axis.
|
| hAxis.gridlines | Object | null | 一个可用于配置水平轴gridlines的对象. 你可以使用如下方式指定对象的值: {color: '#333', count: 4}
此选项仅支持连续的轴
continuous axis.
|
| hAxis.gridlines.color | string | '#CCC' | 图表区域内的网格线颜色，指定一个有效的HTML颜色字符串. |
| hAxis.gridlines.count | number | 5 | 图表区域内风格线的个数. 最小值为 2. |
| hAxis.minorGridlines | Object | null | 配置水平轴minor gridlines的对象，和 hAxis.gridlines 相似.
此选项仅支持连续的轴
continuous axis.
|
| hAxis.minorGridlines.color | string | A blend of the gridline and background colors | 图表区域内的水平 minor gridlines颜色，指定一个有效的HTML颜色字符串. |
| hAxis.minorGridlines.count | number | 0 | 两个网络线之间的minor gridlines数量. |
| hAxis.logScale | boolean | false | hAxis 属性要求所有水平刻度为正数. 设置为true则代表要求正数.
此选项仅支持连续的轴
continuous axis.
|
| hAxis.textPosition | string | 'out' | 水平轴文本相对于图面积的位置, 可用的值: 'out', 'in', 'none'. |
| hAxis.textStyle | Object | {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>} |
指定水平轴文本样式的对象. 格式如下: {color: <string>, fontName: <string>, fontSize: <number>}
|
| hAxis.title | string | null | hAxis 属性用于指定水平轴标题. |
| hAxis.titleTextStyle | Object | {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>} |
指定水平轴标题的文本样式. 格式如下: {color: <string>, fontName: <string>, fontSize: <number>}
color 可以是任何表示HTML颜色的字符串，如:
'red' 或
'#00cc00'. 可参见
fontName 和
fontSize.
|
| hAxis.allowContainerBoundaryTextCufoff | boolean | false | 如果为false,将隐藏外层标签，而不是允许它们被图表容器裁剪，如果为true，则允许裁剪. 此选项仅支持 |
| hAxis.slantedText | boolean | automatic | 如果为true，则以一定角度绘制水平轴的文本，以适应轴上有更多的文本; 如果为false，则直立绘制水平轴文本。默认是直立如果不合适则用斜体的文本。注意：此选项仅当 haxis.textposition设置为“out”（默认值）时有效。
此选项仅支持
discrete axis.
|
| hAxis.slantedTextAngle | number, 1—90 | 30 | 水平轴文本的角度，如果 hAxis.slantedText值是false则此属性被忽略，否则就是自动模式，由图表决定如何去绘制水平的文字。
此选项仅支持
discrete axis.
|
| hAxis.maxAlternation | number | 2 | 水平轴文字水平的最大数量。如果轴的文本标签变得过于拥挤，服务器可能会转向邻近的标签或向下，以适应标签紧密联系起来。此值指定要使用的水平数最多；服务器可以使用较少的水平，如果标签能适应不重叠。
此选项仅支持
discrete axis.
|
| hAxis.maxTextLines | number | auto | 文本标签允许的最大行数。如果标签太长可以跨多个行，默认情况下，受可用空间的高度限制。
此选项仅支持
discrete axis.
|
| hAxis.minTextSpacing | number | The value ofhAxis.textStyle.fontSize |
相邻的两个文本标签之间允许的最小水平间距,以像素为单位。如果标签间距太密，或者他们太长，间距可以低于该阈值，在这种情况下，一个标签整理措施将应用（例如，截断的标签或放弃一些他们）。
此选项仅支持
discrete axis.
|
| hAxis.showTextEvery | number | automatic | 有多少水平轴标签显示，其中1表示每个标签显示，2表示显示所有其他标签，等等。默认是试图让尽可能多的标签在不重叠的情况下都显示。
此选项仅支持
discrete axis.
|
| hAxis.maxValue | number | automatic | hAxis属性，指定网格线水平轴的最高高度。实际的网格线将是下面两个值中较大的一个：themaxvalue选项的值，或最高的数据值。 此选项仅支持 |
| hAxis.minValue | number | automatic | hAxis属性，指定水平轴的网格线的最低值。实际的网格线将是下面两个值中较低的值：theminvalue值，或最低的数据值。
此选项仅支持
continuous axis.
|
| hAxis.viewWindowMode | string | 'pretty' if hAxis.viewWindowis null, 'explicit' otherwise |
指定如何在图表区域显现水平轴的值，支持下面的字符串：
此选项仅支持
continuous axis.
|
| hAxis.viewWindow | Object | null | 指定水平轴裁剪范围 |
| hAxis.viewWindow.max | number | auto |
|
| hAxis.viewWindow.min | number | auto |
|
| height | number | height of the containing element | 图表高度，像素为单位. |
| isHtml | boolean | false | 如果设置为true, 使用HTML 显示(而不是SVG显示) 提示. 参考Customizing Tooltip Content 以获取更多信息. |
| isStacked | boolean | false | 如果设置为true, 系列元素则是可叠加的。 |
| legend | Object | null | 一个可配置图例各方面成员的对象，你可以使用以下格式为其属性赋值： |
| legend.position | string | 'right' | 图例的位置. 下面的值之一:
|
| legend.alignment | string | automatic | 图例的定位，下列值之一:
Start, center, and end are relative to the style -- vertical or horizontal -- of the legend. For example, in a 'right' legend, 'start' and 'end' are at the top and bottom, respectively; for a 'top' legend, 'start' and 'end' would be at the left and right of the area, respectively. 默认值取决于图例的位置，对于‘bottom’位置的图例， 默认值是‘center’，其它的默认值是‘start’. |
| legend.textStyle | Object | {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>} |
指定图例文本样式的对象，对象格式如下: {color: <string>, fontName: <string>, fontSize: <number>}
color 可以是任何表示HTML颜色的字符串，如:
'red' 或
'#00cc00'. 可参见
fontName 和
fontSize.
|
| lineWidth | number | 2 | 以像素为单位的数据线宽度，使用0可以隐藏所有线并且仅显示数据点，你可以针对每一个系列对此值进行重写，通过series 属性. |
| pointSize | number | 0 | 以像素为单位显示点的直径。使用0可以隐藏所有点，可以使用series 属性重载此值. |
| reverseCategories | boolean | false | 如果是true，则从右到左绘制序列，反之从左到右. |
| series | Array of objects, or object with nested objects | {} | 一个数组对象，每一项都描述图表中相应序列的格式。可以使用空对象{}为每个序列指定使用默认值。 如果一个序列或者值没有被指定，则全局值将被使用。每个对象都支持下面的属性：
You can specify either an array of objects, each of which applies to the series in the order given, or you can specify an object where each child has a numeric key indicating which series it applies to. For example, the following two declarations are identical, and declare the first series as black and absent from the legend, and the fourth as red and absent from the legend: series: [{color: 'black', visibleInLegend: false},{}, {}, {color: 'red', visibleInLegend: false}]
series: {0:{color: 'black', visibleInLegend: false}, 3:{color: 'red', visibleInLegend: false}}
|
| theme | string | null | A theme is a set of predefined option values that work together to achieve a specific chart behavior or visual effect. Currently only one theme is available:
|
| title | string | no title | 显示在图表上的文本 |
| titlePosition | string | 'out' | 图表标题位置支持以下值:
|
| titleTextStyle | Object | {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>} |
指定标题文本样式的对象，格式如下: {color: <string>, fontName: <string>, fontSize: <number>}
color 可以是任何表示HTML颜色的字符串，如:
'red' 或
'#00cc00'. 可参见
fontName 和
fontSize.
|
| tooltip | Object | null | 配置提示元素的对象. 以下面的方式指定值: {textStyle: {color: '#FF0000'}, showColorCode: true}
|
| tooltip.showColorCode | boolean | automatic | 如果为true, 在提示信息中显示彩色，当focusTarget设置为 'category'默认是 true , 否则默认值是 false. |
| tooltip.textStyle | Object | {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>} |
指定提示文本样式的对象，格式如下： {color: <string>, fontName: <string>, fontSize: <number>}
color 可以是任何表示HTML颜色的字符串，如:
'red' 或
'#00cc00'. 可参见
fontName 和
fontSize.
|
| tooltip.trigger | string | 'focus' | 用户交互时，工具提示显示
|
| vAxes | Array of object, or object with child objects | null | 指定单个垂直轴的属性，如果有多个垂直腊梅花，每一个子对象 是一个vAxis对象，并且能包含所有被vAxis支持的属性。 这些属性值会覆盖任何全局设置中相同的属性。 要为一个图表指定多个垂直轴，首先要定义一个新的轴，使用series.targetAxisIndex, 然后配置这个轴，使用vAxes。 下面的示例指定两个序列到右边的轴，并指定了一个自定义标题和文本样式给它：
属性也可以是一个对象或者数组，对象是一个对象集合，每一个都有一个数字标签，用于指定定义的轴--如上面显示的格式; 数据是一个对象集合，每个轴一个对象，例如，下面的数组定义了和上面一样的内容： vAxes:[
{}, // Nothing specified for axis 0
{title:'Losses',textStyle:{color: 'red'}} // Axis 1
]
|
| vAxis | Object | null | 配置垂直轴元素的对象，通过下面的方式赋值： {title: 'Hello', titleTextStyle: {color: '#FF0000'}}
|
| vAxis.baseline | number | automatic | vAxis的属性,指定垂直轴的baseline,如果基线大于最高的网格线或小于最低的网格线，它将被舍入到最接近的网格线。 |
| vAxis.baselineColor | number | 'black' | 指定垂直轴基线的颜色,可以是任何表示HTML颜色的字符串，如: 'red' 或 '#00cc00'. |
| vAxis.direction | 1 or -1 | 1 | 值沿垂直轴增长的方向.指定 -1 反转值. |
| vAxis.format | string | auto | 数字轴标签的格式字符串. ICU pattern set的一个子集.例如, {format:'#,###%'} will display values "1,000%", "750%", and "50%" for values 10, 7.5, and 0.5.
实际的格式来源于被加载的API,更详细的信息可以参考loading charts with a specific locale.
|
| vAxis.gridlines | Object | null | 配置垂直轴的对象，以下面方式指定属性值; {color: '#333', count: 4}
|
| vAxis.gridlines.color | string | '#CCC' | 垂直表格线在图表区的颜色,有效的HTML颜色字符串 |
| vAxis.gridlines.count | number | 5 | 图表区垂直表格线的个数，最小值是2. |
| vAxis.minorGridlines | Object | null | 配置垂直轴minor gridlines的对象，和 vAxis.gridlines 相似. |
| vAxis.minorGridlines.color | string | A blend of the gridline and background colors | 垂直minor gridlines的颜色，有效的HTML颜色字符串. |
| vAxis.minorGridlines.count | number | 0 | 垂直轴中两个正式gridlines之间 minor gridlines的数量。 |
| vAxis.logScale | boolean | false | 如果为true, makes the vertical axis a logarithmic scale Note: All values must be positive. |
| vAxis.textPosition | string | 'out' | Position of the vertical axis text, relative to the chart area. Supported values: 'out', 'in', 'none'. |
| vAxis.textStyle | Object | {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>} |
垂直轴文本样式对象: {color: <string>, fontName: <string>, fontSize: <number>}
color 可以是任何表示HTML颜色的字符串，如:
'red' 或
'#00cc00'. 可参见
fontName 和
fontSize.
|
| vAxis.title | string | no title | vAxis 指定垂直轴标题. |
| vAxis.titleTextStyle | Object | {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>} |
指定垂直轴标题样式 {color: <string>, fontName: <string>, fontSize: <number>}
color 可以是任何表示HTML颜色的字符串，如:
'red' 或
'#00cc00'. 可参见
fontName 和
fontSize.
|
| vAxis.maxValue | number | automatic | vAxis 指定最高的垂直轴的网格线的性质。实际的网格线将是更大的两个值：themaxvalue选项的值，或最高的数据值，圆形的到下一个更高的网格标记。 |
| vAxis.minValue | number | automatic | vAxis 指定最低的垂直轴的网格线属性。实际的网格线将是较低的两个值：theminvalue期权价值，或最低的数据值，向下舍入到下一个较低的网格标记。 |
| vAxis.viewWindowMode | string | 'pretty' if vAxis.viewWindowis null, 'explicit' otherwise |
Specifies how to scale the vertical axis to render the values within the chart area. The following string values are supported:
|
| vAxis.viewWindow | Object | null | 指定垂直轴裁剪范围 |
| vAxis.viewWindow.max | number | auto | The maximum vertical data value to render. Has an effect only if vAxis.viewWindowMode='explicit'. |
| vAxis.viewWindow.min | number | auto | The minimum horizontal data value to render. Has an effect only if vAxis.viewWindowMode='explicit'. |
| width | number | width of the containing element | 以像素为单位的图表宽度 |
Methods(方法)
| Method | Return Type | Description |
|---|---|---|
draw(data, options) |
none | 绘制表格.当 ready 事件后，可接受进一步的方法调用. Extended description. |
getSelection() |
Array of selection elements | 返回选择的图表实体数组. 可选择的实体是一个点，注释，图例和类别。点或者注释关联到数据表中的单元格， 图例实体关联到一列（行索引为null), 类别是关联到一行（列索引为null).对每一个图表同一时间只能有一个实体被选中. Extended description. |
setSelection() |
none | 选择指定的图表实体，取消任何之前选择的.可选择的实体是一个点，注释，图例和类别。点或者注释关联到数据表中的单元格， 图例实体关联到一列（行索引为null), 类别是关联到一行（列索引为null).对每一个图表同一时间只能有一个实体被选中. Extended description. |
clearChart() |
none | 清除图表释放所有资源. |
Events(事件)
| Name | Description | Properties |
|---|---|---|
animationfinish |
当动画完成时触发 | None |
error |
当尝试绘制图表出错时触发. | id, message |
onmouseover |
当用户鼠标移动到一个可见的实体上时触发.传回相关数据行和列的索引。 | row, column |
onmouseout |
当用户鼠标移出一个可见的实体上时触发.传回相关数据行和列的索引。 | row, column |
ready |
图表准备外部方法的调用.如果你需要与图表交互，在绘制完图后调用一个方法，你应该设置一个侦听事件在你调用draw方法之前并在这个事件之后调用. | None |
select |
当用户点击了一个可见实体后触发. 想知道什么被选择了可以调用 getSelection(). |
None |
Data Policy(数据策略)
所有代码和数据均在浏览器中处理，没有数据发送到服务器。