google图表展示

使用google chart tools展示图表，过程记录一下，供以后查阅：

https://developers.google.com/chart/interactive/docs/customizing_charts?hl=zh-CN

1. 加载API

• The Google JSAPI API

• The Google Visualization library

• The library for the chart itself.

<!--Load the AJAX API-->
<scripttype="text/javascript"src="https://www.google.com/jsapi"></script>
<scripttype="text/javascript">

// Load the Visualization API library and the piechart library.
 �google.load('visualization','1.0',{'packages':['corechart']});
 �google.setOnLoadCallback(drawChart);
// ... draw the chart...
</script>

2.数据准备

符合类 google.visualization.DataTable

(each column has a datatype, an optional ID, and an optional label)

// Create the data table.
� � �var data =new google.visualization.DataTable();
� � �data.addColumn('string','Topping');
� � �data.addColumn('number','Slices');
� � �data.addRows([
� � � � � � ['Mushrooms',3],
� � � � � � ['Onions',1],
� � � � � � ['Olives',1],
� � � � � � ['Zucchini',1],
� � � � � � ['Pepperoni',2]
� � � �]);

展示

type: string label: Topping	type: number label: Slices
Mushrooms	3
Onions	1
Olives	1
Zucchini	1
Pepperoni	2

3.选项

var options = {
  'legend':'left',
  'title':'My Big Pie Chart',
  'is3D':true,
  'width':400,
  'height':300
}

4.展示

创建网页元素，装载的容器

var chart =new google.visualization.PieChart(document.getElementById('chart_div'));

展示的方法有

• ready - Thrown when the chart is drawn on the page and ready to respond to methods. Listen for this event if you need to request information from the chart.

• select - Thrown when the user selects something on the chart: typically by clicking on a bar or pie slice.

• error - Thrown when the chart can't render the data passed in, typically because the DataTable format is wrong.

• onmouseover and onmouseout - Thrown when the user mouses over or off of a specific chart element, respectively.

google 其他展示的产品：

http://blog.sina.com.cn/s/blog_9295115201013309.html

http://www.wordpress.la/the-top-15-google-products-for-webmasters.html

http://www.google.com/analytics/