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++中static的全部作用
要理解static,就必须要先理解另一个与之相对的关键字,很多人可能都还不知道有这个关键字,那就是auto,其实我们通常声明的不用static修饰的变量,都是auto的,因为它是默认的,就象short ...
- AJAX实现仿Google Suggest效果
修复了一些细节代码(支持持续按键事件) *项目名称:AJAX实现类Google Suggest效果*作者:草履虫(也就是蓝色的ecma)*联系:caolvchong@gmail.com*时间:2007 ...
- 解决iptables和vsftpd设置的问题
解决iptables和vsftpd设置的问题 博客分类: linux/centos/ubuntu 防火墙J#工作 解决iptables和vsftpd设置的问题 修改 vi /etc/sysconfig ...
- Jsp helloWorld
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEnco ...
- 最常用的javascript方法函数
字符串长度截取 function cutstr(str, len) { var temp, icount = 0, patrn = /[^\x00-\xff]/, strre = "&quo ...
- [你必须知道的.NET]第三十一回，深入.NET 4.0之，从“新”展望
发布日期:2009.05.22 作者:Anytao © 2009 Anytao.com ,Anytao原创作品,转贴请注明作者和出处. /// <summary> /// 本文开始,将以& ...
- java for循环的几种写法
J2SE 1.5提供了另一种形式的for循环.借助这种形式的for循环,可以用更简单地方式来遍历数组和Collection等类型的对象.本文介绍使用这种循环的具体方式,说明如何自行定义能被这样遍历的类 ...
- ECharts案例教程1
原文:http://blog.csdn.net/whqet/article/details/42703973 简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,是百度的 ...
- powermockito “mock public 方法内部 Private方法的问题”
我需要测试的方法是 public 方法: public ResponseResult subscribe(SysSubscription sysSubscription) throws JsonGen ...
- Java多线程-线程的调度(守护线程)
本文转自http://www.cnblogs.com/linjiqin/p/3210004.html 感谢作者 守护线程与普通线程写法上基本没啥区别,调用线程对象的方法setDaemon(true), ...