在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规则引擎】基本语法和相关属性介绍
一个规则的语法信息 [1]条件部分(LSH部分)===>规则pattern之间的连接条件符号: (1)LHS 部分是由一个或多个条件组成,条件又称之为 pattern(匹配模式),多个 pa ...
- jquery移除、绑定、触发元素事件
unbind(type [,data]) //data是要移除的函数 $('#btn').unbind("click"); //移除click $('#btn').unbind() ...
- JAVA内置注解 基本注解
温故而知新,可以为师矣! 每天复习,或者学习一点小东西,也能水滴石穿! 今天复习5个JAVA内置基本注解(贴代码胜过千言万语): package com.lf.test; import java.ut ...
- eclipse “”base revision” vs. “latest from repository”
base revision(基本版本):代表的是最近一次从svn服务器上面获取的版本内容:本质还是本地版本,只不过这个版本是上次从服务器上面获取的. lastest from resource(资源库 ...
- 「自己开发直播」rtmp-nginx-module实现直播状态、观看人数控制
这是自己搭建直播服务器.开发直播平台系列的文章,前面两篇文章分别为: 通过Nginx-rtmp-module搭建直播服务器并实现直播 实现nginx-rtmp-module多频道输入输出与权限控制 这 ...
- 【转】JMeter试用手记
JMeter是一款性能测试工具.个人认为与其说他是一个工具,不如说他是一个框架.因为JMeter的支持范围非常广,目前常见的需要进行性能测试的应用几乎都能应用(如:files, Servlets, P ...
- 【phonegap】用本地浏览器打开网页
<a id="ssl2" href="#" onclick="openLocalExplorer()">请点击跳到页面</ ...
- 三级联动第二种方法 三级联动数据.js
var data = { '0':{2:'北京',25:'天津',24:'上海',31:'重庆',130000:'河北省',140000:'山西省',150000:'内蒙古自治区',210000:'辽 ...
- Python类(一)-实例化一个类
#-*- coding:utf-8 -*- __author__ = "MuT6 Sch01aR" class Person(): n = 123 #类变量 def __init_ ...
- Python——通过斐波那契数列来理解生成器
一.生成器(generator) 先来看看一个简单的菲波那切数列,出第一个和第二个外,任意一个数都是由前两个数相加得到的.如:0,1,1,2,3,5,8,13...... 输入斐波那契数列前N个数: ...