在Asp.Net中使用amChart统计图
怎么在自己的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统计图的更多相关文章
- ASP.NET中常用的优化性能的方法
1. 数据库访问性能优化 数据库的连接和关闭 访问数据库资源需要创建连接.打开连接和关闭连接几个操作.这些过程需要多次与数据库交换信息以通过身份验证,比较耗费服务器资源.ASP.NET中提供了连接池( ...
- asp.net中ashx生成验证码代码放在Linux(centos)主机上访问时无法显示问题
最近有个项目加入了验证码功能,就从自己博客以前的代码中找到直接使用,直接访问验证码页面报错如下: 源代码:asp.net中使用一般处理程序生成验证码 Application Exception Sys ...
- ASP.NET中Session的sessionState 4种mode模式
1. sessionState的4种mode模式 在ASP.NET中Session的sessionState的4中mode模式:Off.InProc.StateServer及SqlServer. 2. ...
- Asp.net中存储过程拖拽至dbml文件中，提示无法获得返回值
Asp.net中存储过程拖拽至dbml文件中,提示无法获得返回值,去属性表中设置这时候会提示你去属性表中更改返回类型. 其实存储过程返回的也是一张表,只不过有时候存储过程有点复杂或者写法不规范的话不能 ...
- ASP.NET中后台数据和前台控件的绑定
关于ASP.NET中后台数据库和前台的数据控件的绑定问题 最近一直在学习个知识点,自己创建了SQL Server数据库表,想在ASP.NET中连接数据库,并把数据库中的数据显示在前台,注意,这里的数据 ...
- asp.net中缓存的使用介绍一
asp.net中缓存的使用介绍一 介绍: 在我解释cache管理机制时,首先让我阐明下一个观念:IE下面的数据管理.每个人都会用不同的方法去解决如何在IE在管理数据.有的会提到用状态管理,有的提到的c ...
- ASP.NET中Ajax的用法
在ASP.NET中应用Ajax的格式如下: 前台代码(用JQuery库) $.ajax({ type: "POST", async: true, url: "../Aja ...
- Asp.Net中使用OpenRowSet操作Excel表，导入Sql Server(实例)
有两种接口可供选择:Microsoft.Jet.OLEDB.4.0(以下简称 Jet 引擎)和Microsoft.ACE.OLEDB.12.0(以下简称 ACE 引擎). Jet 引擎大家都很熟悉,可 ...
- Asp.net中static变量和viewstate的使用方法(谨慎)
在.Net平台下进行CS软件开发时,我们经常遇到以后还要用到某些变量上次修改后的值,为了简单起见,很多人都习惯用static来定义这些变量,我也是.这样非常方便,下一次调用某个函数时该变量仍然保存的是 ...
随机推荐
- matlab算法转为c语言注意事项
matlab算法转为c语言后,影响c语言效率的关键在于multiword的产生,基于此会有multiword加减法和乘除法,极大消耗资源,减少甚至消除multiword很重要,需注意的是:算法中尽量减 ...
- rtrim，dirname，魔术常量用法
$str = "Hello World!!!"; echo $str . "<br>"; echo rtrim($str,"!d" ...
- 7天学会HTML-Day01
HTML初步 关键词: B/S C/S .服务器访问原理.标签.html特性.列表.图片 1.B/S 和C/S 架构 B/S -> browser/server 浏览器服务器架构 C/S -&g ...
- Struts2小demo遇到的几个问题
最近下了struts的2.5.10版本,想跑个小例子看看,结果遇到了不少的坑,大部分都是自己坑自己.先看操作步骤:首先导入struts2的8个核心jar包: commons-fileupload-1. ...
- windows抓包工具Wireshark（过滤）
1.IP过滤 ip.src ==192.168.0.208(ip.src eq 192.168.0.208) //来源等于某个ip ip.dst ==192.168.0.208(ip.dst eq 1 ...
- Fragment的陷阱:概述
现在主流的APP都会使用到Fragment,相信你也一定使用过,今天为大家介绍一下我曾经踏过的一个关于Fragment的坑. 以前做过的一个项目,Fragment嵌套高德地图,当再次进入Fragmen ...
- Cocos2D中的内部函数
virtual bool isVisible(); // 是否可见 virtual void setVisible(bool visible); // 设置是否可见 boo ...
- IDA Pro 权威指南学习笔记(七) - 其他 IDA 显示窗口
默认情况下 IDA 不会打开这些窗口,可通过 View -> Open Subviews 命令打开 Strings 窗口(Strings) Strings 窗口中显示的是从二进制文件中提取出的一 ...
- js 判断浏览器类型大全
/**** * 目前识别范围 * Microsoft Internet Explorer IE浏览器 * --> TheWorld 世界之窗 * --> TT浏览器 * --> 36 ...
- Java的Base64加密原理
出自: http://www.cnblogs.com/winner-0715/p/5920269.html http://www.cnblogs.com/koliop090/p/5203553.h ...