点滴积累【C#】---Highcharts图形统计
效果：
思路：
后台获取数据！然后拼接为前台所要求的格式，再将拼接好的StringBuilder给了hidden控件！ 然后前台获取JQuery获取Hidden的值，最后将值赋给图形！
代码：
【前台】
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Statistical.aspx.cs" Inherits="Demo.Statistical" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="JS/Highcharts/jquery-1.5.2.min.js"></script>
<script src="JS/Highcharts/highcharts.js"></script>
<script src="JS/Highcharts/theme/grid.js"></script>
<script type="text/javascript">
var index = 0;
$(document).ready(function () {
// Loadpie();
LodaChartData('column'); //line
//点击切换图表
$("#SeriesType").click(function () {
var type = ['areaspline', 'line', 'scatter', 'column'];
for (var i = 0; i < type.length; i++) {
if (index == i) {
LodaChartData(type[index]);
index++;
if (index == 4) {
index = 0;
}
return false;
}
}
});
});
function LodaChartData(SeriesType) {
var hititle = $("#hititle").val();
var hidate = $("#hidate").val();
var hicontent = $("#hicontent").val();
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container', //放置图表的容器
plotBackgroundColor: "#fff",
plotBorderWidth: null,
defaultSeriesType: SeriesType //图表类型line, spline, area, areaspline, column, bar, pie , scatter
},
title: {
//text: '短信发送情况'
text: hititle
},
xAxis: {//X轴数据
//categories: ['一月份', '二月份', '三月份', '四月份', '五月份', '六月份', '七月份', '八月份', '九月份', '十月份', '十一月份', '十二月份'],
categories: eval(hidate),
labels: {
rotation: -45, //字体倾斜
align: 'right',
style: { fontsize: 'normal 19px 宋体' }
}
},
yAxis: {//Y轴显示文字
title: {
text: '发送量/条'
}
},
tooltip: {
enabled: true,
formatter: function () {
return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + Highcharts.numberFormat(this.y, 1);
}
},
plotOptions: {
column: {
dataLabels: {
enabled: true
},
enableMouseTracking: true//是否显示title
}
},
series: eval(hicontent)
//series: [{
// name: '通道1',
// data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
//}, {
// name: '通道2',
// data: [4.0, 2.9, 5.5, 24.5, 18.4, 11.5, 35.2, 36.5, 23.3, 38.3, 23.9, 3.6]
//}, {
// name: '通道3',
// data: [14.0, 12.9, 15.5, 14.5, 28.4, 21.5, 15.2, 16.5, 13.3, 28.3, 13.9, 13.6]
//}, {
// name: '通道4',
// data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
//}]
});
}
//JQuery饼图演示
function Loadpie() {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'piecontainer',
plotBackgroundColor: null,
plotBorderWidth: null,
defaultSeriesType: 'pie'
},
title: {
text: ''
},
tooltip: {
formatter: function () {
return '<b>' + this.point.name + '</b>: ' + this.percentage + ' %';
}
},
plotOptions: {
pie: {
allowPointSelect: true, //点击切换
cursor: 'pointer',
dataLabels: {
enabled: true,
color: Highcharts.theme.textColor || '#000000',
connectorColor: Highcharts.theme.textColor || '#000000',
formatter: function () {
return '<b>' + this.point.name + '</b>: ' + this.percentage + ' %';
}
},
showInLegend: true
}
},
series: [{
data: [
['成功', 20],
['失败', 20],
['其它', 60],
]
}]
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:HiddenField ID="hidate" runat="server" />
<asp:HiddenField ID="hititle" runat="server" />
<asp:HiddenField ID="hicontent" runat="server" />
<div >
<div >
<%--<div style="float: left; font-size: x-small;">
<img src="/Images/16/chart_bar.png" alt="" width="20" height="20" />
发送统计
</div>--%>
<div id="SeriesType" title="点击切换图表" style="float: right; padding-right: 10px; font-size: x-small; cursor: pointer;">更多图表</div>
</div>
<div style="height: 30px"></div>
<div style="height: 300px;">
<div id="container" style="height: 300px;">
</div>
</div>
</div>
</form>
</body>
</html>
【后台】
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls; namespace Demo
{
public partial class Statistical : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
hititle.Value = "报表统计";
getData();
}
//获得数据
void getData()
{
DataTable dt = getTable();
if (dt != null)
{
StringBuilder sbDate = new StringBuilder();
sbDate.Append("[");
string strDate = "";
//将table中的时间遍历到图形里面（拼接为它所要求的格式）
foreach (DataRow dr in dt.Rows)
{
if (strDate == "")
{
strDate = "'" + dr["allDate"].ToString() + "'";
}
else
{
strDate += ",'" + dr["allDate"].ToString() + "'";
}
}
sbDate.Append(strDate);
sbDate.Append("]");
hidate.Value = sbDate.ToString(); //将值给Hidden //将table中的数据遍历到图形里面（拼接为它所要求的格式）
StringBuilder sbData = new StringBuilder();
sbData.Append("[");
string strsuccess = "";
string strerror = "";
string strother = "";
foreach (DataRow dr in dt.Rows)
{
if (!string.IsNullOrEmpty(dr["success"].ToString()))
{
if (strsuccess == "")
{
strsuccess = dr["success"].ToString();
}
else
{
strsuccess += "," + dr["success"].ToString();
}
}
if (!string.IsNullOrEmpty(dr["error"].ToString()))
{
if (strerror == "")
{
strerror = dr["error"].ToString();
}
else
{
strerror += "," + dr["error"].ToString();
}
}
if (!string.IsNullOrEmpty(dr["other"].ToString()))
{
if (strother == "")
{
strother = dr["other"].ToString();
}
else
{
strother += "," + dr["other"].ToString();
}
}
}
sbData.Append("{name:'发送成功',data:[" + strsuccess + "]},{name:'发送其他',data:[" + strother + "]},{name:'发送失败',data:[" + strerror + "]}");
sbData.Append("]");
hicontent.Value = sbData.ToString(); //将值给Hidden
}
else
{
hidate.Value = "[]";
hicontent.Value = "[]";
}
}
//构造table
public DataTable getTable()
{
DataTable dt = new DataTable();
dt.Columns.Add("allDate", typeof(System.String));
dt.Columns.Add("success", typeof(System.String));
dt.Columns.Add("error", typeof(System.String));
dt.Columns.Add("other", typeof(System.String));
DataRow dr = dt.NewRow();
dr["allDate"] = "2014年1月";
dr["success"] = "";
dr["error"] = "";
dr["other"] = "";
dt.Rows.Add(dr);
DataRow dr1 = dt.NewRow();
dr1["allDate"] = "2014年2月";
dr1["success"] = "";
dr1["error"] = "";
dr1["other"] = "";
dt.Rows.Add(dr1);
DataRow dr2 = dt.NewRow();
dr2["allDate"] = "2014年3月";
dr2["success"] = "";
dr2["error"] = "";
dr2["other"] = "";
dt.Rows.Add(dr2);
DataRow dr3 = dt.NewRow();
dr3["allDate"] = "2014年4月";
dr3["success"] = "";
dr3["error"] = "";
dr3["other"] = "";
dt.Rows.Add(dr3);
DataRow dr4 = dt.NewRow();
dr4["allDate"] = "2014年5月";
dr4["success"] = "";
dr4["error"] = "";
dr4["other"] = "";
dt.Rows.Add(dr4);
DataRow dr5 = dt.NewRow();
dr5["allDate"] = "2014年6月";
dr5["success"] = "";
dr5["error"] = "";
dr5["other"] = "";
dt.Rows.Add(dr5);
DataRow dr6 = dt.NewRow();
dr6["allDate"] = "2014年7月";
dr6["success"] = "";
dr6["error"] = "";
dr6["other"] = "";
dt.Rows.Add(dr6);
DataRow dr7 = dt.NewRow();
dr7["allDate"] = "2014年8月";
dr7["success"] = "";
dr7["error"] = "";
dr7["other"] = "";
dt.Rows.Add(dr7);
DataRow dr8 = dt.NewRow();
dr8["allDate"] = "2014年9月";
dr8["success"] = "";
dr8["error"] = "";
dr8["other"] = "";
dt.Rows.Add(dr8);
DataRow dr9 = dt.NewRow();
dr9["allDate"] = "2014年10月";
dr9["success"] = "";
dr9["error"] = "";
dr9["other"] = "";
dt.Rows.Add(dr9);
DataRow dr10 = dt.NewRow();
dr10["allDate"] = "2014年11月";
dr10["success"] = "";
dr10["error"] = "";
dr10["other"] = "";
dt.Rows.Add(dr10);
DataRow dr11 = dt.NewRow();
dr11["allDate"] = "2014年12月";
dr11["success"] = "";
dr11["error"] = "";
dr11["other"] = "";
dt.Rows.Add(dr11);
return dt;
}
}
}
JS下载地址：
http://files.cnblogs.com/xinchun/Highcharts.rar
点滴积累【C#】---Highcharts图形统计的更多相关文章
- Highcharts图形报表的简单使用
Highcharts是一个纯JavaScript框架,与MSChart完全不一样,可以在网页中使用,所以php.asp.net.jsp等等页面中都可以使用.Highcharts官网:http://ww ...
- 【点滴积累】通过特性(Attribute)为枚举添加更多的信息
转:http://www.cnblogs.com/IPrograming/archive/2013/05/26/Enum_DescriptionAttribute.html [点滴积累]通过特性(At ...
- 移动前端webApp开发点滴积累20140629
#移动前端webApp开发点滴积累20140629 ##关于input行内居中的问题 给input设定一个比较高的高度,在某些版本的移动设备上,文字不能垂直居中,即使设定了相同的行高也不行.(见图) ...
- Vim编辑器点滴积累
Vim编辑器点滴积累 vim tab键空格数量控制 参考链接 临时:进入VIM,执行: :set tabstop=4 永久:编辑用户目录下.vimrc文件,添加:set tabstop=4 vim 安 ...
- 点滴积累【JS】---JQuery实现条形统计图，适用于选择题等统计
效果: 思路:前台JS实现动态数据效果,后台可以拼接字符串或者用JSON加载数据 代码: <%@ Page Language="C#" AutoEventWireup=&qu ...
- statpot:使用mongo+bootstrap+highcharts做统计报表
最近做了一个统计项目,这个统计项目大致的需求是统计接口的访问速度.客户端会调用一个接口来记录接口的访问情况,我的需求就需要分析这些数据,然后做出个统计报表. 需求实现 最初的时候想着每天把这些接口访问 ...
- highCharts 图表统计控件使用方法
1.首先引用js文件 在引用上面文件时,保证已经引用了jquery.js文件.且位置在上面两个文件之前. 2. <div id="container" style=" ...
- three.js - 动画 图形统计帧频 dat.GUI
运行一把: 代码解释: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- sql查询学习和实践点滴积累
https://blog.rjmetrics.com/2008/10/28/correlated-subqueries-in-mysql/ http://www.mysqltutorial.org/m ...
随机推荐
- WPF的UI虚拟化
许多时候,我们的界面上会呈现大量的数据,如包含数千条记录的表格或包含数百张照片的相册.由于呈现UI是一件开销比较大的动作,一次性呈现数百张照片就目前的电脑性能来说是需要占用大量内存和时间的.因此需要对 ...
- 一个简单的MVC模式练习
控制层Action接受从模型层DAO传来的数据,显现在视图层上. package Action; import java.sql.Connection; import java.sql.SQLExce ...
- c语言下的变量类型及计算
源码 补码 反码 机器数:一个数在计算机中的二进制表示形式, 叫做这个数的机器数.机器数是带符号的,在计算机用一个数的最高位存放符号, 正数为0, 负数为1. 真值:第一位是符号位,将带符号位的 ...
- ERDAS遥感图像配准、及其它一些基本处理
内容中包含 base64string 图片造成字符过多,拒绝显示
- [Android Pro] StorageManager简介
StorageManager StorageManager is the interface to the systems storage service. The storage manager h ...
- 微信自动抢红包android实现
AccessibilityService-微信自动抢红包 2018年02月01日 16:09:06 阅读数:1757 在领导发红包的时候,看到有些同事在1s.2s抢到红包,为什么他们能够这么快?一定是 ...
- nginxtomca负载均衡
Nginx 是一个高性能的 Web 和反向代理服务器, 它具有有很多非常优越的特性: 作为 Web 服务器:相比 Apache,Nginx 使用更少的资源,支持更多的并发连接,体现更高的效率,这点使 ...
- ylbtech-LanguageSamples-Indexers(索引器)
ylbtech-Microsoft-CSharpSamples:ylbtech-LanguageSamples-Indexers(索引器) 1.A,示例(Sample) 返回顶部 “索引器”示例 本示 ...
- Linux驱动mmap内存映射
mmap在linux哪里? 什么是mmap? 上图说了,mmap是操作这些设备的一种方法,所谓操作设备,比如IO端口(点亮一个LED).LCD控制器.磁盘控制器,实际上就是往设备的物理地址读写数据. ...
- SecureRandom产生强随机数简介
SecureRandom是强随机数生成器,主要应用的场景为:用于安全目的的数据数,例如生成秘钥或者会话标示(session ID),弱随机数生成器会产生严重的安全问题,而使用SecureRandom这 ...