上头给的关于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: 'red' or '#00cc00', or an object with the following properties.

图表主要区的域背景颜色。它是一个简单的HTML颜色字符串，例如：'red'或'#00cc00'，或者一个具有以下属性的对象。
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 range.

如果存在，指定图表的色彩数据的最小值。小于等于这个值的点的颜色将呈现为在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 range.

如果存在，指定图表的色彩数据的最大值。大于等于这个值的点的颜色将呈现为在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 array. These values apply to the chart color data. Coloring is done according to a gradient of the values specified here. Not specifying a value for this option is equivalent to specifying [minValue, maxValue].

如果存在，控制数据的值是与颜色的关联。每个值是与在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: colorAxis: {colors:['red','#004411']}. You must have at least two values; the gradient will include all your values, plus calculated intermediary values, with the first color as the smallest value, and the last color as the highest.

在可视化颜色分配给相应的值。它是一个字符串数组，其中每个元素都是一个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:

  • 'auto' - Choose based on the format of the DataTable.
  • 'regions' - This is a region map
  • 'markers' - This is a marker map.

地图的类型，DataTable的格式化必须关联到特定的值。下面是支持的值：

  • 'auto' - 基于数据表的格式选择
  • 'regions' - 区域图
  • 'markers' - 标记图
enableRegionInteractivity boolean automatic

If true, enable region interactivity, including focus and tool-tip elaboration on mouse hover, and region selection and firing of regionClick and select events on mouse click.

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 width option is specified and keepAspectRatio is set to true - in which case the height is calculated accordingly.

高度，以像素为单位。默认高度为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 width and height options is specified, the other one will be calculated according to the aspect ratio.

If false, the map will be stretched to the exact size of the chart as specified by the width and height options.

如果为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, {numberFormat:'.##'} will display values "10.66", "10.6", and "10.0" for values 10.666, 10.6, and 10.

格式字符串的数字标签。这是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:

一个对象，它指定图例文本样式。对象具有以下格式：

{

  color: <string>,

  fontName: <string>,

  fontSize: <number>,

  bold: <boolean>,

  italic: <boolean>

}

The color can be any HTML color string, for example: 'red' or '#00cc00'. Also see fontName and fontSize.
region string 'world'

The area to display on the map. (Surrounding areas will be displayed as well.) Can be one of the following:

  • 'world' - A map of the entire world.
  • A continent or a sub-continent, specified by its 3-digit code, e.g., '011' for Western Africa.
  • A country, specified by its ISO 3166-1 alpha-2 code, e.g., 'AU' for Australia.
  • A state in the United States, specified by its ISO 3166-2:US code, e.g., 'US-AL' for Alabama. Note that the resolution option must be set to either 'provinces' or 'metros'.

已经在上面写了，不再重复。
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:

  • 'countries' - Supported for all regions, except for US state regions.
  • 'provinces' - Supported only for country regions and US state regions. Not supported for all countries; please test a country to see whether this option is supported.
  • 'metros' - Supported for the US country region and US state regions only.

在地图边界的分辨率。选择下列值之一：

  • 'countries' - 可用于所有地区，除了美国地区。
  • 'provinces' - 只支持国家和美国地区。不支持所有的国家;请测试一个国家，看看是否支持这个选项。
  • 'metros' - 只支持美国
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. Larger values will be cropped to this value.

数据值（如显示在图表数据）将被映射到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. Smaller values will be cropped to this value.

数据值（如显示在图表数据）将被映射到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:

一个对象，指定工具提示文本样式。对象具有以下格式：

{

  color: <string>,

  fontName: <string>,

  fontSize: <number>,

  bold: <boolean>,

  italic: <boolean>

}

The color can be any HTML color string, for example: 'red' or '#00cc00'. Also see fontName and fontSize.
tooltip.trigger string 'focus'

The user interaction that causes the tooltip to be displayed:

  • 'focus' - The tooltip will be displayed when the user hovers over an element.
  • 'none' - The tooltip will not be displayed.

用户的交互，导致显示提示

  • 'focus' - 当用户将鼠标悬停在某个元素时，提示会显示出来。
  • 'none' - 工具提示将不会显示。
width number auto

Width of the visualization, in pixels. The default width is 556 pixels, unless the height option is specified and keepAspectRatio is set to true - in which case the width is calculated accordingly.

宽度，以像素为单位。默认宽度为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 event is fired. Extended description.

绘制图表。该图表将接受进一步的方法调用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. Extended description.

返回选定的图表实体的数组。可选择的实体区域与分配的值。一个区域关联到一个行中的数据表（列索引为空）。对于该图中，只有一个实体可以在任何给定时刻进行选择。
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. Extended description.

选择指定的表的实体。取消任何先前的选择。可选择的实体区域与分配的值。一个区域关联到一个行中的数据表（列索引为空） 。对于该图中，只有一个实体可以同时被选择。

事件

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 draw method, and call them only after the event was fired.

图表准备好了外部的方法调用。如果你想与图表进行交互，并调用方法，在你画它之后，你应该建立一个此事件去监听调用绘制方法，并触发事件。

 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 getSelection().

当用户点击一个可视化实体。要了解什么被选中，调用的getSelection()方法

 None

如发现有错误，请留言~~

数据可视化(6)--Google Charts实例的更多相关文章

  1. 数据可视化(3)--Google Charts

    Google Chart API 是谷歌提供的一项动态生成图表的服务.你可以随时自定义图表,以适应网站的外观和感觉.图表使用HTML5/SVG技术提供给iPhone手机, iPad和Android的跨 ...

  2. 数据可视化(5)--jqplot经典实例

    本来想把实例也写到上篇博客里,最后发现太长了,拆成两篇博客了. 实例来源于官方文档:http://www.jqplot.com/tests/ 这篇博客主要是翻译了官方文档关于经典实例的解说,并在相应代 ...

  3. 【Matplotlib】数据可视化实例分析

    数据可视化实例分析 作者:白宁超 2017年7月19日09:09:07 摘要:数据可视化主要旨在借助于图形化手段,清晰有效地传达与沟通信息.但是,这并不就意味着数据可视化就一定因为要实现其功能用途而令 ...

  4. 【Data Visual】一文搞懂matplotlib数据可视化

    一文搞懂matplotlib数据可视化 作者:白宁超 2017年7月19日09:09:07 摘要:数据可视化主要旨在借助于图形化手段,清晰有效地传达与沟通信息.但是,这并不就意味着数据可视化就一定因为 ...

  5. 【时序数据库InfluxDB】Windows环境下配置InfluxDB+数据可视化，以及使用 C#进行简单操作的代码实例

    前言:如题.直接上手撸,附带各种截图,就不做介绍了. 1.influxDB的官网下载地址  https://portal.influxdata.com/downloads/ 打开以后,如下图所示,可以 ...

  6. 2018年最佳JavaScript数据可视化和图表库

    现在有很多图表库,但哪一个最好用?这可能取决于许多因素,如业务需求,数据类型,图表本身的目的等等.在本文中,每个JavaScript图表库将与一些关键因素进行比较,包括图表类型,商业或免费和开源状态. ...

  7. Web 数据可视化

    /***************************************************************************************** * Web 数据可 ...

  8. jQuery插件-jgcharts实现Javascript制作Google Charts

    from:http://www.zz68.net/program/Ajax/2010/0415/1992.html jgcharts是一个基于jQuery的非常经典的Google Charts图表制作 ...

  9. 4款开源免费的数据可视化JavaScript库

    概述:交互式数据可视化在很大程度上取决于JavaScript库的任务能力.在这篇文章中,我们将看看四个JavaScript库:D3,InfoVis,Processing.js,和Recline.js. ...

随机推荐

  1. JSP内置对象总结

    前几天学习了javaee中的jsp(Java Server Pages),即java服务器页面,其实就是在html里面写java代码. 一.概述前言 在总结九大对象之前,有必要先搞清楚几个概念:请求, ...

  2. 一步一步写miscdevice的驱动模块

    (本文使用的平台为友善tiny210SDKv2) 对于linux的驱动程序来说,主要分为三种:miscdevice.platform_device.platform_driver . 这三个结构体关系 ...

  3. 用CSS box-shadow画画

    原理:找一幅画,每隔5 pixel取一个点的RGB,在CSS中用box-shadow描绘出这个点 Python from PIL import Image if __name__ == '__main ...

  4. [leetcode]Find Minimum in Rotated Sorted Array @ Python

    原题地址:https://oj.leetcode.com/problems/find-minimum-in-rotated-sorted-array/ 解题思路:话说leetcode上面的二分查找题目 ...

  5. Java关键字--static

    在Java中,将关键字static分为三部分进行讨论,分别为Java静态变量.Java静态方法.Java静态类 Java Static Variables Java instance variable ...

  6. Objective-c中定义成员变量

    ios定义成员变量的方法: 如果只是内部访问,完全可以直接用_xxx(下划线),无需自己定义,编译器会自动生成 如果需要外部访问这个变量,可以用 @property xxx ; @synthesize ...

  7. 加快Bitmap的访问速度

    引言 在对Bitmap图片操作的时候,有时需要用到获取或设置像素颜色方法:GetPixel 和 SetPixel, 如果直接对这两个方法进行操作的话速度很慢,这里我们可以通过把数据提取出来操作,然后操 ...

  8. Oracle 数据同步系列--触发器

    现在随着项目集成的越来越深入,异构的数据多起来,数据同步的场景也用的多起来,我甚至在考虑是否忽悠用户上Oracle GoldenGate了,这样就可以不用考虑采用哪种同步方案了. 简单的介绍一下我们数 ...

  9. javascript不用new关键字创建对象示例

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  10. 【AI】蒙特卡洛搜索树

    http://jeffbradberry.com/posts/2015/09/intro-to-monte-carlo-tree-search/ 蒙特卡洛方法与随机优化: http://iacs-co ...