JQuery Highcharts图表控件使用说明
Highcharts 官网：http://www.highcharts.com
Highcharts 官网示例：http://www.highcharts.com/demo/
Highcharts 官网文档：http://www.highcharts.com/documentation/how-to-use
具体见代码中的注视说明：
代码<%@ 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', //图表类型line, spline, area, areaspline, column, bar, pie , scatter
//zoomType: 'x', //放大
inverted: false //左右显示，默认上下正向
},
title: {
text: 'ITOMS工作量统计', //图标的标题
style:{} //标题样式
},
subtitle: {
text: '按中心统计' //图标的副标题
},
xAxis: {
categories: <%= xAxisCategories %>, //X轴的坐标值
labels: {
rotation: -45,
align: 'right',
style: {font: 'normal 13px 宋体'}
}
},
yAxis: {
min: 0,
title: {text: '数量（小时/个数）'} //Y轴坐标标题 labels:纵柱标尺
},
legend: { //【图例】位置样式
layout: 'horizontal', //【图例】显示的样式：水平（horizontal）/垂直（vertical）
backgroundColor: '#FFFFFF',
borderColor: '#CCC',
borderWidth: 1,
align: 'center',
verticalAlign: 'top',
enabled:true,
//x: 100,
y: 50,
//floating: true,
shadow: true
},
//loading: { 需要配合chart.showLoading();使用
// hideDuration: 10000,
// showDuration: 10000
//},
tooltip: {
formatter: function() { //当鼠标悬置数据点时的格式化提示
return '<b>'+ this.x +'</b><br/>'+ this.series.name + ': '+ Highcharts.numberFormat(this.y, 1);
}
},
credits: {
enabled: false
},
plotOptions: {
column: {
pointPadding: 0.2, //图表柱形的
borderWidth: 0 //图表柱形的粗细
},bar: {
dataLabels: {
enabled: false
}
}
},
series:<%= returnValue %>
});
//chart.showLoading();
});
</script>
<div id="container" style="min- 800px; height: 500px; margin: 0 2em"></div>
<div class="result"></div>
</form>
</body>
</html>
<!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', //图表类型line, spline, area, areaspline, column, bar, pie , scatter
//zoomType: 'x', //放大
inverted: false //左右显示，默认上下正向
},
title: {
text: 'ITOMS工作量统计', //图标的标题
style:{} //标题样式
},
subtitle: {
text: '按中心统计' //图标的副标题
},
xAxis: {
categories: <%= xAxisCategories %>, //X轴的坐标值
labels: {
rotation: -45,
align: 'right',
style: {font: 'normal 13px 宋体'}
}
},
yAxis: {
min: 0,
title: {text: '数量（小时/个数）'} //Y轴坐标标题 labels:纵柱标尺
},
legend: { //【图例】位置样式
layout: 'horizontal', //【图例】显示的样式：水平（horizontal）/垂直（vertical）
backgroundColor: '#FFFFFF',
borderColor: '#CCC',
borderWidth: 1,
align: 'center',
verticalAlign: 'top',
enabled:true,
//x: 100,
y: 50,
//floating: true,
shadow: true
},
//loading: { 需要配合chart.showLoading();使用
// hideDuration: 10000,
// showDuration: 10000
//},
tooltip: {
formatter: function() { //当鼠标悬置数据点时的格式化提示
return '<b>'+ this.x +'</b><br/>'+ this.series.name + ': '+ Highcharts.numberFormat(this.y, 1);
}
},
credits: {
enabled: false
},
plotOptions: {
column: {
pointPadding: 0.2, //图表柱形的
borderWidth: 0 //图表柱形的粗细
//pointWidth:15 你想显示的宽度(number型）
},bar: {
dataLabels: {
enabled: false
}
}
},
series:<%= returnValue %>
});
//chart.showLoading();
});
</script>
<div id="container" style="min- 800px; height: 500px; margin: 0 2em"></div>
<div class="result"></div>
</form>
</body>
</html>
代码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;
public partial class WorkDoneChartByCenter : System.Web.UI.Page
{
public string returnValue = "[{name: '任务单数量',data: [370.0,162.0,13,13,370.0,162.0,13,13]}, {name: '计划工时（小时）',data: [120,23,25,2,370.0,162.0,13,13]}, {name: '实际人数',data: [60,43,65,20,30.0,12.0,13,103]}, {name: '实际工时（小时）',data: [89,57,114,26,32,52.0,43,63]}]";
public string xAxisCategories = "['IT中心部门', '创前万博考试', '电大服务中心', '考试服务中心','财务部','学生服务中心','职教中心','总经办']";
protected void Page_Load(object sender, EventArgs e)
{
}
}
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;
public partial class WorkDoneChartByCenter : System.Web.UI.Page
{
public string returnValue = "[{name: '任务单数量',data: [370.0,162.0,13,13,370.0,162.0,13,13]}, {name: '计划工时（小时）',data: [120,23,25,2,370.0,162.0,13,13]}, {name: '实际人数',data: [60,43,65,20,30.0,12.0,13,103]}, {name: '实际工时（小时）',data: [89,57,114,26,32,52.0,43,63]}]";
public string xAxisCategories = "['IT中心部门', '创前万博考试', '电大服务中心', '考试服务中心','财务部','学生服务中心','职教中心','总经办']";
protected void Page_Load(object sender, EventArgs e)
{
}
}
截图：截出来图片的颜色丢失，实际颜色效果可以参考Highcharts官网提供的实例
