JQuery Highcharts图表控件多样式显示多组数据
具体实现的效果如图：
具体代码：
ASP.NET前台脚本代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="WorkDoneChartByCenter.aspx.cs" Inherits="WorkDoneChartByCenter" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>工作量统计</title>
<script type="text/javascript" src="JScript/jquery.min.js"></script>
<script src="JScript/highcharts.js" type="text/javascript"></script>
<script src="JScript/modules/exporting.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<script type="text/javascript">
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container', //放置图表的容器
//defaultSeriesType: 'column', //图表类型
inverted: true //左右显示，默认上下正向
},
title: {
text: 'ITOMS工作量统计 - 中心', //图标的标题
style:{} //标题样式
},
subtitle: {
text: 'Source: itoms' //图标的副标题
},
xAxis: {
categories: <%= strXAxisCategories %>, //X轴的坐标值
labels: {
rotation: -,
align: 'right',
style: {font: 'normal 13px 宋体'}
}
},
yAxis: [{
labels: {
formatter: function() {
return this.value;
},
style: {
color: '#89A54E'
}
},
title: {
text: '任务单/实际工时/计划工时的数量',
style: {
color: '#89A54E'
}
}
}, {
title: {
text: '人员数量'
},
labels: {
formatter: function() {
return this.value;
},
style: {
color: '#4572A7'
}
},
opposite: true
}],
legend: { //【图例】位置样式
layout: 'horizontal', //【图例】显示的样式：水平（horizontal）/垂直（vertical）
backgroundColor: '#FFFFFF',
borderColor: '#CCC',
borderWidth: ,
align: 'center',
verticalAlign: 'top',
enabled:true,
y: ,
shadow: true
},
tooltip: {
formatter: function() { //当鼠标悬置数据点时的格式化提示
return '<b>'+ this.x +'</b><br/>'+ this.series.name + ': '+ Highcharts.numberFormat(this.y, );
}
},
credits: {
enabled: false
},
plotOptions: {
column: {
pointPadding: 0.2, //图表柱形的
borderWidth: //图表柱形的粗细
},bar: {
dataLabels: {
enabled: false
}
}
},
series:<%= seriesData.ToString() %>
});
});
</script>
<div id="container" style="min-width: 800px; height: 500px; margin: 0 2em"></div>
<div class="result"></div>
</form>
</body>
</html>
CS获取数据并处理数据的代码段：
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using ITOMS.BusinessLogic.Report;
using System.Text; public partial class WorkDoneChartByCenter : System.Web.UI.Page
{ public string strXAxisCategories = "";
public StringBuilder seriesData = new StringBuilder(); protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
StringBuilder xAxisCategories = new StringBuilder(); StringBuilder taskCount = new StringBuilder();//任务单数量
StringBuilder planHours = new StringBuilder();//计划工时（小时）
StringBuilder peopleCount = new StringBuilder();//实际人数
StringBuilder realHours = new StringBuilder();//实际工时（小时） xAxisCategories.Append("["); ReportLogic Logic = new ReportLogic();
DataTable dataList = Logic.GetWorkDoneByCenter();
foreach (DataRow dr in dataList.Rows)
{
xAxisCategories.Append("'");
xAxisCategories.Append(dr["CenterName"] == null ? "未知中心" : dr["CenterName"].ToString());
xAxisCategories.Append("',"); taskCount.Append(dr.IsNull("taskCount") ? "" : dr["taskCount"]);
taskCount.Append(",");
planHours.Append(dr.IsNull("planHours") ? "" : dr["planHours"]);
planHours.Append(",");
realHours.Append(dr.IsNull("realHours") ? "" : dr["realHours"]);
realHours.Append(",");
peopleCount.Append(dr.IsNull("peopleCount") ? "" : dr["peopleCount"]);
peopleCount.Append(",");
}
strXAxisCategories = xAxisCategories.Replace(",", "", xAxisCategories.Length - , ).Append("]").ToString();
seriesData.Append("[{name: '任务单数量',type: 'column',data: [");
seriesData.Append(taskCount.Replace(",", "", taskCount.Length - , ));
seriesData.Append("]}, {name: '计划工时（小时）',type: 'column',data: [");
seriesData.Append(planHours.Replace(",", "", planHours.Length - , ));
seriesData.Append("]}, {name: '实际工时（小时）',type: 'column',data: [");
seriesData.Append(realHours.Replace(",", "", realHours.Length - , ));
seriesData.Append("]}, {name: '人员数量',type: 'spline', yAxis: 1,data: [");
seriesData.Append(peopleCount.Replace(",", "", peopleCount.Length - , ));
seriesData.Append("]}]"); }
}
}
JQuery Highcharts图表控件多样式显示多组数据的更多相关文章
- 转：Highcharts图表控件的使用
摘要 Highcharts图表控件是目前使用最为广泛的图表控件.本文将从零开始逐步为你介绍Highcharts图表控件.通过本文,你将学会如何配置Highcharts以及动态生成Highchart图表 ...
- 在AngularJS中的使用Highcharts图表控件
一.Highcharts简介 Highcharts是一款非常好用的前端图表控件,正如其中文网介绍的那样:功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库. 如果你的项目是基于jquer ...
- ASP.NET中动态获取数据使用Highcharts图表控件【Copy By Internet】
具体实现的效果如图:
- 基于MVC4+EasyUI的Web开发框架经验总结（4）--使用图表控件Highcharts
在我们做各种应用的时候,我们可能都会使用到图表统计,以前接触过一些不同的图表控件,在无意中发现了图表控件Highcharts,其强大的功能和丰富的互动效果,令人难以忘怀.本篇主要介绍在Web开发中使用 ...
- HighChats图表控件显示精度小数点的方法
相信大家对highchats这个图表控件并不陌生,最近在项目中用到它,但是某些字段需要显示为小数点,顾查找资料文档发现下面两个方式可以实现: 初始化时候添加如下两个参数 tooltip:{ fo ...
- （转）基于MVC4+EasyUI的Web开发框架经验总结（4）--使用图表控件Highcharts
http://www.cnblogs.com/wuhuacong/p/3736564.html 在我们做各种应用的时候,我们可能都会使用到图表统计,以前接触过一些不同的图表控件,在无意中发现了图表控件 ...
- jquery easyui datebox 时间控件默认显示当前日期的实现方法
jquery easyui datebox 时间控件默认显示当前日期的实现方法 直接class easyui-datebox后添加一个value="true"就可以
- ASP.NET Core MVC TagHelper实践HighchartsNET快速图表控件-开源
ASP.NET Core MVC TagHelper最佳实践HighchartsNET快速图表控件支持ASP.NET Core. 曾经在WebForms上写过 HighchartsNET快速图表控件- ...
- HighchartsNET快速图表控件-开源
前言: HighchartsNET快速图表控件,基于Highcharts的asp.net web控件.只需几行代码你就能快速生成一个图表. 从此不再担心图表复杂.简单几行代码就可以搞定,节省大量工作时 ...
随机推荐
- 如何优化C语言代码(程序员必读)
1．选择合适的算法和数据结构 应该熟悉算法语言,知道各种算法的优缺点,具体资料请参见相应的参考资料,有很多计算机书籍上都有介绍.将比较慢的顺序查找法用较快的二分查找或乱序查找法代替,插入排序或冒泡排序 ...
- 15 个最佳的 jQuery 表格插件
现如今,网站开发设计的需求会要求自动适应所有移动设备,即响应式网站: 在开发网站时必须考虑对平板设备融合 fluid(流)和自适应性特点. 大多数网站设计要靠margins, guides, rows ...
- IE6 IE7 IE8(Q) 不支持 JSON 对象
标准参考 JSON 是一种数据交换格式,RFC 4627 对 JSON 进行了详细描述. 根据 ECMA-262(ECMAScript)第 5 版中描述,JSON 是一个包含了函数 parse 和 s ...
- Razor语法学习
原文:http://www.cnblogs.com/youring2/archive/2011/07/24/2115254.html 1.Razor的文件类型 Razor支持两种文件类型,分别是.cs ...
- Cloud Insight支持阿里云一键接入了，so what?
前几天 Cloud Insight 上线了一个新功能,考虑到目前只作为公测,所以只是是悄悄地加了一个接入项,希望你看完这偏文章会有兴趣体验一下. 相信体验过的用户(目前还是个位数)第一感受应该是:这个 ...
- jvm性能调优---jstat的用法
Jstat是JDK自带的一个轻量级小工具.全称“Java Virtual Machine statistics monitoring tool”,它位于java的bin目录下,主要利用JVM内建的指令 ...
- 在WCF中使用消息队列
在一些大型的解决方案中,假设我们的服务没有办法一直在线,或者因为这样那样的原因宕机了,有没有什么办法让客户端的影响最小化呢?答案是可以通过消息队列的方式,哪怕服务是没有在线的,客户端依然可以继续操作. ...
- 配置sshd_config中的PermitRootLogin设置root登录或者禁止root登录
在etc的sshd_config文件中,默认有PermitRootLogin no的配置,这个的意思是禁止root用户登录,如果想要允许root登录,需要su root用户到sshd_config下进 ...
- c# 委托 和 事件
当初学C#的时候,没有完全吃透的,只能现在继续了... 欠老账.... http://www.cnblogs.com/chengxingliang/archive/2013/05/21/305191 ...
- ios开发理解nil，Nil， NULL
nil是一个对象指针为空,Nil是一个类指针为空,NULL是基本数据类型为空.这些可以理解为nil,Nil, NULL的区别吧. iOS剪切板 UIPasteboard *pasteboard = [ ...