在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来定义这些变量,我也是.这样非常方便,下一次调用某个函数时该变量仍然保存的是 ...
随机推荐
- Java JDK安装和配置(Windows)
安装和配置JDK JDK中自带了JRE,不需要单独下载, 打开JDK安装, 选择安装目录,下一步,装完JDK,会问是否安装JRE,选下一步, 最后还会问是否安装Java FX, 装完后就全部完成了JD ...
- 《C#求职宝典》读书笔记
王小科 电子工业出版 第一篇 面试求职第一步 一个例子:一支行军中的队伍长100米,一个传令兵从队尾跑至队头,再立即返回队尾,队伍正好前进了100米.假设队伍 和传令兵行进的速度恒定,问传令兵跑了多少 ...
- 使用PHP判断是否为微信、支付宝等移动设备访问代码
在开发过程中经常遇到根据不同的设备显示不同的数据或者在页面样式上做不同的布局,另外在做支付接口的时候也可能会判断当前是什么设备访问,例如判断如果是微信内置浏览器访问则只启用微信支付功能,如果是支付宝内 ...
- fn project 试用之后的几个问题
今天试用fnproject 之后自己有些思考,后面继续解决 1. 目前测试是强依赖 dockerhub 的,实际可能不是很方便 2. 如何与k8s .mesos.docker swarm 集成 ...
- (转)setTextColor()的参数设置方式
setTextColor()的参数设置方式 分类: Android界面研究2011-12-09 23:27 11160人阅读 评论(2) 收藏 举报 查了下资料发现setTextColor()的参数应 ...
- flyplane
看到别人的一个简单制作打飞机的demo,先保存下来有空可以研究一下: <!DOCTYPE html> <html lang="en"> <head&g ...
- 容器中跨主机的网络方案-Calico
容器中的网络是建立docker集群的重要内容. 本文将介绍如何用Calico实现容器的多节点互通. Calico的组件结构如下: Calico通过etcd同步Bridge的信息,各个Docker no ...
- erlang的dict和maps模块
erlang在r17以后增加了map这个数据结构,在之前,类似map的需求用dict模块来实现,这里直接贴一下相关的操作 dict D = dict:new(). D1 = dict:store(k1 ...
- 【转】CentOs中Apache开启rewrite模块详解
rewrite是apache环境的一个伪静态功能了,如果我们没有没让Apache开启rewrite功能,网站上所有的rewrite规则都不可使用. centos的配置文件放在: /etc/httpd/ ...
- nginx config的多个config配置
在我们的一台服务器上,一个nginx服务器下面可能跑着许多许多的项目; 那么就需要配置多个对应的配置 端口号 已经文件入库目录等等 那么项目多了以后,把这些项目都写到一个文件里 到后期难以查看与管理 ...