网页绘制图表 Google Charts with JavaScript #2 ....与ASP.NET网页结合 (ClientScriptManager.RegisterStartupScript 方法)

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

此为文章备份，原文出处（我的网站）

http://www.dotblogs.com.tw/mis2000lab/archive/2014/05/10/google_charts-with-asp.net-clientscriptmanager.registerstartupscript.aspx

上一篇文章提到 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>

<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>

<div>

<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>

<title>ASP.NET如何搭配「Google Charts」的JavaScript</title>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

//============================================================

// 这里全部消失了，写去「后置程序代码」

//============================================================

</head>

<body>

<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 />本范例 JavaScript码沿用范例 Google_Chart_00.aspx<br /><br />

<hr />

<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 对象，在单一字符串中一起搜集脚本，然后在单一客户端脚本区块中注册所有的脚本。

}

执行后的成果，没有问题

但请您注意下图，执行后的网页「原始成果」

您可以发现 JavaScript放置的为置有点差异

这点请您小心。

请参阅我以前的文章

ASP.NET与 JavaScript -- ClientScriptManager 类别

http://www.dotblogs.com.tw/mis2000lab/archive/2012/09/06/asp_net_javascript_20120906.aspx

在伺服端程序代码中，呼叫下表中列出的方法之一。

方法	说明
RegisterClientScriptBlock	将脚本区块加入页面顶端。您可以字符串形式建立脚本，然后将它传递给加入网页的方法。您可以使用这个方法将任何脚本插入网页。请注意，在完成所有项目之前脚本可能就会呈现至网页。因此您可能无法从脚本参考网页上所有的项目。
RegisterClientScriptInclude	这个方法类似 RegisterClientScriptBlock 方法，但是会加入参考外部 .js 档的脚本区块。在以动态方式加入任何其他脚本之前就会加入这个包含档。因此您可能无法参考网页上的某些项目。
RegisterStartupScript	将脚本区块加入当网页完成加载，但是在引发网页的 onload 事件之前，就会执行的网页。这个脚本通常不会建立为事件处理程序或函式。其通常只包含想要执行一次的语句。
RegisterOnSubmitStatement	加入执行以响应网页 onsubmit 事件的脚本。在送出网页之前就会执行脚本，并且让您有机会取消送出动作。