怎么在自己的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. 处理get中文乱码

    package com.servlet;              import java.io.IOException;       import java.io.PrintWriter;      ...

  2. 洛谷P1119 灾后重建

    传送门 题目大意:点被破坏,t[i]为第i个点修好的时间,且t[1]<t[2]<t[3].. 若干询问,按时间排序,询问第t时刻,u,v的最短路径长度. 题解:floyed 根据时间加入点 ...

  3. PCB 锣板和半孔工艺的差别

    PCB 锣板和半孔工艺的差别 PCB 在做模块时会用到半孔工艺,但是由于半孔是特殊工艺. 需要加费用,打板时费还不低. 下面这个图是锣板和半孔工艺的差别. https://www.amobbs.com ...

  4. sublime文件对比插件--sublimerge

    网上很多文件对比的基本都要收费,所以还是干脆看看sublime有没插件算了. 结果还是有一个:sublimerge 1 先安装该插件: 2 然后在sublime下都打开要对比的两个文件: 3 然后在其 ...

  5. yii2史上最简单式安装教程，没有之一（转）

    测试说明:按照文章下载文件,虽然是tgz文件,用winrar解压,在CMD中运行init.bat文件. 既然是安装Yii,我们先去官网下载一份Yii的高级模版,什么,你说打开页面乱七八糟的英文字母你看 ...

  6. 第17篇 shell编程基础（2）

    shell study 1.Exit StatusIf the command executed successfully (or true), the value of $? is zero. If ...

  7. cxGrid使用汇总3

    32根据单元的值设置样式   解决:procedure   <aForm>.<aColumn>StylesGetContentStyle(         Sender:   ...

  8. ExcelHandle

    using System.Collections.Generic; using System.Data; using System.IO; using System.Linq; using Syste ...

  9. linux启动自动挂载分区和/etc/fstab简单修复

    让后加的分区能够启动时自动挂载,需要把配置写入文件 /etc/fstab vi /etc/fstab UUID=3f5859e0-592f-42cd-b533-570422fb85be   / ext ...

  10. Redis官方文档》持久化

    原文链接 译者:Alexandar Mahone 这篇文章从技术层面描述了Redis持久化,建议所有读者阅读.如果希望更多了解Redis持久化和持久性保障,建议阅读Redis持久化揭秘. Redis ...