数据可视化(6)--Google Charts实例

上头给的关于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]

用于指定标记大小，相对于其他标记尺寸可选数字列。如果此列不存在，使用前一列中的值（或默认的大小，如果也没有颜色列）。如果列存在，不允许使用空值。

配置选项

NameTypeDefaultDescription
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 ，在这种情况下，宽度据此计算。

方法

MethodReturn TypeDescription
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.

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

事件

NameDescriptionProperties
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

 

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

 

posted @ 2013-12-16 19:11  疯狂的原始人  阅读(8735)  评论(1)  编辑  收藏  举报