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# 中的 == 和 equals()有什么区别？
如以下代码: 1 2 3 4 5 6 7 8 9 int age = 25; short newAge = 25; Console.WriteLine(age == newAge); //t ...
- 7 天玩转 ASP.NET MVC — 第 6 天
目录 第 1 天 第 2 天 第 3 天 第 4 天 第 5 天 第 6 天 第 7 天 0. 前言 欢迎来到第六天的 MVC 系列学习中.希望你在阅读此篇文章的时候,已经学习了前五天的内容,这也是第 ...
- POJ 3301 Texas Trip （三分）
题目链接 题意 : 给你若干个点,让你找最小的正方形覆盖这所有的点.输出面积. 思路 : 三分枚举正方形两对边的距离,然后求出最大,本题用的是旋转正方形,也可以用旋转点,即点的相对位置不变. 正方形从 ...
- 初始BOM
1.BOM(Browser Object Model),定义了操作浏览器的借口 2.常用的BOM对象:Window, History,Navigator,Screen, Location等 3.由于浏 ...
- JDK环境变量解析
设置环境变量 在java 中需要设置三个环境变量(1.5之后不用再设置classpath了,但个人强烈建议继续设置以保证向下兼用问题)JDK安装完成之后我们来设置环境变量:右击“我的电脑”,选择“属性 ...
- mfc和win32区别
Win32通常是指sdk编程方法,app没有被封装,开发人员需要自己搭程序框架:mfC则是以C++类的形式封装了Windows的API,并且包含一个应用程序框架,以减少应用程序开发人员的工作量 (整理 ...
- vi / vim 删除以及翻页 其它命令
vim中翻页的命令 vim中翻页的命令 整页翻页 ctrl-f ctrl-b f就是forword b就是backward 翻半页 ctrl-d ctlr-u d=down u=up 滚一行 ctrl ...
- Android核心分析之十七电话系统之rilD
Android电话系统之-rild Rild是Init进程启动的一个本地服务,这个本地服务并没有使用Binder之类的通讯手段,而是采用了socket通讯这种方式.RIL(Radio Interfac ...
- Android笔记——RecyclerView替代ListView
ListView是常用列表控件,但设置Adapter时自定义代码较为复杂,因此Android3.0后,增加RecyclerView替代ListView RecyclerView没有提供OnItemCl ...
- module.xml 快捷代码
以下内容为淘宝装修模块描述文件(module.xml)快捷代码块,可以快速调整模块信息,详解请查阅>> http://open.taobao.com/doc/detail.htm?id=1 ...