碼上快樂

相關內容    簡體    繁體

數據可視化(6)--Google Charts實例

本文轉載自   查看原文   2013-12-16 19:11   6909    Google Chart/ chart/ 數據可視化

上頭給的關於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

 

 如發現有錯誤，請留言~~

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 數據可視化Echarts-實例 數據可視化(5)--jqplot經典實例 【Matplotlib】數據可視化實例分析 vue-cli+v-charts實現可視化圖表 數據可視化（二） 數據可視化 數據可視化實例（五）： 氣泡圖（matplotlib，pandas） 數據可視化實例（三）： 散點圖（pandas，matplotlib，numpy） 數據可視化實例（七）： 計數圖（matplotlib，pandas） 數據可視化實例（十）： 相關圖（matplotlib，pandas）
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM