具体实现的效果如图：

具体代码：

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图表控件多样式显示多组数据的更多相关文章

  1. 转：Highcharts图表控件的使用

    摘要 Highcharts图表控件是目前使用最为广泛的图表控件.本文将从零开始逐步为你介绍Highcharts图表控件.通过本文,你将学会如何配置Highcharts以及动态生成Highchart图表 ...

  2. 在AngularJS中的使用Highcharts图表控件

    一.Highcharts简介 Highcharts是一款非常好用的前端图表控件,正如其中文网介绍的那样:功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库. 如果你的项目是基于jquer ...

  3. ASP.NET中动态获取数据使用Highcharts图表控件【Copy By Internet】

    具体实现的效果如图:

  4. 基于MVC4+EasyUI的Web开发框架经验总结（4）--使用图表控件Highcharts

    在我们做各种应用的时候,我们可能都会使用到图表统计,以前接触过一些不同的图表控件,在无意中发现了图表控件Highcharts,其强大的功能和丰富的互动效果,令人难以忘怀.本篇主要介绍在Web开发中使用 ...

  5. HighChats图表控件显示精度小数点的方法

    相信大家对highchats这个图表控件并不陌生,最近在项目中用到它,但是某些字段需要显示为小数点,顾查找资料文档发现下面两个方式可以实现: 初始化时候添加如下两个参数 tooltip:{    fo ...

  6. （转）基于MVC4+EasyUI的Web开发框架经验总结（4）--使用图表控件Highcharts

    http://www.cnblogs.com/wuhuacong/p/3736564.html 在我们做各种应用的时候,我们可能都会使用到图表统计,以前接触过一些不同的图表控件,在无意中发现了图表控件 ...

  7. jquery easyui datebox 时间控件默认显示当前日期的实现方法

    jquery easyui datebox 时间控件默认显示当前日期的实现方法 直接class easyui-datebox后添加一个value="true"就可以

  8. ASP.NET Core MVC TagHelper实践HighchartsNET快速图表控件-开源

    ASP.NET Core MVC TagHelper最佳实践HighchartsNET快速图表控件支持ASP.NET Core. 曾经在WebForms上写过 HighchartsNET快速图表控件- ...

  9. HighchartsNET快速图表控件-开源

    前言: HighchartsNET快速图表控件,基于Highcharts的asp.net web控件.只需几行代码你就能快速生成一个图表. 从此不再担心图表复杂.简单几行代码就可以搞定,节省大量工作时 ...

随机推荐

  1. Linux 配置网络

    1.vi  /etc/sysconfig/network-scripts/ifcfg-eth0 2. # Advanced Micro Devices [AMD] 79c970 [PCnet32 LA ...

  2. 测试c语言函数调用性能因素之测试三

    函数调用:即调用函数调用被调用函数,调用函数压栈,被调用函数执行,调用函数出栈,调用函数继续执行的一个看似简单的过程,系统底层却做了大量操作. 操作: 1,               调用函数帧指针 ...

  3. 彻底理解js中this的指向

    首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为什么会有问题,虽然 ...

  4. javascript实现数据结构：串--定长顺序存储表示以及kmp算法实现

    串(string)(或字符串)是由零个或多个字符组成的有限序列.串中字符的数目称为串的长度.零个字符的串称为空串(null string),它的长度为零. 串中任意个连续的字符组成的子序列称为该串的子 ...

  5. Git 10 周年之际，创始人 Linus Torvalds 访谈

    点这里 十年前的这一周,linux 内核社区面临一个根本性的挑战:他们不再能够使用他们的修复控制系统:BitKeeper,同时其他的软件配置管理遇到了对分布式系统的新需求.Linus Torvalds ...

  6. HDU 1421 搬寝室

    搬寝室 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submiss ...

  7. Cygwin,Mingw

    MinGW vs Cygwin MinGW是Minimalistic GNU for Windows的缩写,也就是Win版的GCC. Cygwin则是全面模拟了Linux的接口,提供给运行在它上面的的 ...

  8. .Net知识点总结（一）

    1.文件上传:Jquery.uploadify  它依赖于flash  舍去起上传   功能  改用SWFupload  他是第三方的插件 2.验证码激活的时候,邮箱开始是写死的,但是为了以后更改邮箱 ...

  9. Hbase Shell命令

    1 启动HBase shell 2 HBase shell 命令 3 我们将以“一个学生成绩表”的例子来详细介绍常用的 HBase 命令及其使用方法. 这里 grad 对于表来说是一个列,course ...

  10. 用C语言写个程序推算出是星期几？（用泰勒公式实现）

    在日常生活中,我们常常遇到要知道某一天是星期几的问题.有时候,我们还想知道历史上某一天是星期几.比如: “你出生的那一天是星期几啊?” “明年五一是不是星期天?我去找你玩?” 通常,解决这个问题的最简 ...