点滴积累【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 ...
随机推荐
- NHibernate官方文档中文版-框架架构（Architecture）
总体概览 一个非常高层次的NHibernate架构: 这个图展示了NHibernate使用数据库和配置信息来为应用程序提供持久化服务(和持久化对象). 我们想展示一个更加详细的运行时架构.但是NHib ...
- mysql语句总结
mysql语句总结 -- 1,通过windows提供的服务管理来完成 -- services.msc -- 2,dos下的命令来完成 -- 停止 -- net stop mysql -- 启动 -- ...
- [EF]使用EF简单增删改查
目录 认识EF 添加数据 删除数据 修改数据 查询数据 总结 认识EF ADO.NET Entity Framework 是微软以ADO.NET为基础所发展出来的对象关系对伊(O/R Mapping) ...
- 安装maven,eclipse及eclipse配置maven
现在的eclipse,maven安装非常简单.下载解压就可以用. 官网上下载eclipse, https://www.eclipse.org/downloads/eclipse-packages/ 选 ...
- simple_strtoul()
//此函数有以下几点值得注意: //1.第一个参数中的const.一般在函数的形参中,如果我们只是希望调用者使用该参数,而不会去改变该参数 // 内容(一般是指针指向的内容),则可以声明为co ...
- 启用 Jenkins 持续构建 .NET 程序,关于配置nuget关键点
网上关于 Jenkins + net 的文章一大堆,这里只贴出 配置中的关键点, 第一步: 从官网下载 nuget.exe 安装包进行安装, 如果项目是用 vs2017 开发的 需要特别注意,nuge ...
- 流畅的python第十二章继承的优缺点学习记录
子类化内置类型的缺点 多重集成和方法解析顺序 tkinter
- [视频解说]Java(JDK的下载安装及第一个程序执行)
(JDK的下载安装及第一个程序执行) 内容:Java JDK 的安装以及HelloWorld 程序的执行 欢迎童鞋们前往围观 http://v.youku.com/v_show/id_XODA3Mzk ...
- BEA公司的weblogic是什么？有什么特点？
转自:http://zhidao.baidu.com/link?url=J9obKwHhuh1sdLoBC3pILeaq1nz_tcpScggBNeS3D0GzAz9FI002vlS2xxJD4_z6 ...
- 云计算之路-阿里云上-新发现：又一种与虚拟内存有关的CPU波动情况
在云上真是无奇不有,昨天偶然间发现在IIS的应用程序池回收设置中,仅仅设置了一下基于虚拟内存限制的回收,就引发了CPU有规律的波动.在这篇博文中,我们将向大家汇报一下云计算之路上的这个小发现. 在之前 ...