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控件.只需几行代码你就能快速生成一个图表. 从此不再担心图表复杂.简单几行代码就可以搞定,节省大量工作时 ...
随机推荐
- UML 2.0(装载)
在世界上统一建模语言UML2.0是完全不同的维度.它在本质上更加复杂和广泛. 与UML1.5版本相比,文件的程度也增加了. UML2.0中还增加了新的功能,所以它的使用可以更广泛. UML2.0将正式 ...
- 2014 ACM/ICPC Asia Regional Xi'an Online Paint Pearls
传说的SB DP: 题目 Problem Description Lee has a string of n pearls. In the beginning, all the pearls have ...
- 【面试题042】翻转单词顺序VS左旋转字符串
[面试题042]翻转单词顺序VS左旋转字符串 题目一: 输入一个英文句子,反转句子中单词的顺序,但单词内字符的顺序不变.为简单起见,标点符号和普通字母一样处理. 例如输入字符串“I a ...
- POJ 2028
#include <iostream> #define MAXN 200 using namespace std; int mark[MAXN]; int main() { //freop ...
- LoaderManager使用详解（四）---实例：AppListLoader
实例:AppListLoader 这篇文章将是我的第四篇,也就是最后一篇该系列的文章.请在评论里面告诉我他们是否有用.前面几篇文章的链接如下: 一:Loaders之前世界 二:了解Loader ...
- ExtJs之文本框及数字输入
结合HTML来理解, 比较容易. <!DOCTYPE html> <html> <head> <title>ExtJs</title> &l ...
- Good Bye 2015 C. New Year and Domino 二维前缀
C. New Year and Domino They say "years are like dominoes, tumbling one after the other". ...
- poj 3522(最小生成树应用)
题目链接:http://poj.org/problem?id=3522思路:题目要求最小生成树中最大边与最小边的最小差值,由于数据不是很大,我们可以枚举最小生成树的最小边,然后kruskal求最小生成 ...
- 记一段使用node对mysql数据库做处理
所用到的存储过程如下: temp_get_userCount: BEGIN #Routine body goes here... SELECT COUNT(id) as num FROM tbl_us ...
- Java 网络编程(二)
以下例开始本文的内容: 例1,需求:上传图片. 客户端: 服务端点. 读取客户端已有的图片数据. 通过socket输出流将数据发给服务端. 读取服务端反馈信息. 关闭. class PicClient ...