客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
|
怎么在自己的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 > <span style="font-family: Arial; font-size: 10px; color: #CC0000;"> <p>警告：只能在浏览器端下载统计图表文件。除了IE9可以在任何浏览器上执行，在IE10上运行最佳。</p> </span> <div ></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"; } } } |
请发表评论