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

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. ASP.NET MVC开发微信（四）

  2. JavaScript自己模仿jQuery的一点小代码

    function seter(sId) {    var obj = document.getElementById(sId);    return new function () {        ...

  3. Kung fu

    1. originPeople in Primitive society(原始社会)in order to survive,they have to hunt for food efficiently ...

  4. VC++中，如何定义callback函数和它的触发事件？

    对于回调函数的编写始终是写特殊处理功能程序时用到的技巧之一.先介绍一下回调的使用基本方法与原理. 1.在这里设:回调函数为A()(这是最简单的情况,不带参数,但我们应用的实际情况常常很会复杂),使用回 ...

  5. android Json 解析和生成

    什么是json: JSON即JavaScript Object Natation的简称,它是一种轻量级的数据交换格式,非常适合服务器与JavaScript的交互.JSON易于人阅读和编写.同时也易于机 ...

  6. svn提交自动同步到web目录

    环境:CentOS6.5  测试线   svn和web服务器在同一台机器上   SVN版本1.6 情景:在测试环境下,开发部提出希望提交到SVN的代码能自动同步到WEB站点目录下,解决每次都要传双份这 ...

  7. VR就是下一个浪潮_2016 (GMGC) 全球移动游戏大会观后感

    "VR就是下一个浪潮"  --2016 (GMGC) 全球移动游戏大会观后感   早在2014年参会Unity举办的一年一度的金立方盛典大会,就初次体验了VR头盔设备,于是印象深刻 ...

  8. Eclipse插件开发之基础篇(4) OSGi框架

    转载出处:http://www.cnblogs.com/liuzhuo. 1. 什么是OSGi框架 OSGi(Open Service Gateway Initiative)框架是运行在JavaVM环 ...

  9. 图之BFS和DFS遍历的实现并解决一次旅游中发现的问题

    这篇文章用来复习使用BFS(Breadth First Search)和DFS(Depth First Search) 并解决一个在旅游时遇到的问题. 关于图的邻接表存储与邻接矩阵的存储,各有优缺点. ...

  10. gem5 运行x86全系统仿真

    使用gem5可以启动Linux内核,称为全系统模拟,启动之后,可以通过telent连接,进行访问,但四telent有时不稳定,gem5推荐使用m5term进行连接访问,整个步骤如下: (1)打开终端, ...