JQuery highcharts图表控件例子
闻人鸿文
Highcharts 官网：
http://www.highcharts.me/
Highcharts 官网示例：http://www.highcharts.me/demo/index.php
Highcharts 官网文档：http://www.highcharts.me/api/index.html
具体见代码中的注视说明：
1、campaignInfo.jsp页面代码
<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@ page isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="./jquery/jquery.min.js"></script>
<script src="./jquery/highcharts/highcharts.js"></script>
<script type="text/javascript" src="./jquery/highcharts/themes/grid.js"></script>
<style type="text/css">
body {
background-color: RGB(241, 241, 241)
}
.showTable {
width: 100%;
font: normal 13px auto Microsoft YaHei, 微软雅黑, Arial, Lucida Grande,
Tahoma, sans-serif;
}
span.data {
border-bottom: 1px solid #000;
color: red;
text-align: right;
}
</style>
</head>
<body>
<script type="text/javascript">
$(function() {
//线型
$('#line').highcharts({
chart : {
//图表类型line直线图, spline曲线图, area区域图, areaspline区域曲线图, column柱状图, bar, pie饼装图 , scatter散布图
type : 'line',
marginRight : 130,
marginBottom : 25
},
title : {
text : '效果趋势图',
x : -20
},
subtitle : {
text : '[最近7天]',
x : -20
},
xAxis : {
categories : [ ${dateStr} ]//'10','20','30'
},
yAxis : [{
title : {
text : ''
},
plotLines : [ {
value : 0,
width : 1,
color : '#808080'
}],
labels: {
formatter: function() {return this.value + "名";},
style: {color: '#2F7ED8' }
},
reversed : true //y轴是否反向显示
}],
tooltip: {
formatter: function() { //当鼠标悬置数据点时的格式化提示
return '<b>'+ this.x +'</b><br/>'+ this.series.name + ': '+ Highcharts.numberFormat(this.y, 1);
}
},
legend : {
layout : 'vertical',
align : 'right',
verticalAlign : 'top',
x : -10,
y : 100,
borderWidth : 0
},
series : [
{
name : '${roiName}',
type: 'spline',
yAxis: 0,
data : [${roi}]//20,40,10
},{
name : '投资回报(元)',
color: '#FC5538',
type: 'spline',
yAxis: 0,
data : [${ro}]//30,20,10
}]
});
//柱型
$('#column').highcharts({
chart: {
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 }
});
//饼形图
$('#pie').highcharts({
chart: {
defaultSeriesType: 'pie',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
exporting:{
enabled:false //用来设置是否显示‘打印’,'导出'等功能按钮，不设置时默认为显示
},
title: {
text: '饼形图'
},
/* colors:[
'#FF00FF',
'#0000FF',
'#D8DDE3',
], */
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}%</b>',
percentageDecimals: 1
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
type: 'pie',
name: '值',
data: ${pieValue}
}]
});
});
</script>
<div id="line" style="min-width: 400px; height: 250px; margin: 0 auto"></div>
<div id="column"
style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<div id="pie" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
2、servlet后台代码
protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("to CharServlet");
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
request.setAttribute("dateStr", "'10','20','30'");
request.setAttribute("roi", "20,70,30");
request.setAttribute("ro", "30,20,10");
request.setAttribute("roiName", "成本回报");
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]}]";
String xAxisCategories = "['IT中心部门', '创前万博考试', '电大服务中心', '考试服务中心','财务部','学生服务中心','职教中心','总经办']";
request.setAttribute("returnValue", returnValue);
request.setAttribute("xAxisCategories", xAxisCategories);
String pieValue = "[['空闲',10],['已使用',60], ['交换空间',30]]";
request.setAttribute("pieValue", pieValue);
request.getRequestDispatcher("./campaignInfo.jsp").forward(request, response);
}
类似资料：