• Google Chart Tools学习笔记 二 Area Chart

    今天我们来学习一下，不同chart 的具体使用方法。本次的主角是Area Chart。

    概述：
    面积图（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 定义的动画效果将被应用到动画上. 下面是一些可用的动画效果:
    • 'linear' - 以一定的速度变化.
    • 'in' - Ease in - 开始很慢，然后越来越快.
    • 'out' - Ease out - 开始很快，然后越来越慢.
    • 'inAndOut' - 先加速，再减速，也就是先由慢到快，再由快到慢.
    areaOpacity number, 0.0–1.0 0.3 面积图下面的彩色区域不透明度, 0.0是完全透明，1.0是完全不透明. 你也可以在 series 属性中，为每一个系列指定单独的透明度值.
    axisTitlesPosition string 'out'

    轴标题相对于图表的位置, 支持下列值:

    • in - 在图的内部画轴标题.
    • out - 在图的外部画轴标题（默认此值）.
    • none - 省图标题，即不显示.
    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,"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'

    接收鼠标悬停时的实体类型，同时也对鼠标点击时哪个实体被选中，以及哪个数据表格元素与事件进行了关联具有影响。值可以是下面的其中一个：

    • 'datum' - 专注于一个单一的数据点，与数据表中的一个单元格进行关联.
    • 'category' -专注于主要数据轴的一系列数据，关联到数据表中的一行.

    在‘category’中，提示框会显示所有类别的值，对于比较不同系列的值是有用的。
    fontSize number automatic 当前图表中所有文本的默认字体大小，以像素为单元. 你可以为每一个图表元素重载它.
    fontName string 'Arial' 当前图表中所有文本的默认字体样式. 你可以为每一个图表元素重载它.
    hAxis Object null

    用于配置水平轴元素的对象，它包含多个成员.你可以以如下方式指定对象属性:

     {title: 'Hello',  titleTextStyle: {color: '#FF0000'}}
    hAxis.baseline number automatic 水平轴的基准线.

    此选项仅支持连续的轴 continuous axis.
    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. 例如, {format:'#,###%'} 则当值为 10, 7.5, 和 0.5时,显示为 "1,000%", "750%", 和"50%".

    针对日期标签, 这是一个 date 格式的子集 ICU pattern set. 例如, {format:'MMM d, y'} 则当值为 July first in 2011时,显示为 "Jul 1, 2011".

    实际的格式来源于被加载的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>}

    color 可以是任何表示HTML颜色的字符串，如: 'red' 或 '#00cc00'. 可参见 fontName 和fontSize.
    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，则允许裁剪.

    此选项仅支持 discrete axis.
    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选项的值，或最高的数据值。

    此选项仅支持 continuous axis.
    hAxis.minValue number automatic hAxis属性，指定水平轴的网格线的最低值。实际的网格线将是下面两个值中较低的值：theminvalue值，或最低的数据值。

     

    此选项仅支持  continuous axis.
    hAxis.viewWindowMode string 'pretty' if hAxis.viewWindowis null, 'explicit' otherwise

    指定如何在图表区域显现水平轴的值，支持下面的字符串：

    • 'pretty' - 计算水平值以使.最大值和最小数据值在图表左右范围内呈现。
    • 'maximized' - 计算水平值以使.最大值和最小数据值在图表左右呈现。.
    • 'explicit' - 指定左右图表区域计算值. 数据值超出此范围的会被截断. 你必须指定一个 hAxis.viewWindow 决定最大值和最小值如何显示.

     

    此选项仅支持  continuous axis.
    hAxis.viewWindow Object null 指定水平轴裁剪范围
    hAxis.viewWindow.max number auto
    • 对于 continuous axis:
      最大水平数据值的展示有影响仅当hAxis.viewWindowMode='explicit'.
    • 对于 discrete axis:
      The zero-based row index where the cropping window ends. Data points at this index and higher will be cropped out. In conjunction with vAxis.viewWindowMode.min, it defines a half-opened range [min, max) that denotes the element indices to display. In other words, every index such that min <= index < max will be displayed.
    hAxis.viewWindow.min number auto
    • 对于 continuous axis:
      最小水平数据值的展示有影响仅当hAxis.viewWindowMode='explicit'.
    • 对于 discrete axis:
      The zero-based row index where the cropping window begins. Data points at indices lower than this will be cropped out. In conjunction with vAxis.viewWindowMode.max, it defines a half-opened range [min, max) that denotes the element indices to display. In other words, every index such that min <= index < max will be displayed.
    height number height of the containing element 图表高度，像素为单位.
    isHtml boolean false 如果设置为true, 使用HTML 显示(而不是SVG显示) 提示. 参考Customizing Tooltip Content 以获取更多信息.
    isStacked boolean false 如果设置为true, 系列元素则是可叠加的。
    legend Object null

    一个可配置图例各方面成员的对象，你可以使用以下格式为其属性赋值：

    {position: 'top', textStyle: {color: 'blue', fontSize: 16}}
    legend.position string 'right' 图例的位置. 下面的值之一:
    • 'right' - 在图表右边.与 vAxes 属性不兼容.
    • 'top' - 图表上方.
    • 'bottom' - 图表下方.
    • 'in' -图表里的左上角
    • 'none' - 不显示图例.
    legend.alignment string automatic 图例的定位，下列值之一:
    • 'start' - Aligned to the start of the area allocated for the legend.
    • 'center' - Centered in the area allocated for the legend.
    • 'end' - Aligned to the end of the area allocated for the legend.

    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，则从右到左绘制序列，反之从左到右.

    此选项仅支持 discrete major axis.
    series Array of objects, or object with nested objects {}

    一个数组对象，每一项都描述图表中相应序列的格式。可以使用空对象{}为每个序列指定使用默认值。 如果一个序列或者值没有被指定，则全局值将被使用。每个对象都支持下面的属性：

    • color - 当前序列使用的颜色. 指定有效的HTML color 字符串.
    • targetAxisIndex - Which axis to assign this series to, where 0 is the default axis, and 1 is the opposite axis. Default value is 0; set to 1 to define a chart where different series are rendered against different axes. At least one series much be allocated to the default axis. You can define a different scale for different axes.
    • pointSize - 重载全局属性 pointSize的值，为当前序列.
    • lineWidth - 重载全局属性 lineWidth的值，为当前序列.
    • areaOpacity - 重载全局属性 areaOpacity的值，为当前序列.
    • visibleInLegend - bool值，true意味此序列有一个图例实体，反之则没有，默认值是

    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:
    • 'maximized' - Maximizes the area of the chart, and draws the legend and all of the labels inside the chart area. Sets the following options: 
      chartArea: { '100%', height: '100%'},
legend: {position: 'in'},
titlePosition: 'in', axisTitlesPosition: 'in',
hAxis: {textPosition: 'in'}, vAxis: {textPosition: 'in'}
    title string no title 显示在图表上的文本
    titlePosition string 'out'

    图表标题位置支持以下值:

    • in - 图表区域内.
    • out - 图表区域外.
    • none - 省略标题.
    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'

    用户交互时，工具提示显示

    • 'focus' - 当用户移到元素上时显示提示.
    • 'none' - 不显示提示.
    vAxes Array of object, or object with child objects null

    指定单个垂直轴的属性，如果有多个垂直腊梅花，每一个子对象 是一个vAxis对象，并且能包含所有被vAxis支持的属性。 这些属性值会覆盖任何全局设置中相同的属性。

    要为一个图表指定多个垂直轴，首先要定义一个新的轴，使用series.targetAxisIndex, 然后配置这个轴，使用vAxes。 下面的示例指定两个序列到右边的轴，并指定了一个自定义标题和文本样式给它：

    series:{2:{targetAxisIndex:1}}, vAxes:{1:{title:'Losses',textStyle:{color: 'red'}}}

    属性也可以是一个对象或者数组，对象是一个对象集合，每一个都有一个数字标签，用于指定定义的轴--如上面显示的格式; 数据是一个对象集合，每个轴一个对象，例如，下面的数组定义了和上面一样的内容：

    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:

    • 'pretty' - Scale the vertical values so that the maximum and minimum data values are rendered a bit inside the top and bottom of the chart area.
    • 'maximized' - Scale the vertical values so that the maximum and minimum data values touch the top and bottom of the chart area.
    • 'explicit' - Specify the top and bottom scale values of the chart area. Data values outside these values will be cropped. You must specify a vAxis.viewWindow object describing the maximum and minimum values to show.
    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(方法)

    MethodReturn TypeDescription
    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(事件)

    NameDescriptionProperties
    animationfinish 当动画完成时触发 None
    error 当尝试绘制图表出错时触发. id, message
    onmouseover 当用户鼠标移动到一个可见的实体上时触发.传回相关数据行和列的索引。 row, column
    onmouseout 当用户鼠标移出一个可见的实体上时触发.传回相关数据行和列的索引。 row, column
    ready 图表准备外部方法的调用.如果你需要与图表交互，在绘制完图后调用一个方法，你应该设置一个侦听事件在你调用draw方法之前并在这个事件之后调用. None
    select 当用户点击了一个可见实体后触发. 想知道什么被选择了可以调用 getSelection(). None

    Data Policy(数据策略)

    所有代码和数据均在浏览器中处理，没有数据发送到服务器。
  • 相关阅读:
    Qt 4.7
    CMake记录（一）
    CMake记录（二）
    a critical review of preetham skylight model 笔记
    在webform中清空多个控件的值的简单方法
    Java学习网站 [摘自互联网]
    关于Google API的学习
    DataGrid连接的
    http://www.dnc.com.cn
    在DataGrid中显示数据库中的图片
  • 原文地址：https://www.cnblogs.com/javawebsoa/p/3052233.html
Copyright © 2020-2023  润新知