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);
}