MIS2000 Lab. is MVP 2008-2017/7/1 for ASP/ASP.NET.
本文出處（這裡是我的備份）--
黯然銷魂 之 網頁繪製圖表 Google Charts with JavaScript....好強、好簡單啊！太好用了，以後用不到怎麼辦？
http://www.dotblogs.com.tw/mis2000lab/archive/2014/01/23/google_charts-javascript.aspx
因而發覺這個東西。
我先連到 Google原廠網站，看了一下說明與範例 https://developers.google.com/chart/interactive/docs/quick_start
幾乎沒有大改，
光是從原廠範例修正一下，就能作出這種怪物等級的應用
本範例源自一開始介紹的文章
*******************************************************************************************************
右側上方的 Tab（分頁）可選三種圖表來呈現
這裡的時間軸，可以變成「動畫」，圖表會動！
*******************************************************************************************************
抱歉，請您點選圖片，就能連去這範例的網站，可以現場Demo
要學習也不難喔。
出乎意料的簡單！
點選圖片可連到 Google Charts原廠網站的教學
範例如下（基本架構）：
01 | <html> |
02 | <head> |
03 | |
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 | |
46 | <div id="chart_div"></div> |
47 | </body> |
48 | </html> |
各位可以發現：
1. 一開始先設定（引用）必要的 JavaScript與API
2. 然後放入一些基本資料（RowData）
3. 最後.......搞定。
圖表會出現在這裡
滑鼠點選右側的 Icon，網頁圖表會有顯著標記
滑鼠移到這一區塊，還有 Tooltip說明
ASP.NET課程 / ASP.NET教學，請看
http://www.dotblogs.com.tw/mis2000lab/archive/2011/06/24/29807.aspx
[台北] ASP.NET入門實戰 + ADO.NET進階【二合一】49 hr
ASP.NET影片、遠距教學，請看：
http://www.dotblogs.com.tw/mis2000lab/archive/2015/03/09/aspnet-online-learning-distance-education-2015.aspx
[遠距教學、教學影片] ASP.NET (Web Form) 六週課程 上線了！
上過我的課，買過我的書的讀者
您可以知道我強調「範本」，架構完整的範本，立即可用、可改
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（試算表）當成資料來源，然後在網頁上做圖表
Google Charts 太好用了，以後用不到怎麼辦？
太黯然了~~~
太銷魂了
我的媽！
ASP.NET裡面那個 Chart控制項要加加油了
照這樣發展下去........
Google遲早會變成電影「駭客任務」裡面的母體（Matrix）
不然就是變成電影「魔鬼終結者」裡面的「天網」啊
為了避免 Google太強，我們趕緊加入微軟反抗軍
裝備好你的武器 --- Visual Studio
ASP.NET課程 / ASP.NET教學，請看
http://www.dotblogs.com.tw/mis2000lab/archive/2011/06/24/29807.aspx
[台北] ASP.NET入門實戰 + ADO.NET進階【二合一】49 hr
ASP.NET影片、遠距教學，請看：
http://www.dotblogs.com.tw/mis2000lab/archive/2015/03/09/aspnet-online-learning-distance-education-2015.aspx
[遠距教學、教學影片] ASP.NET (Web Form) 六週課程 上線了！
............................. 寫信給我，mis2000lab (at) yahoo.com.台灣........................................................
............................. facebook社團 https://www.facebook.com/mis2000lab ............................
............................. Google+ https://plus.google.com/100202398389206570368/posts ..............
網頁上的補充範例（售後服務），不一定能立即提供 VB / C#語法 （看時間夠不夠寫，請不要跟我們要）。
但書本上面的範例，一定有 VB / C#雙語法給您學習。 請看我們的「售後服務」範圍（嚴格認定）。
防範SQL Injection / XSS攻擊，請看：ASP.NET安全寫作 資料來源 -- TWISC@NTUST網路應用安全知識庫
......................................................................................................................................................
沒有留言:
張貼留言