上头给的关于jqplot的问题暂时解决了,继续google charts。
google charts的实例很多,就以区域图(Geochart)为例~~
区域图(Geochart)是一个国家、大陆或者区域的地图,它有两种模式。
- region模式:在整个区域着色,如国家、省、州等。
- marker模式:根据指定的值使用缩放气泡标记指定的区域。
区域图使用SVG或VML展示。请注意,该地图暂时不能滚动或拖动。
region模式的例子
<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawRegionsMap); function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Germany', 200],
['United States', 300],
['Brazil', 400],
['Canada', 500],
['France', 600],
['RU', 700]
]); var options = {}; var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
效果如下
想要修改代码测试戳这里:代码编辑
marker模式的例子
<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawMarkersMap); function drawMarkersMap() {
var data = google.visualization.arrayToDataTable([
['City', 'Population', 'Area'],
['shanghai', 2761477, 1285.31],
['beijing', 1324110, 181.76],
['shenzhen', 959574, 117.27],
['yantai', 907563, 130.17],
['jinan', 655875, 158.9],
['guilin', 607906, 243.60],
['haerbin', 380181, 140.7],
['suzhou', 371282, 102.41],
['qiqihaer', 67370, 213.44],
['guanzhou', 52192, 43.43],
['shijiazhuang', 38262, 11]
]); var options = {
region: 'CN',
displayMode: 'markers',
colorAxis: {colors: ['green', 'blue']}
}; var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
效果如下
显示比例的marker模式的例子
通常情况下,将标记地图显示的最小标记值作为一个最小的点。如果你不是想显示比例的标记值(比方说,因为他们是百分比),可以使用sizeAxis选项来设置minValue和MaxValue。
<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawMarkersMap); function drawMarkersMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Population', 'Area Percentage'],
['France', 65700000, 50],
['Germany', 81890000, 27],
['Poland', 38540000, 23],
]); var options = {
sizeAxis: { minValue: 0, maxValue: 100 },
region: '155', // Western Europe
displayMode: 'markers',
colorAxis: {colors: ['#e7711c', '#4374e0']} // orange to blue
}; var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
效果如下
分析代码
绘制区域图加载了geochart包
google.load('visualization', '1', {'packages': ['geochart']});
区域图的可视化的类是google.visualization.GeoChart
var visualization = new google.visualization.GeoChart(container);
使用Region还是Marker模式这取决于使用的显示模式DataTable的格式
Region模式的格式
Region location [String, Required]
一个要高亮的区域。下列所有的格式都可以使用。你可以在不同的行使用不同的格式:
- 一个国家的名称(例如,"England"),或大写的 ISO-3166-1 编码或英文文本(例如,"GB"或 "United Kingdom")。
- 一个大写的 ISO-3166-2 地区代码或英文文本(例如,"US-NJ"或"New Jersey")。
- 一个大都市区码。这些都是用来指定各地区三位数地铁码,只支持美国码。注意,这和电话区号不一样。
- 任何region属性支持的值。
Region color [Number, Optional]
用一种颜色填充在此区域上,它来自于colorAxis.colors属性中指定的一个可选的数字列。如果此列不存在,所有地区将是相同的颜色。如果列存在,而且不是空值。值会相对的缩放到sizeAxis.minValue/sizeAxis.maxValue值上,或者在colorAxis.values属性中指定。
Marker模式的格式
列的数目取决于所使用的标记格式,以及其它可选列。
Marker location [Required]
第一列是一个特定的字符串地址(例如,"1600 Pennsylvania Ave")。或者,前2列是数字,其中第一列是纬度,而第二列是经度。
Marker color [Number, Optional]
用一种颜色填充在此标记上,它来自于colorAxis.colors属性中指定的一个可选的数字列。如果此列不存在,所有地区将是相同的颜色。如果列存在,而且不是空值。值会相对的缩放,或者在colorAxis.values属性中指定。
Marker size [Number, Optional]
用于指定标记大小,相对于其他标记尺寸可选数字列。如果此列不存在,使用前一列中的值(或默认的大小,如果也没有颜色列)。如果列存在,不允许使用空值。
配置选项
Name | Type | Default | Description |
---|---|---|---|
backgroundColor | string or object | white |
The background color for the main area of the chart. Can be either a simple HTML color string, for example: 图表主要区的域背景颜色。它是一个简单的HTML颜色字符串,例如: |
backgroundColor.fill | string | white |
The chart fill color, as an HTML color string. 图表填充颜色,一个HTML颜色字符串 |
backgroundColor.stroke | string | '#666' |
The color of the chart border, as an HTML color string. 图表边框的颜色,一个HTML颜色字符串。 |
backgroundColor.strokeWidth | number | 0 |
The border width, in pixels. 边框宽度,以像素为单位。 |
colorAxis | Object | null |
An object that specifies a mapping between color column values and colors or a gradient scale. To specify properties of this object, you can use object literal notation, as shown here: 一个对象,它指定列的颜色值和颜色或渐变刻度之间的映射。要指定此对象的属性,你可以使用对象字面量表示法,如下所示: {minValue: 0, colors: ['#FF0000', '#00FF00']} |
colorAxis.minValue | number | Minimum value of color column in chart data. |
If present, specifies a minimum value for chart color data. Color data values of this value and lower will be rendered as the first color in the 如果存在,指定图表的色彩数据的最小值。小于等于这个值的点的颜色将呈现为在colorAxis.colors中的第一种颜色。 |
colorAxis.maxValue | number | Maximum value of color column in chart data |
If present, specifies a maximum value for chart color data. Color data values of this value and higher will be rendered as the last color in the 如果存在,指定图表的色彩数据的最大值。大于等于这个值的点的颜色将呈现为在colorAxis.colors中的最后一种颜色。 |
colorAxis.values | array of numbers | null |
If present, controls how values are associated with colors. Each value is associated with the corresponding color in the 如果存在,控制数据的值是与颜色的关联。每个值是与在colorAxis.colors数组中对应的颜色相关联。这些数据值适用于图表颜色数据。着色是根据此处指定的值的梯度进行的。如果不指定这个选项的值等同于指定[ minValue, maxValue] |
colorAxis.colors | array of color strings | null |
Colors to assign to values in the visualization. An array of strings, where each element is an HTML color string, for example: 在可视化颜色分配给相应的值。它是一个字符串数组,其中每个元素都是一个HTML颜色字符串,例如:colorAxis: {colors:['red','#004411']}。你至少要有两个值,梯度将包括所有你的价值观,再加上计算出的中间值,第一种颜色作为最小值,最后一种颜色为最大值。 |
datalessRegionColor | string | 'F5F5F5' |
Colors to assign to regions with no associated data. 此颜色分配给没有数据关联的区域 |
displayMode | string | 'auto' |
Which type of map this is. The DataTable format must match the value specified. The following values are supported:
地图的类型,DataTable的格式化必须关联到特定的值。下面是支持的值:
|
enableRegionInteractivity | boolean | automatic |
If true, enable region interactivity, including focus and tool-tip elaboration on mouse hover, and region selection and firing of The default is true in region mode, and false in marker mode. 如果为true ,激活区域的交互,包括聚焦和鼠标悬停时的提示,区域选择和regionClick,select事件。 在region模式下,默认是true,在marker模式下,默认是false。 |
forceIFrame | boolean | false |
Draws the chart inside an inline frame. (Note that on IE8, this option is ignored; all IE8 charts are drawn in i-frames.) 绘制一个内嵌框架内的图表。 |
height | number | auto |
Height of the visualization, in pixels. The default height is 347 pixels, unless the 高度,以像素为单位。默认高度为347像素,除非指定宽度选项, keepAspectRatio设置为true,在这种情况下,高度据此计算。 |
keepAspectRatio | boolean | true |
If true, the map will be drawn at the largest size that can fit inside the chart area at its natural aspect ratio. If only one of the If false, the map will be stretched to the exact size of the chart as specified by the 如果为true ,则地图会在那可以在它的自然宽高比适合图表区域内的最大尺寸绘制。如果仅指定的宽度和高度选择之一,另一个将根据纵横比来计算。 如果为false ,该地图将被拉伸到所指定的宽度和高度选择图表的确切大小。 |
legend | Object / 'none' | null |
An object with members to configure various aspects of the legend, or 'none', if no legend should appear. To specify properties of this object, you can use object literal notation, as shown here: 一个有属性成员的对象或者'none',如果是'none',则不会显示。要指定这个对象的属性,你可以使用对象字面量表示法,如下所示: {textStyle: {color: 'blue', fontSize: 16}} |
legend.numberFormat | string | auto |
A format string for numeric labels. This is a subset of the ICU pattern set. For instance, 格式字符串的数字标签。这是ICU的图案集合的子集。例如,{numberFormat:'.##'}将值为10.666, 10.6, 和10的数据分别显示为"10.66", "10.6"和 "10.0"。 |
legend.textStyle | Object | {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>} |
An object that specifies the legend text style. The object has this format: 一个对象,它指定图例文本样式。对象具有以下格式: { The |
region | string | 'world' |
The area to display on the map. (Surrounding areas will be displayed as well.) Can be one of the following:
已经在上面写了,不再重复。 |
magnifyingGlass | Object | {enable: true, zoomFactor: 5.0} |
An object with members to configure various aspects of the magnifying glass. To specify properties of this object, you can use object literal notation, as shown here: 这里没看明白,也没有测试到效果,看懂的朋友请留言帮助一下~~ {enable: true, zoomFactor: 7.5} |
magnifyingGlass.enable | boolean | true |
If true, when the user lingers over a cluttered marker, a magnifiying glass will be opened. Note: this feature is not supported in browsers that do not support SVG, i.e. Internet Explorer version 8 or earlier. |
magnifyingGlass.zoomFactor | number | 5.0 | The zoom factor of the magnifying glass. Can be any number greater than 0. |
markerOpacity | number, 0.0–1.0 | 1.0 |
The opacity of the markers, where 0.0 is fully transparent and 1.0 is fully opaque. 透明度 |
resolution | string | 'countries' |
The resolution of the map borders. Choose one of the following values:
在地图边界的分辨率。选择下列值之一:
|
sizeAxis | Object | null | An object with members to configure how values are associated with bubble size. To specify properties of this object, you can use object literal notation, as shown here:
配置值是如何与气泡大小相关的。要指定此对象的属性,你可以使用对象字面量表示法,如下所示: {minValue: 0, maxSize: 20} |
sizeAxis.maxSize | number | 12 |
Maximum radius of the largest possible bubble, in pixels. 可能的最大气泡,以像素为单位的最大半径。 |
sizeAxis.maxValue | number | Maximum value of size column in chart data |
The size value (as appears in the chart data) to be mapped to 数据值(如显示在图表数据)将被映射到sizeAxis.maxSize 。较大的值将被映射到这个值。 |
sizeAxis.minSize | number | 3 |
Mininum radius of the smallest possible bubble, in pixels. 可能的最小气泡,以像素为单位的最小半径。 |
sizeAxis.minValue | number | Minimum value of size column in chart data |
The size value (as appears in the chart data) to be mapped to 数据值(如显示在图表数据)将被映射到sizeAxis.minSize。较小的值将被映射到这个值。 |
tooltip | Object | null |
An object with members to configure various tooltip elements. To specify properties of this object, you can use object literal notation, as shown here: 配置各种提示的元素。要指定此对象的属性,你可以使用对象字面量表示法,如下所示: {textStyle: {color: '#FF0000'}, showColorCode: true} |
tooltip.textStyle | Object | {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>} |
An object that specifies the tooltip text style. The object has this format: 一个对象,指定工具提示文本样式。对象具有以下格式: { The |
tooltip.trigger | string | 'focus' |
The user interaction that causes the tooltip to be displayed:
用户的交互,导致显示提示
|
width | number | auto |
Width of the visualization, in pixels. The default width is 556 pixels, unless the 宽度,以像素为单位。默认宽度为556像素,除非指定了高度选项, keepAspectRatio设置为true ,在这种情况下,宽度据此计算。 |
方法
Method | Return Type | Description |
---|---|---|
clearChart() |
none |
Clears the chart, and releases all of its allocated resources. 清除图表,并释放所有分配给它的资源。 |
draw(data, options) |
none |
Draws the chart. The chart accepts further method calls only after the 绘制图表。该图表将接受进一步的方法调用ready事件被触发。 |
getSelection() |
Array of selection elements |
Returns an array of the selected chart entities. Selectable entities are regions with an assigned value. A region correlates to a row in the data table (column index is null). For this chart, only one entity can be selected at any given moment. 返回选定的图表实体的数组。可选择的实体区域与分配的值。一个区域关联到一个行中的数据表(列索引为空)。对于该图中,只有一个实体可以在任何给定时刻进行选择。 |
setSelection() |
none |
Selects the specified chart entities. Cancels any previous selection. Selectable entities are regions with an assigned value. A region correlates to a row in the data table (column index is null). For this chart, only one entity can be selected at a time. 选择指定的表的实体。取消任何先前的选择。可选择的实体区域与分配的值。一个区域关联到一个行中的数据表(列索引为空) 。对于该图中,只有一个实体可以同时被选择。 |
事件
Name | Description | Properties |
---|---|---|
error |
Fired when an error occurs when attempting to render the chart. 当尝试展示图表时发生错误 |
id, message |
ready |
The chart is ready for external method calls. If you want to interact with the chart, and call methods after you draw it, you should set up a listener for this event before you call the 图表准备好了外部的方法调用。如果你想与图表进行交互,并调用方法,在你画它之后,你应该建立一个此事件去监听调用绘制方法,并触发事件。 |
None |
regionClick |
Called when a region is clicked. This will not be thrown for the specific country assigned in the 'region' option (if a specific country was listed). 一个区域被点击时调用。这将不被销毁在'region'选项中指定了的特定国家 。 |
An object with a single property, region , that is a string in ISO-3166 format describing the region clicked. |
select |
Fired when the user clicks a visual entity. To learn what has been selected, call 当用户点击一个可视化实体。要了解什么被选中,调用的 |
None |
如发现有错误,请留言~~