可视化数据网页开发Google Charts（十二）:折线图

最新推荐文章于 2022-08-20 12:05:46 发布

Lzs1998

最新推荐文章于 2022-08-20 12:05:46 发布

阅读量3.1k

点赞数 3

分类专栏：数据可视化开发数据可视化开发文章标签： Google chart 数据可视化

数据可视化开发同时被 2 个专栏收录

14 篇文章 1 订阅

订阅专栏

数据可视化开发

12 篇文章 0 订阅

订阅专栏

本文介绍了如何使用Google Charts库创建折线图，包括概述、如何弯曲线条、数据格式、配置选项、方法和事件。重点讲述了曲线平滑设置及新材料设计下的折线图特性，提供了更美观的视觉体验。

摘要由CSDN通过智能技术生成

Line Chart

概述

在浏览器中使用SVG或VML呈现的折线图。当鼠标悬停在点上时显示工具提示。

弯曲的线条

您可以通过设置curveType选项来平滑线条，生成此图表的代码如下。注意使用curveType: function选项:

  <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'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var options = {
          title: 'Company Performance',
          curveType: 'function',
          legend: { position: 'bottom' }
        };

        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="curve_chart" style="width: 900px; height: 500px"></div>
  </body>
</html>

创建材质线图

2014年，谷歌宣布了一项指导方针，旨在支持在谷歌平台上运行的所有属性和应用程序(如Android应用程序)的共同外观。我们称之为材料设计。我们将提供所有核心图表的“材料”版本;如果你喜欢它们的样子，欢迎使用它们。

创建材质折线图与创建我们现在称为“经典”折线图类似。您加载谷歌可视化API(虽然使用“line”包而不是“corechart”包)，定义数据表，然后创建一个对象(但是属于Google .charts类)。而不是google. visualiz.linechart)。

材质折线图比传统折线图有许多小的改进，包括改进的调色板、圆角、更清晰的标签格式、系列之间更紧密的默认间距、更柔和的网格线和标题(以及附加的副标题)。

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

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('number', 'Day');
      data.addColumn('number', 'Guardians of the Galaxy');
      data.addColumn('number', 'The Avengers');
      data.addColumn('number', 'Transformers: Age of Extinction');

      data.addRows([
        [1,  37.8, 80.8, 41.8],
        [2,  30.9, 69.5, 32.4],
        [3,  25.4,   57, 25.7],
        [4,  11.7, 18.8, 10.5],
        [5,  11.9, 17.6, 10.4],
        [6,   8.8, 13.6,  7.7],
        [7,   7.6, 12.3,  9.6],
        [8,  12.3, 29.2, 10.6],
        [9,  16.9, 42.9, 14.8],
        [10, 12.8, 30.9, 11.6],
        [11,  5.3,  7.9,  4.7],
        [12,  6.6,  8.4,  5.2],
        [13,  4.8,  6.3,  3.6],
        [14,  4.2,  6.2,  3.4]
      ]);

      var options = {
        chart: {
          title: 'Box Office Earnings in First Two Weeks of Opening',
          subtitle: 'in millions of dollars (USD)'
        },
        width: 900,
        height: 500
      };

      var chart = new google.charts.Line(document.getElementById('linechart_material'));

      chart.draw(data, google.charts.Line.convertOptions(options));
    }

Loading

google.charts.load 包的名称是“corechart”，可视化的类名是google. visualiz.linechart。

  google.charts.load("current", {packages: ["corechart"]});
  var visualization = new google.visualization.LineChart(container);

对于材质折线图，可以使用google.charts.load包名称为“line”，可视化的类名称为google.chart . line。

  google.charts.load("current", {packages: ["line"]});
  var visualization = new google.charts.Line(container);

Data Format

行:表中的每一行表示一组具有相同x轴位置的数据点。

Data Format（数据格式）

Rows: 每一行，在表中代表在相同X轴位置的一系列的数据点

Colunmns:

	Column 0	Column 1	...	Column N
作用:	X 轴组标签 (discrete) X 轴的值 (continuous)	线1 的值	...	线N的值
数据类型:	string (discrete) number, date, datetime or timeofday (continuous)	number	...	number
规则:	domain	data	...	data
可选项\|列规则:	annotation annotationText	annotation annotationText certainty emphasis interval scope tooltip	...	annotation annotationText certainty emphasis interval scope tooltip

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,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'	接收鼠标悬停时的实体类型，同时也对鼠标点击时哪个实体被选中，以及哪个数据表格元素与事件进行了关联具有影响。值可以是下面的其中一个： '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 of`hAxis.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.viewWindow`is 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: {width: '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.viewWindow`is 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(方法)

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

Lzs1998

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
可视化数据网页开发Google Charts（十二）:折线图

Line Chart概述在浏览器中使用SVG或VML呈现的折线图。当鼠标悬停在点上时显示工具提示。弯曲的线条您可以通过设置curveType选项来平滑线条，生成此图表的代码如下。注意使用curveType: function选项: &lt;html&gt; &lt;head&gt; &lt;script type="text/javascript" s...
复制链接

扫一扫

专栏目录