在Asp.Net中使用amChart统计图

浏览数：133 / 时间：2015年06月09日

怎么在自己的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">

<title>amCharts examples</title>

</head>

<body>

<p>警告：只能在浏览器端下载统计图表文件。除了IE9可以在任何浏览器上执行，在IE10上运行最佳。</p>

</span>

</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();