怎么在自己的ASP.NET页面插入可动态更新的数据统计图呢？网上的资源倒是不少（Fusioncharts、amCharts……），在这些资源中有一个比较好用：amChart，这个工具很炫，还能与用户交互，其繁多的统计图样式和一目了然的图形数据，一定能让你在第一眼就喜欢上这个工具。我们先来看一些这个工具的统计图效果：

柱状统计图：

速度模拟：

曲线统计图：

曲线统计图2：

扇形统计图：

点状统计图：

还有很多不知道是什么的统计图：

（效果够炫吧，去官网上下载吧：www.amcharts.com/）

Amcharts官网上有很多Demo，而且是免费的。免费版本在使用的时候会在统计图的左上角显示Amcharts官网的链接。

下面我们看一个简单的例子(以JavaScript CHARTS     Version 3.4.4 ( February 20, 2014 )版本为例)

去官网下载3.4.4版本然后解压，

在samples文件夹中找到_exporting_to_multiple_formats.html这个网页，源码中，

chartData这个JSON数组是显示的统计数据，动态生成这些数据就可以做到动态的显示我们所需要统计的数据。以下是我做的的一个修改后的一个例子，源码奉上：(本人新手，高手勿喷)

前台aspx页面代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="exporting.aspx.cs" Inherits="amchart_exporting" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>amCharts examples</title>

<link rel="stylesheet" href="css/style.css" type="text/css">

<script src="amcharts/amcharts.js" type="text/javascript"></script>

<script src="amcharts/serial.js" type="text/javascript"></script>

<!-- scripts for exporting chart as an image -->

<!-- Exporting to image works on all modern browsers except IE9 (IE10 works fine) -->

<!-- Note, the exporting will work only if you view the file from web server -->

<!--[if (!IE) | (gte IE 10)]> -->

<script src="amcharts/exporting/amexport.js" type="text/javascript"></script>

<script src="amcharts/exporting/rgbcolor.js" type="text/javascript"></script>

<script src="amcharts/exporting/canvg.js" type="text/javascript"></script>

<script src="amcharts/exporting/jspdf.js" type="text/javascript"></script>

<script src="amcharts/exporting/filesaver.js" type="text/javascript"></script>

<script src="amcharts/exporting/jspdf.plugin.addimage.js" type="text/javascript"></script>

<!-- <![endif]-->

</head>

<body>

<form id="form1" runat="server">

<span style="font-family: Arial; font-size: 10px; color: #CC0000;">

<p>警告：只能在浏览器端下载统计图表文件。除了IE9可以在任何浏览器上执行，在IE10上运行最佳。</p>

</span>

<div id="chartdiv" style="width: 100%; height: 400px;"></div>

</form>

</body>

</html>

对应的cs代码：

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Text;

public partial class amchart_exporting : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

chartHelper get_js = new chartHelper();//帮助类

StringBuilder js = get_js.ChartJS();

Page.ClientScript.RegisterStartupScript(Page.GetType(), "message", js.ToString());

}

}

}

帮助类代码：

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Data;

using System.Data.SqlClient;

using System.Text;

/// <summary>

/// chartHelper 的摘要说明

/// </summary>

public class chartHelper

{

public chartHelper()

{

//

// TODO: 在此处添加构造函数逻辑

//

}

public StringBuilder ChartJS()

{

StringBuilder return_js = new StringBuilder();

DataTable chart_table = ChartData();

return_js.Append("<script type=\"text/javascript\">");

return_js.Append("var chart;");

return_js.Append("var chartData = [");

for (int i = 0; i < chart_table.Rows.Count; i++)

{

int TableCount = chart_table.Rows.Count;

int ColorCount =  A_Colors().Count();

int yushu = i % ColorCount;

return_js.Append("{\"pagename\": \"" + chart_table.Rows[i]["pagename"].ToString() + "\",\"visits\": " + chart_table.Rows[i]["visits"].ToString() + ",\"color\": \"" + ChartColor(yushu) + "\"},");

}

return_js.Append("];");

return_js.Append("var chart = AmCharts.makeChart(\"chartdiv\", {");

return_js.Append("type: \"serial\",");

return_js.Append("dataProvider: chartData,");

return_js.Append("categoryField: \"pagename\",");

return_js.Append("depth3D: 20,");

return_js.Append("angle: 30,");

return_js.Append("categoryAxis: {labelRotation: 90,gridPosition: \"start\"},");

return_js.Append("valueAxes: [{title: \"访问次数\"}],");

return_js.Append("graphs: [{valueField: \"visits\",colorField: \"color\",type: \"column\",lineAlpha: 0,fillAlphas: 1 }],");

return_js.Append("chartCursor: {cursorAlpha: 0,zoomable: false,categoryBalloonEnabled: false},");

return_js.Append("exportConfig: {menuTop: \"21px\",menuBottom: \"auto\",menuRight: \"21px\",backgroundColor: \"#efefef\",menuItemStyle: {backgroundColor: '#EFEFEF',rollOverBackgroundColor: '#DDDDDD'},");

return_js.Append("menuItems: [{textAlign: 'center',icon: 'amcharts/images/export.png',onclick: function () { },");

return_js.Append("items: [{title: 'JPG',format: 'jpg'}, {title: 'PNG',format: 'png'}, {title: 'SVG',format: 'svg'}, {title: 'PDF',format: 'pdf'}]");

return_js.Append("}] } });");

return_js.Append("</script>");

return return_js;

}

public DataTable ChartData()

{

DataTable dt = new DataTable();

dt.Columns.Add("pagename", System.Type.GetType("System.String"));

dt.Columns.Add("visits", System.Type.GetType("System.String"));

Random ran = new Random();

for (int i = 0; i < 20; i++)

{

DataRow dr = dt.NewRow();

dr["pagename"] = "页面" + (i + 1).ToString();

int value = ran.Next(1, 5000);

dr["visits"] = value.ToString();

dt.Rows.Add(dr);

}

return dt;

}

public string[] A_Colors()

{

string[] Arry_Colors = new string[] {

"#FF0F00",

"#FF6600",

"#FF9E01",

"#FCD202",

"#F8FF01",

"#B0DE09",

"#04D215",

"#0D8ECF",

"#0D52D1",

"#2A0CD0",

"#8A0CCF",

"#CD0D74",

"#754DEB",

"#DDDDDD",

"#999999",

"#333333",

"#000000"

};

return Arry_Colors;

}

public string ChartColor(int num)

{

string[] Colors = A_Colors();

if (num > 0 && num < Colors.Count())

{

return Colors[num];

}

else

{

return "#FF0F00";

}

}

}

在Asp.Net中使用amChart统计图的更多相关文章

  1. ASP.NET中常用的优化性能的方法

    1. 数据库访问性能优化 数据库的连接和关闭 访问数据库资源需要创建连接.打开连接和关闭连接几个操作.这些过程需要多次与数据库交换信息以通过身份验证,比较耗费服务器资源.ASP.NET中提供了连接池( ...

  2. asp.net中ashx生成验证码代码放在Linux(centos)主机上访问时无法显示问题

    最近有个项目加入了验证码功能,就从自己博客以前的代码中找到直接使用,直接访问验证码页面报错如下: 源代码:asp.net中使用一般处理程序生成验证码 Application Exception Sys ...

  3. ASP.NET中Session的sessionState 4种mode模式

    1. sessionState的4种mode模式 在ASP.NET中Session的sessionState的4中mode模式:Off.InProc.StateServer及SqlServer. 2. ...

  4. Asp.net中存储过程拖拽至dbml文件中，提示无法获得返回值

    Asp.net中存储过程拖拽至dbml文件中,提示无法获得返回值,去属性表中设置这时候会提示你去属性表中更改返回类型. 其实存储过程返回的也是一张表,只不过有时候存储过程有点复杂或者写法不规范的话不能 ...

  5. ASP.NET中后台数据和前台控件的绑定

    关于ASP.NET中后台数据库和前台的数据控件的绑定问题 最近一直在学习个知识点,自己创建了SQL Server数据库表,想在ASP.NET中连接数据库,并把数据库中的数据显示在前台,注意,这里的数据 ...

  6. asp.net中缓存的使用介绍一

    asp.net中缓存的使用介绍一 介绍: 在我解释cache管理机制时,首先让我阐明下一个观念:IE下面的数据管理.每个人都会用不同的方法去解决如何在IE在管理数据.有的会提到用状态管理,有的提到的c ...

  7. ASP.NET中Ajax的用法

    在ASP.NET中应用Ajax的格式如下: 前台代码(用JQuery库) $.ajax({ type: "POST", async: true, url: "../Aja ...

  8. Asp.Net中使用OpenRowSet操作Excel表，导入Sql Server(实例)

    有两种接口可供选择:Microsoft.Jet.OLEDB.4.0(以下简称 Jet 引擎)和Microsoft.ACE.OLEDB.12.0(以下简称 ACE 引擎). Jet 引擎大家都很熟悉,可 ...

  9. Asp.net中static变量和viewstate的使用方法(谨慎)

    在.Net平台下进行CS软件开发时,我们经常遇到以后还要用到某些变量上次修改后的值,为了简单起见,很多人都习惯用static来定义这些变量,我也是.这样非常方便,下一次调用某个函数时该变量仍然保存的是 ...

随机推荐

  1. GlassFish的安装与使用（Windows）

    前言 Glassfish是一款由Sun公司开发的(现由甲骨文公司赞助)开源的免费的应用服务器,它既是EJB容器也是WEB容器.Glassfish支持最新版的Java EE标准. Glassfish与T ...

  2. Linq:从List列表中查询数据(Where查询)

    获取List<Customer> customerList的函数见:http://www.cnblogs.com/yf2011/p/3369927.html 输出List中Berlin城市 ...

  3. raw_in_fields

    在admin后台类中加入raw_id_fields(只适用于外键)后,会显示外键的详细信息

  4. haproxy中两个常用的宏

    list_for_each(pos, head) pos.head 都为list类型 一般来说,head是list的虚拟头,依次取list上的各个节点 container_of(ptr, type, ...

  5. GZip压缩与解压缩

    GZIP的压缩与解压缩代码: public static class CompressionHelper { /// <summary> /// Compress the byte[] / ...

  6. php小白和菜鸟 上班路上可以看的修行博客

    上班地铁 公交上我们不要去追剧 不要去打游戏 不要看看有效性的海量新闻, 我们需要去技术博客里遨游, 下面就推荐点与php有关的可以学习的技术博客; 大部分程序员在自学的道路上不知道走了多少坑,这个视 ...

  7. Linux Skills

    ++实现RedHat非正常关机的自动磁盘修复先登录到服务器,然后在/etc/sysconfig里增加一个文件autofsck,内容如下:AUTOFSCK_DEF_CHECK=yesPROMPT=yes ...

  8. css控制div字数出现点点点

    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;

  9. Deep Learning 学习笔记（5）：Regularization 规则化

    过拟合(overfitting): 实际操作过程中,无论是线性回归还是逻辑回归,其假设函数h(x)都是人为设定的(尽管可以通过实验选择最优). 这样子就可能出线“欠拟合”或者“过拟合”现象. 所谓过拟 ...

  10. 前端学习---css基本知识

    css基本知识 我们先看一个小例子: <!DOCTYPE html> <html lang="en"> <head> <meta char ...