在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来定义这些变量,我也是.这样非常方便,下一次调用某个函数时该变量仍然保存的是 ...
随机推荐
- Spring Aware接口---BeanNameAware BeanFactoryAware ApplicationContextAware
前言 对于应用程序来说,应该尽量减少对spring api的耦合程度,然后有时候为了运用spring提供的一些功能,有必要让bean了解spring容器对其管理的细节信息,如让bean知道在容器中是以 ...
- sqlalchemy 学习（二）scoped session
数据库设计的难点之一,是session生命周期的管理问题.sqlalchemy提供了一个简单的session管理机制,即scoped session.它采用的注册模式.所谓的注册模式,简单来说,是指在 ...
- php中 curl模拟post发送json并接收json（转）
本地模拟请求服务器数据,请求数据格式为json,服务器返回数据也是json. 由于需求特殊性, 如同步客户端的批量数据至云端, 提交至服务器的数据可能是多维数组数据了. 这时需要将此数据以一定的数据 ...
- 洛谷【P1757】通天之分组背包
浅谈\(DP\):https://www.cnblogs.com/AKMer/p/10437525.html 题目传送门:https://www.luogu.org/problemnew/show/P ...
- excel linux扩展
接近我的示例 http://ju.outofmemory.cn/entry/116399 http://tanxw.blog.51cto.com/4309543/1618576 http://blog ...
- 你知道PING功能是怎么实现的吗
以太网的协议有层,而每层都包含有更多的协议.所谓协议,通俗的讲就是通信双方约定的规则. 今天我们介绍一些一个听起来陌生却有很常用的协议,ICMP协议. ICMP是(Internet Control ...
- java多线程练习实例
总结: 循环的使用率蛮高,Thraed．sleep(),try-catch语句 package com.aa; public class West { public static void main( ...
- TCP之一：传输控制协议（Transmission Control Protocol, TCP）
TCP协议主为了在主机间实现高可靠性的包交换传输协议.本文将描述协议标准和实现的一些方法.因为计算机网络在现代社会中已经是不可缺少的了,TCP协议主要在网络不可靠的时候完成通信,对军方可能特别有用,但 ...
- Java-Maven-Runoob：Maven 依赖管理
ylbtech-Java-Maven-Runoob:Maven 依赖管理 1.返回顶部 1. Maven 依赖管理 Maven 一个核心的特性就是依赖管理.当我们处理多模块的项目(包含成百上千个模块或 ...
- PL/SQL 训练08--触发器
--什么是触发器呢?--一触即发,某个事件发生时,执行的程序块?--数据库触发器是一个当数据库发生某种事件时作为对这个事件的响应而执行的一个被命名的程序单元 --适合场景--对表的修改做验证--数据库 ...