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

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>

<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>&nbsp;

<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

将脚本区块加入页面顶端。 您可以字符串形式建立脚本，然后将它传递给加入网页的方法。 您可以使用这个方法将任何脚本插入网页。 请注意，在完成所有项目之前脚本可能就会呈现至网页。因此您可能无法从脚本参考网页上所有的项目。

RegisterClientScriptInclude

这个方法类似 RegisterClientScriptBlock 方法，但是会加入参考外部 .js 档的脚本区块。 在以动态方式加入任何其他脚本之前就会加入这个包含档。因此您可能无法参考网页上的某些项目。

RegisterStartupScript

将脚本区块加入当网页完成加载，但是在引发网页的 onload 事件之前，就会执行的网页。 这个脚本通常不会建立为事件处理程序或函式。其通常只包含想要执行一次的语句。

RegisterOnSubmitStatement

加入执行以响应网页 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

网页绘制图表 Google Charts with JavaScript #2 ....与ASP.NET网页结合 (ClientScriptManager.RegisterStartupScript 方法)的更多相关文章

  1. 网页绘制图表 Google Charts with JavaScript #1....好强、好简单啊！

    此为文章备份,原文出处(我的网站) 网页绘制图表 Google Charts with JavaScript....好强.好简单啊!#1 http://www.dotblogs.com.tw/mis2 ...

  2. ASP.NET(Web Form)绘制图表 -- Google Chart 三部曲

    ASP.NET(Web Form)绘制图表 -- Google Chart 三部曲 ASP.NET(Web Form)绘制图表 -- Google Chart 三部曲 1.  网页绘制图表 Googl ...

  3. 9款很棒的网页绘制图表JavaScript框架脚本

    推荐9款很棒的可在网页中绘制图表的JavaScript脚本,这些有趣的JS脚本可以帮助你快速方便的绘制图表(线.面.饼.条…),其中包括jQuery.MooTools.Prototype和一些其它的J ...

  4. Qt 绘制图表 - Qt Charts版

    一.前言 自从 Qt 发布以来,给广大跨平台界面研发人员带来了无数的福利.但是Qt自己却一直没有提供自带的图表库,这就使得 QWT.QCustomPlot 等第三方图表库有了巨大的生存空间,为了降低开 ...

  5. 10 个超炫绘制图表图形的 Javascript 插件【转载+整理】

    原文地址 现在,有很多在线绘制图表和图形(Charts and Graphs)的 JavaScript 插件,这些插件还都是免费,以及图表库.这些插件大量出现的原因是基于一个事实:人们不再依赖于 Fl ...

  6. jQuery插件-jgcharts实现Javascript制作Google Charts

    from:http://www.zz68.net/program/Ajax/2010/0415/1992.html jgcharts是一个基于jQuery的非常经典的Google Charts图表制作 ...

  7. 怎样用JavaScript和HTML5 Canvas绘制图表

    原文:https://code.tutsplus.com/zh-...原作:John Negoita翻译:Stypstive 在这篇教程中,我将展示用JavaScript和canvas作为手段,在饼状 ...

  8. iOS - Quartz 2D 第三方框架 Charts 绘制图表

    1.Charts 简介 使用第三方框架 Charts 绘制 iOS 图表.GitHub 源码 Charts Charts 是一款用于绘制图表的框架,可以绘制柱状图.折线图.K线图.饼状图等.Chart ...

  9. 数据可视化(6)--Google Charts实例

    上头给的关于jqplot的问题暂时解决了,继续google charts. google charts的实例很多,就以区域图(Geochart)为例~~ 区域图(Geochart)是一个国家.大陆或者 ...

随机推荐

  1. JDK的版本历史

    JDK1.5: 2004年发布----2006年结束 JDK1.6 2006年发布-----2010年结束 一看吓我一条,开始接触JDK都已经是2010年下半年了,可是那是学的就是1.5版本,知道工作 ...

  2. IOS开发-phonegap及免证书及真机调试

    回头补记(Last edited at 2015.5.24). 第一步:建立项目 参见:Xcode5 + phoneGap2.9搭建ios开发环境 下载phonegap2.9.1,解压. 命令行,进入 ...

  3. NOIP 2005 过河

    过河 Time Limit: 1000MS   Memory Limit: 65536K 题目描述 在河上有一座独木桥,一只青蛙想沿着独木桥从河的一侧跳到另一侧.在桥上有一些石子,青蛙很讨厌踩在这些石 ...

  4. 有关OpenCV1.0中GUI命令的几个函数学习总结

    1.修改窗口背景色或者光标形状 在OpenCV1.0版本利用函数int cvNamedWindow( const char* name, int flags )初始化创建一个窗口后,窗口的背景色是灰色 ...

  5. 【测试】通过RMAN联机全库备份，包括控制文件，归档日志文件，备份成功后，删除已备份的归档日志。

    RMAN是一个很方便很好用的备份,恢复,还原的一个工具,做这个小测试其实只有一个RMAN语句就完全解决了这么大的需求: RMAN> backup as backupset full databa ...

  6. 洛谷P2735 电网 Electric Fences

    P2735 电网 Electric Fences 11通过 28提交 题目提供者该用户不存在 标签USACO 难度普及/提高- 提交  讨论  题解 最新讨论 暂时没有讨论 题目描述 在本题中,格点是 ...

  7. java中单例类

    class Singleton {     private static Singleton instance;     private Singleton(){}     public static ...

  8. [SSH 3]以网上商城项目浅谈spring配置

    导读:在做ITOO项目的时候,就用到了容器+反射,从而运用了依赖注入和依赖查找.如果看过WCF端的配置文件,那么对于这个spring的配置就很容易理解.本篇博客,是对于自己做的一个小项目中所运用到的s ...

  9. 安装Ecshop首页出现报错：Only variables should be passed by referen

    出现下面这就话: Strict Standards: Only variables should be passed by reference in E:\Tools\ECShop_V2.7.3_UT ...

  10. iptable软路由

    http://xstarcd.github.io/wiki/Linux/iptables_forward_internetshare.html # 默认丢弃转发,所有内网流量不能访问外网卡 iptab ...