MIS2000 Lab. is MVP 2008-2017/7/1 for ASP/ASP.NET.
因而發覺這個東西。
我先連到 Google原廠網站，看了一下說明與範例 https://developers.google.com/chart/interactive/docs/quick_start
幾乎沒有大改，
光是從原廠範例修正一下，就能作出這種怪物等級的應用
本範例源自一開始介紹的文章
*******************************************************************************************************
右側上方的 Tab（分頁）可選三種圖表來呈現
這裡的時間軸，可以變成「動畫」，圖表會動！
*******************************************************************************************************
抱歉，請您點選圖片，就能連去這範例的網站，可以現場Demo
請來看一下 Google原廠的 Demo網站
要學習也不難喔。
出乎意料的簡單！
==================================================================
==================================================================
點選圖片可連到 Google Charts原廠網站的教學
範例如下（基本架構）：
2016/11月，第一列的 script似乎已經更換（請注意原廠網站的範例，但我使用本文的 "舊" 寫法仍可運作）
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// 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]
]);
// *********************差異之處*************************
// 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);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
各位可以發現：
1. 一開始先設定（引用）必要的 JavaScript與API
2. 然後放入一些基本資料（RowData）
3. 最後.......搞定。
圖表會出現在這裡
滑鼠點選右側的 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（試算表）當成資料來源，然後在網頁上做圖表
Google Charts 太好用了，以後用不到怎麼辦？
太黯然了~~~
太銷魂了
請看下一篇文章：
網頁繪製圖表 Google Charts with JavaScript(2)....與ASP.NET網頁結合 (ClientScriptManager.RegisterStartupScript 方法)
http://mis2000lab.blogspot.tw/2016/12/google-charts-with-javascript2aspnet.html
我將思想傳授他人， 他人之所得，亦無損於我之所有；
猶如一人以我的燭火點燭，光亮與他同在，我卻不因此身處黑暗。----Thomas Jefferson
寫信給我-- mis2000lab (at) yahoo.com.台灣 或是 school (at) mis2000lab.net
................ facebook社團 https://www.facebook.com/mis2000lab ......................
................ Google+ https://plus.google.com/100202398389206570368/posts ........
................ YouTube (ASP.NET) 線上教學影片 http://goo.gl/rGLocQ
沒有留言:
張貼留言