怎么在自己的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. niosii 改变软核之后重新编译方法

    操作系统:Win7 64 bit 开发环境:Quartus II 12.0 (64-Bit)  + Nios II 12.0 Software Build Tools for Eclipse 使用Qu ...

  2. django中的@login_required

    转:http://www.cnblogs.com/ccorz/p/Django-zhong-loginrequired-yong-fa-jian-jie.html 1.网站开发时的登录需求: ===用 ...

  3. gitlab Failed to register this runner. Perhaps you are having network problems runner 注册失败问题解决

    1. 低版本安装地址 https://gitlab-ci-multi-runner-downloads.s3.amazonaws.com/v1.11.2/index.html   2. 使用 yum ...

  4. Windows 特殊文件夹

    收藏的XP的一些特殊文件夹,使用方法:在任意位置用以下文件名创建文件夹即可. 目前还有些可以在WIN7下正常使用,以此作为一个存档,便于日后查询.   回收站.{645ff040-5081-101b- ...

  5. datetimebox

    $.extend($.fn.datagrid.defaults.editors, { datetimebox: {// datetimebox就是你要自定义editor的名称 init: functi ...

  6. 用hexo搭建自己的blog

    一.工具准备: 1.1 安装node 作用:用来生成静态页面的 到Node.js官网下载相应平台的最新版本,一路安装即可. 1.2 安装Git 作用:把本地的hexo内容提交到github上去. 安装 ...

  7. 洛谷3778 [APIO2017]商旅

    题目:https://www.luogu.org/problemnew/show/P3778 一看就是0/1分数规划.但不能直接套模板,因为有个商品种类的限制. 考虑从a买在b卖,商品种类根本没用,关 ...

  8. ssh面试题2

    1. BeanFactory的作用是什么? [中] BeanFactory是配置.创建.管理bean的容器,有时候也称为bean上下文.Bean与bean的依赖关系,也是由BeanFactory负责维 ...

  9. .Net上传文件超过了最大请求长度

    错误消息:超过了最大请求长度    错误原因:asp.net默认最大上传文件大小为4M,运行超时时间为90S. 修改web.config文件可以改变这个默认值为 <configuration&g ...

  10. xml处理模块

    xml是实现不同语言或程序之间进行数据交换的协议,跟json差不多,但json使用起来更简单,不过,古时候,在json还没诞生的黑暗年代,大家只能选择用xml呀,至今很多传统公司如金融行业的很多系统的 ...