在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来定义这些变量,我也是.这样非常方便,下一次调用某个函数时该变量仍然保存的是 ...
随机推荐
- Visual Studio 常用快捷键（一）
最近看到很多同事用 VI 来开发Ruby,Python脚本. 编辑代码全部用的是快捷键,效率很高. 其实Visual Stuido也有非常多的快捷键,熟练运用后,能大大提高工作效率. 本文介绍一些最常 ...
- C#反射 -- 基础
两个现实中的例子:1.B超:大家体检的时候大概都做过B超吧,B超可以透过肚皮探测到你内脏的生理情况.这是如何做到的呢?B超是B型超声波,它可以透过肚皮通过向你体内发射B型超声波,当超声波遇到内脏壁的时 ...
- C#网络编程(基本概念和操作) - Part.1
引言 C#网络编程系列文章计划简单地讲述网络编程方面的基础知识,由于本人在这方面功力有限,所以只能提供一些初步的入门知识,希望能对刚开始学习的朋友提供一些帮助.如果想要更加深入的内容,可以参考相关书籍 ...
- 如何给 FastAdmin 单独设置域名
如何给 FastAdmin 单独设置域名 (声明:不建议给后台固定的域名,主要是安全问题) FastAdmin 是基于 ThinkPHP5 框架编写的,ThinkPHP 5 支持域名路由,可对模块单独 ...
- List<Map> 排序
import java.util.ArrayList; import java.util.Collections; import java.util.Comparator; import java.u ...
- java中十进制转换为任意进制
次笔试时候遇到的关于十进制转换成十三进制的编程题. 先说说简单的思路吧: 1.十进制数 num 转换为 n进制 num%n结果肯定为n进制数的最后一位 结果存入一个数组中 2.进入一个循环num!=0 ...
- RK3288 dts文件中背光配置参数
backlight { // 设备名(用于匹配) compatible = "pwm-backlight"; // pwm编号 通道 频率(ns) pwms = <& ...
- 使用Inno SetUp脚本打包Winform程序
在开发桌面程序时,往往需要用到打包工具将程序打包为exe可执行文件. 之前在项目中用了下 InstallShield Limited Edition for Visual Studio 2015,它 ...
- unittest之跳过用例（skip） (含如何调用类里面函数相互调取变量的方法)
当测试用例写完后,有些模块有改动时候,会影响到部分用例的执行,这个时候我们希望暂时跳过这些用例. 或者前面某个功能运行失败了,后面的几个用例是依赖于这个功能的用例,如果第一步就失败了,后面的用例也就没 ...
- 【转】Jmeter分布式部署文档
很多时候,我们测试时,如果进行大数据量的并发测试时,单个电脑的CPU和内存可能无法承受,这个时候,我们需要进行一个分布式的测试,比如10000个并发,使用三台电脑来进行并发,Jmeter提供了这种功能 ...