http://www.dotblogs.com.tw/mis2000lab/archive/2014/01/23/google_charts-javascript.aspx
今天看见 g+一篇文章 http://inspiredtoeducate.net/inspiredtoeducate/?p=1319
因而发觉这个东西。
我先连到 Google原厂网站，看了一下说明与范例 https://developers.google.com/chart/interactive/docs/quick_start
几乎没有大改，
光是从原厂范例修正一下，就能作出这种怪物等级的应用
本范例源自一开始介绍的文章
*******************************************************************************************************
右侧上方的 Tab（分页）可选三种图表来呈现
这里的时间轴，可以变成「动画」，图表会动！
*******************************************************************************************************
抱歉，请您点选图片，就能连去这范例的网站，可以现场Demo
请来看一下 Google原厂的 Demo网站
https://developers.google.com/chart/interactive/docs/gallery/geochart
要学习也不难喔。
出乎意料的简单！
==================================================================
我的教学影片，https://www.youtube.com/watch?v=lXkmN4tl_ew
==================================================================
点选图片可连到 Google Charts原厂网站的教学
范例如下（基本架构）：
|
01 |
<html> | |
|
02 |
<head> | |
|
03 |
<!--Load the AJAX API--> | ||
|
04 |
<script type="text/javascript" src="https://www.google.com/jsapi"></script> | ||
|
05 |
<script type="text/javascript"> | |
|
06 |
| |
|
07 |
// Load the Visualization API and the piechart package. | |
|
08 |
google.load(‘visualization‘, ‘1.0‘, {‘packages‘:[‘corechart‘]}); | |
|
09 |
| |
|
10 |
// Set a callback to run when the Google Visualization API is loaded. | |
|
11 |
google.setOnLoadCallback(drawChart); | |
|
12 |
| |
|
13 |
// Callback that creates and populates a data table, | |
|
14 |
// instantiates the pie chart, passes in the data and | |
|
15 |
// draws it. | |
|
16 |
function drawChart() { | |
|
17 |
| |
|
18 |
// Create the data table. ******原始资料****** | |
|
19 |
| |
|
20 |
var data = new google.visualization.DataTable(); | |
|
21 |
data.addColumn(‘string‘, ‘Topping‘); | |
|
22 |
data.addColumn(‘number‘, ‘Slices‘); | |
|
23 |
data.addRows([ |
|
|
24 |
[‘Mushrooms‘, 3], | |
|
25 |
[‘Onions‘, 1], |
|
26 |
[‘Olives‘, 1], |
|
27 |
[‘Zucchini‘, 1], |
|
28 |
[‘Pepperoni‘, 2] |
|
29 |
]); | |
|
30 |
| |
|
31 |
// *********************差异之处************************* | |
|
32 |
// Set chart options | |
|
33 |
var options = {‘title‘:‘How Much Pizza I Ate Last Night‘, | |
|
34 |
‘width‘:400, | |
|
35 |
‘height‘:300}; | |
|
36 |
| |
|
37 |
// Instantiate and draw our chart, passing in some options. | |
|
38 |
var chart = new google.visualization.PieChart(document.getElementById(‘chart_div‘)); | |
|
39 |
chart.draw(data, options); | |
|
40 |
} | |
|
41 |
</script> | |
|
42 |
</head> | |
|
43 |
| |
|
44 |
<body> | |
|
45 |
<!--Div that will hold the pie chart--> | |
|
46 |
<div id="chart_div"></div> | |
|
47 |
</body> | |
|
48 |
</html> | |
各位可以发现：
1. 一开始先设定（引用）必要的 JavaScript与API
2. 然后放入一些基本数据（RowData）
3. 最后.......搞定。
图表会出现在这里 <div id="chart_div"></div>
鼠标点选右侧的 Icon，网页图表会有显著标记
鼠标移到这一区块，还有 Tooltip说明
上过我的课，买过我的书的读者
您可以知道我强调「模板」，架构完整的范本，立即可用、可改
Google原厂的范例跟上面的应用，两者的程序代码几乎一样
差异只有：
(1). 一开始，引用的地方，注明您要做什么图表？
原厂范例： google.load(‘visualization‘, ‘1.0‘, { ‘packages‘: [‘corechart‘] });
修改后的范例：google.load(‘visualization‘, ‘1‘, { ‘packages‘: [‘motionchart‘] });
(2). Raw Data（原始资料）的多寡
(3). 最后两段的程序代码有差异：
原厂：
// Set chart options
var options = {
‘title‘: ‘How Much Pizza I Ate Last Night‘,
‘width‘: 400,
‘height‘: 300
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById(‘chart_div‘));
chart.draw(data, options);
修改后的应用：
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.MotionChart(document.getElementById(‘chart_div‘));
chart.draw(data, { width: 600, height: 300 });
上面两个范例，可在此下载：Google_Chart.rar
我已经准备好 10个范例，将会在我的 ASP.NET课程中介绍给大家。
图表总类有多少呢？（还在成长、追加）
Chart Gallery
Playground
Miscellaneous Examples
Area Charts
Bar Charts
Bubble Charts
Candlestick Charts
Column Charts
Combo Charts
Diff ChartsN
Gauge Charts
Geo Charts
HistogramsNew!
IntervalsNew!
Line Charts
Maps
Org Charts
Pie Charts
Scatter Charts
Stepped Area Charts
Table Charts
TimelinesNew!
Tree Map Charts
TrendlinesNew!
当然也可以从 Google Sheet（电子表格）当成数据源，然后在网页上做图表
看看这个范例 http://inspiredtoeducate.net/inspiredtoeducate/?p=1319
Google Charts 太好用了，以后用不到怎么办？
太黯然了~~~
太销魂了
图片来源：http://www.ipeen.com.tw/comment/413694
请看下一篇范例
网页绘制图表 Google Charts with JavaScript #1....好强、好简单啊！,布布扣,bubuko.com
网页绘制图表 Google Charts with JavaScript #1....好强、好简单啊！
原文地址：http://www.cnblogs.com/mis2000lab/p/3755098.html
