网页绘制图表 Google Charts with JavaScript #2 ....与ASP.NET网页结合 (ClientScriptManager.RegisterStartupScript 方法)
此为文章备份，原文出处（我的网站）
上一篇文章提到 Google Charts
黯然销魂之网页绘制图表 Google Charts with JavaScript....好强、好简单啊！太好用了，以后用不到怎么办？
http://www.dotblogs.com.tw/mis2000lab/archive/2014/01/23/google_charts-javascript.aspx
今天上课时，学员都很有兴趣。
但是， JavaScript写在HTML画面上，该如何与 AP.NET后置程序代码搭配呢？
您可以参考：ClientScriptManager 类别 http://msdn.microsoft.com/zh-tw/library/z9h4dk8y(v=vs.110).aspx
把您的 Google Charts范例（JavaScript程序代码）
沿用上面超链接的写法，把它（字符串相连）写在后置程序代码里面，就搞定啰！
============================================================================
我的教学影片：https://www.youtube.com/watch?v=or8tibRKams
============================================================================
上一个范例：
<%@ Page .........
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<!--Load the AJAX API-->
<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();
//数据的表头 / Header（数据型态, 域名）
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
//, 'is3D': true, // *** 启动 3D效果。***
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
//******************************** 这里有一个 .PieChart要搭配您的图表修改。
chart.draw(data, options);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</div>
</form>
</body>
</html>
把上面咖啡色字体（斜体字）放到 "ASP.NET 后置程序代码"里面
以字符串相连来做即可。
您可以参考：ClientScriptManager 类别 http://msdn.microsoft.com/zh-tw/library/z9h4dk8y(v=vs.110).aspx
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>ASP.NET如何搭配「Google Charts」的JavaScript</title>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
//============================================================
// 这里全部消失了，写去「后置程序代码」
//============================================================
</head>
<body>
<form id="form1" runat="server">
<div>
ClientScriptManager.RegisterStartupScript 方法 (Type, String, String, Boolean)
<br /><br />数据源：<a href="http://msdn.microsoft.com/zh-tw/library/z9h4dk8y(v=vs.110).aspx">http://msdn.microsoft.com/zh-tw/library/z9h4dk8y(v=vs.110).aspx</a>
<br />
<br />
<br />
<br />本范例 JavaScript码沿用范例 Google_Chart_00.aspx<br /><br />
<hr />
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</div>
</form>
</body>
</html>
后置程序代码如下：
| 01 |
protected void Page_Load(object sender, EventArgs e) |
| 02 |
{ |
| 03 |
//** 数据源 http://msdn.microsoft.com/zh-tw/library/z9h4dk8y(v=vs.110).aspx |
| 04 |
|
| 05 |
// Define the name and type of the client scripts on the page. |
| 06 |
String csname1 = "Script1"; |
| 07 |
String csname2 = "Script2"; |
| 08 |
Type cstype = this.GetType(); |
| 09 |
|
| 10 |
// Get a ClientScriptManager reference from the Page class. |
| 11 |
ClientScriptManager cs = Page.ClientScript; |
| 12 |
|
| 13 |
// Check to see if the startup script is already registered. |
| 14 |
// 呼叫 IsStartupScriptRegistered 方法，判断特定索引键和型别组的启始脚本是否已注册，避免不必要的脚本加入尝试。 |
| 15 |
if (!cs.IsStartupScriptRegistered(cstype, csname1)) |
| 16 |
{ |
| 17 |
String cstext1 = "google.load('visualization', '1.0', { 'packages': ['corechart'] });"; |
| 18 |
cstext1 += "google.setOnLoadCallback(drawChart);"; |
| 19 |
|
| 20 |
cs.RegisterStartupScript(cstype, csname1, cstext1, true); |
| 21 |
// 使用 addScriptTags (最后一个)参数，指出 script 参数所提供的脚本是否包装在<script><![CDATA[项目区块中。 |
| 22 |
// 最后一个参数 addScriptTags 设为 true，表示<script>脚本标记会自动加入。 |
| 23 |
} |
| 24 |
|
| 25 |
// Check to see if the client script is already registered. |
| 26 |
if (!cs.IsClientScriptBlockRegistered(cstype, csname2)) |
| 27 |
{ |
| 28 |
StringBuilder cstext2 = new StringBuilder(); |
| 29 |
cstext2.Append("<script type=\"text/javascript\"> function drawChart() {"); |
| 30 |
cstext2.Append("var data = new google.visualization.DataTable();"); |
| 31 |
cstext2.Append("data.addColumn('string', 'Topping');"); |
| 32 |
cstext2.Append("data.addColumn('number', 'Slices');"); |
| 33 |
cstext2.Append("data.addRows([['Mushrooms', 3], ['Onions', 1], ['Olives', 1], ['Zucchini', 1], ['Pepperoni', 2]]);"); |
| 34 |
cstext2.Append("var options = { 'title': '图表的标题--How Much Pizza I Ate Last Night', 'width': 400, 'height': 300 };"); |
| 35 |
cstext2.Append("var chart = new google.visualization.PieChart(document.getElementById('chart_div'));"); |
| 36 |
cstext2.Append("chart.draw(data, options);"); |
| 37 |
cstext2.Append("}]]></script>"); |
| 38 |
|
| 39 |
cs.RegisterClientScriptBlock(cstype, csname2, cstext2.ToString(), false); |
| 40 |
} |
| 41 |
// 在网页上的 OnLoad 事件引发之前。 不保证脚本区块可以根据其所注册的顺序来输出。 |
| 42 |
// 如果脚本区块的顺序很重要，请使用 StringBuilder 对象，在单一字符串中一起搜集脚本，然后在单一客户端脚本区块中注册所有的脚本。 |
| 43 |
} |
执行后的成果，没有问题
但请您注意下图，执行后的网页「原始成果」
您可以发现 JavaScript放置的为置有点差异
这点请您小心。
请参阅我以前的文章
ASP.NET与 JavaScript -- ClientScriptManager 类别
http://www.dotblogs.com.tw/mis2000lab/archive/2012/09/06/asp_net_javascript_20120906.aspx
在伺服端程序代码中，呼叫下表中列出的方法之一。
| 方法 |
说明 |
| 将脚本区块加入页面顶端。 您可以字符串形式建立脚本，然后将它传递给加入网页的方法。 您可以使用这个方法将任何脚本插入网页。 请注意，在完成所有项目之前脚本可能就会呈现至网页。因此您可能无法从脚本参考网页上所有的项目。 |
|
| 这个方法类似 RegisterClientScriptBlock 方法，但是会加入参考外部 .js 档的脚本区块。 在以动态方式加入任何其他脚本之前就会加入这个包含档。因此您可能无法参考网页上的某些项目。 |
|
| 将脚本区块加入当网页完成加载，但是在引发网页的 onload 事件之前，就会执行的网页。 这个脚本通常不会建立为事件处理程序或函式。其通常只包含想要执行一次的语句。 |
|
| 加入执行以响应网页 onsubmit 事件的脚本。 在送出网页之前就会执行脚本，并且让您有机会取消送出动作。 |
HOW TO：以动态方式将客户端脚本(JavaScript)加入至 ASP.NET [Web网页]
http://msdn.microsoft.com/zh-tw/library/ms178207.aspx
HOW TO：将客户端脚本事件加入至 ASP.NET [ Web服务器控件]
http://msdn.microsoft.com/zh-tw/library/7ytf5t7k.aspx