猜你需要：
在jsp中使用Highchart的步驟：
第一步：引入highchart必需的js文件
<! -- jquery的js要在引入highchart插件的js之前引入 -->
<script
src="<%=basePath%>js/Highcharts3.0.8/jquery-1.8.3.js">
</script>
<!-- 實現(xiàn)highchart核心功能的js -->
<script
src="<%=basePath%>js/Highcharts3.0.8/highcharts.js">
</script>
<!--
導(dǎo)出和打印相關(guān)的js ，因為這里修改過的exporting.js包含中文，使用
charset="UTF-8" 進行指定
-->
<script
src="<%=basePath%>js/Highcharts3.0.8/exporting.js" charset="UTF-8">
</script>
開發(fā)過程遇到的問題：
1) Js的引入順序錯了，導(dǎo)致highchart的圖表出不來，
Highchart插件中用到了jquery，當(dāng)時jquery-1.8.3.js的引入順序放到了highchart插件js的下面，
導(dǎo)致當(dāng)加載highchart插件用到的js時，找不到j(luò)query的js，報出某個js的函數(shù)不合法
因此 jquery的js要在引入highchart的js之前引入
2) exporting.js 打印下載的js中，提示的都是英文，
要顯示中文，這里采用的方法是修改exporting.js
p(s.lang,{printChart:"打印報表",downloadPNG:"下載為PNG格式圖片",downloadJPEG:"下載為JPEG格式圖片",
downloadPDF:"下載為PDF格式文檔",downloadSVG:"下載為SVG格式矢量圖片",contextButtonTitle:"打印 下載"});
修改后的效果：
當(dāng)修改了exporting.js后，當(dāng)保存時，沒法保存js，提示編碼問題
解決方法是：
window>>preferences>>general>>content types
在右邊的窗口中打開列表,選中"JavaScript"，在下面的"default encoding"右邊的輸入框中輸入"utf-8"，再點"update"按鈕
單擊打印下載時，顯示的下拉框在大部分的ie瀏覽器中顯示的很難看，火狐下正常
原因: 上面的下拉框顯示很長，是由于hr標(biāo)簽的原因，導(dǎo)致hr的寬度按照 100%進行了顯示
解決方法：
在顯示highchart圖標(biāo)的jsp頁面中，添加hr的樣式
<style>
hr{height: 0;margin: 0;padding: 0;width: 0;}
</style>
第二步：組裝添加顯示highchart圖表所用的數(shù)據(jù)
顯示highchart圖標(biāo)的js代碼
$(function () {
//填充數(shù)據(jù)使用,使用jquery來獲取隱藏域的值
var xAxisTimeInfo = $("#xAxisTime").val();
var totalRecordInfo = $("#totalRecord").val();
var totalRecordHYInfo = $("#totalRecordHY").val();
var totalRecordLJInfo = $("#totalRecordLJ").val();
$('#container').highcharts({
chart: {
type: 'spline'
},
title: {
text: '每月訂單數(shù)量統(tǒng)計'
},
subtitle: {
text: ''
},
exporting:{
filename:"訂單統(tǒng)計", //下載顯示的文件名稱
sourceWidth: 1000, //下載圖片的寬度
sourceHeight: 550, //下載圖片的高度
//指定下載圖片的url，這里使用的本地的java代碼，沒有使用官網(wǎng)的代碼(那//樣會受到highchart官網(wǎng)的網(wǎng)絡(luò)限制,這里的java代碼是結(jié)合的struts1來//實現(xiàn)的，在java代碼解決了導(dǎo)出圖片中中文亂碼的問題以及下載文件名亂碼//的問題,詳見java代碼中說明) url:'<%=basePath%>shop/newOrder/orderPre/exportImage.do'//這里是一個重點哦,也可以修改exporting.js中對應(yīng)的url
},
/**
* 去掉圖標(biāo)的右下角HightCharts.com 的圖標(biāo)
*/
credits: {
enabled : false, //設(shè)置false就不會顯示右下角的官網(wǎng)鏈接
//右下角連接的顯示位置
position:{ align: 'right',x: -8, verticalAlign: 'bottom',y: -390 },
//右下角鏈接的地址href:'<%=basePath%>shop/newOrder/orderPre/orderSearch4HighCharts.do?type=1',
text:'區(qū)域圖表',//右下角連接的名字
style : {cursor:'pointer',color:'#909090',fontSize:'20px'}
},
xAxis: {
categories:
},
yAxis: {
min: 0,
title: {
text: '單位 (個)'
}
},
//鼠標(biāo)旁邊的提示框的樣式
//1. point.y:.0f 提示框中顯示的y軸單位的小數(shù)點位數(shù)
//2. style="width:160px;height:50px" 提示框的寬高
//3. point.key 坐標(biāo)的x軸的值
tooltip: {
headerFormat: '<span style="font-size:20px;">{point.key}</span><table style="width:160px;height:50px">',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.0f} </b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
//圖例的顯示名稱和數(shù)據(jù)
//這里使用了eval函數(shù)處理一下，使用jquery獲取到的隱藏域的值
//否則不會顯示
series: [{
name: '裸機數(shù)量',
data:
}, {
name: '訂單總量',
data:
}, {
name: '合約機數(shù)量',
data:
}]
});
});
基本的highchart顯示的數(shù)據(jù)格式是:
X軸數(shù)據(jù)信息
圖例和顯示數(shù)據(jù)的格式：
因此我們要做的就是根據(jù)需求，在java后臺組裝好上面的數(shù)據(jù)，填充到highchart的js代碼中即可
導(dǎo)出的Java后臺代碼 (使用的是struts1)沒有在struts的配置文件中配置,直接是在jsp中url請求
struts1版的結(jié)合highchart導(dǎo)出圖片的java代碼
使用highchart調(diào)用本地的java類導(dǎo)出圖片時，用到的jar包
batik-all-1.6.jar fop.jar xerces-2.9.0.jar
/**
* 配合highchart插件導(dǎo)出圖片
* @param mapping
* @param form
* @param request
* @param response
* @return
* @throws Exception
*/
public ActionForward exportImage (ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)
throws Exception {
log.info("圖片導(dǎo)出................");
request.setCharacterEncoding("gb2312");//設(shè)置編碼，解決亂碼問題
String type = request.getParameter("type");
String svg = request.getParameter("svg");
response.setCharacterEncoding("gb2312");//設(shè)置編碼，解決亂碼問題
String filename = request.getParameter("filename");
filename = filename==null?"chart":filename;
ServletOutputStream out = response.getOutputStream();
log.info("type :"+type+" filename:"+filename);
if (null != type && null != svg) {
svg = svg.replaceAll(":rect", "rect");
String ext = "";
Transcoder t = null;
if (type.equals("image/png")) {
ext = "png";
t = new PNGTranscoder();
} else if (type.equals("image/jpeg")) {
ext = "jpg";
t = new JPEGTranscoder();
}else if (type.equals("application/pdf")) {
ext = "pdf";
t =(Transcoder) new PDFTranscoder();
}else if(type.equals("image/svg+xml"))
ext = "svg";
//解決下載文件的文件名的亂碼
response.addHeader("Content-Disposition", "attachment; filename="+ new String (filename.getBytes("gb2312"),"iso-8859-1") + "."+ext);
response.addHeader("Content-Type", type);
if (null != t) {
TranscoderInput input = new TranscoderInput(new StringReader(svg));
TranscoderOutput output = new TranscoderOutput(out);
try {
t.transcode(input, output);
} catch (TranscoderException e) {
out.print("Problem transcoding stream. See the web logs for more details.");
e.printStackTrace();
}
} else if (ext.equals("svg")) {
OutputStreamWriter writer = new OutputStreamWriter(out, "UTF-8");
writer.append(svg);
writer.close();
} else
out.print("Invalid type: " + type);
} else {
response.addHeader("Content-Type", "text/html");
out.println("Usage:\n\tParameter [svg]: The DOM Element to be converted." +
"\n\tParameter [type]: The destination MIME type for the elment to be transcoded.");
}
out.flush();
out.close();
return null;
}
使用highchart生成報表信息的部分后臺java代碼
開發(fā)中遇到的問題
- 在開發(fā)中使用了webservice，在dao層的java代碼中使用了Map，但是Map在webservice中并不支持，
- 解決方法就是，在dao層的java代碼中把Map中的數(shù)據(jù)使用json-lib插件轉(zhuǎn)換成了Json
- 然后在action層中再使用json-lib插件轉(zhuǎn)換成Map
java代碼片段
Dao層的代碼片段,查詢數(shù)據(jù)封裝成map，然后把map數(shù)據(jù)放到List中，然后在把list放到map中，調(diào)用json-lib插件轉(zhuǎn)換成json數(shù)據(jù)
List ltHY = findSQL(dto, sqlHY.toString(), list.toArray());
List adminSqlTotalHY = new ArrayList();
//使用的LinkedHashMap，放到map中的數(shù)據(jù)使用順序的
Map<String ,String> totalRecordHYMap = new LinkedHashMap<String ,String>();
for (int i = 0; ltHY!=null && i < ltHY.size(); i++) {
Object[] obj = (Object[]) ltHY.get(i);
totalRecordHYMap.put(obj[0]!=null?String.valueOf(obj[0]):"" ,obj[1]!=null? String.valueOf(obj[1]):"");
}
adminSqlTotalHY.add(totalRecordHYMap);
//保存到map中
Map recordInfo = new LinkedHashMap();
recordInfo.put("Record_total", adminSqlTotalList);
recordInfo.put("Record_LJ", adminSqlTotalLJ);
recordInfo.put("Record_HY", adminSqlTotalHY);
//把map數(shù)據(jù)轉(zhuǎn)化為json數(shù)據(jù)
JSONObject jsonObjectFromMap =JSONObject.fromObject(recordInfo);
dto.setAddress(jsonObjectFromMap.toString());
action層代碼
/**
* 1. 構(gòu)造HighChart的x軸用到的每月時間數(shù)據(jù)信息 (月份不足兩位的沒有補0,直接放在request中)<P/>
* 2. 返回值map中月份不足2位的，進行了補0，該map在構(gòu)造每月訂單數(shù)量統(tǒng)計時使用
* @throws ParseException
*/
private Map extractHighChartXAxisInfo(HttpServletRequest request) throws ParseException {
SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd");
Calendar curr = Calendar.getInstance();
Calendar curr2 = curr;
Date beginPayDate = curr.getTime(); // 傳進來的當(dāng)前時間
curr2.add(Calendar.YEAR, -1);
curr2.add(Calendar.MONTH, 1);
Date endPayDate = curr2.getTime(); // 上一年的時間
GregorianCalendar[] ga=getDate(simpleDateFormat.format(endPayDate), simpleDateFormat.format(beginPayDate));
//循環(huán)數(shù)組
StringBuffer stringBuffer = new StringBuffer();
Map initMap = new LinkedHashMap();
stringBuffer.append("[");
for(GregorianCalendar e:ga)
{
stringBuffer.append("'"+modifyTimeAnthor(e)+"',");
initMap.put(modifyTime(e), 0);
}
//當(dāng)ga數(shù)組中有數(shù)據(jù)時才刪除末尾的 逗號
if(stringBuffer.length()>1){
stringBuffer.deleteCharAt(stringBuffer.length()-1);
}
stringBuffer.append("]");
log.info("x軸用到的每月時間數(shù)據(jù)信息 (月份不足兩位的沒有補0) "+stringBuffer.toString());
request.setAttribute("highChartXAxisInfo", stringBuffer.toString());
return initMap;
}
/**
*
* @param startTime
* @param endTime
* @return 返回開始時間和結(jié)束時間之間的每一個月
* 如：2013.1 2013.2 2013.3 2013.4 2013.5 2013.6 2013.7
* @throws ParseException
*/
public static GregorianCalendar[] getDate(String startTime,String endTime) throws ParseException
{
Vector<GregorianCalendar> v=new Vector<GregorianCalendar>();
SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM");
GregorianCalendar gc1=new GregorianCalendar(),gc2=new GregorianCalendar();
gc1.setTime(sdf.parse(startTime));
gc2.setTime(sdf.parse(endTime));
do{
GregorianCalendar gc3=(GregorianCalendar)gc1.clone();
v.add(gc3);
gc1.add(Calendar.MONTH, 1);
}while(!gc1.after(gc2));
return v.toArray(new GregorianCalendar[v.size()]);
}
//按格式獲取時間,月份不足兩位的補0
public static String modifyTime(GregorianCalendar e){
String curdate = e.get(Calendar.YEAR)+"";
if((e.get(Calendar.MONTH)+1)<10){
curdate = curdate+".0" +(e.get(Calendar.MONTH)+1);
}else {
curdate = curdate+"."+(e.get(Calendar.MONTH)+1);
}
return curdate;
}
//按格式獲取時間,月份不足兩位的沒有補0
public static String modifyTimeAnthor(GregorianCalendar e){
String curdate = e.get(Calendar.YEAR)+"";
curdate = curdate+"."+(e.get(Calendar.MONTH)+1);
return curdate;
}
/**
* 1. 傳遞查詢時間段的日期信息<p/>
* 2. 要求查詢當(dāng)月以及向前倒推11個月(總共12的月)的數(shù)據(jù)<p/>
* 3. 如當(dāng)前日期是 2014.01，則構(gòu)造開始時間2013.02,結(jié)束時間2014.02,都是由于oracle的between and
* @param mulOrderDTO
*/
private void passDateInfo(TMulOrderCountDTO mulOrderDTO) {
//傳遞月份信息
SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM");
Calendar curr = Calendar.getInstance();
//注意這里把curr變量的引用賦值給了curr2，當(dāng)curr的值變化時，會影響到curr2的值
Calendar curr2 = curr;
curr.add(Calendar.MONTH, 1);
Date beginPayDate = curr.getTime(); // 傳進來的當(dāng)前時間
curr2.add(Calendar.YEAR, -1);
Date endPayDate = curr2.getTime(); // 上一年的時間
mulOrderDTO.setBeginPayDate(simpleDateFormat.format(endPayDate));
mulOrderDTO.setEndPayDate(simpleDateFormat.format(beginPayDate));
}
/**
* 構(gòu)造每個月 訂單總量、合約機總量、裸機總量的字符串信息，用于填充highChart插件
* @param request
* @param str
*/
@SuppressWarnings("unchecked")
private void extractHighChartRecordInfo(HttpServletRequest request,
String str,Map initMap) {
//接受最初傳進來的map,使用了LinkedHashMap的構(gòu)造方法，參數(shù)為map
//由于數(shù)據(jù)的顯示問題，這里構(gòu)造了初始化的LinkedHashMap(帶順序)
Map originalTotalMap = new LinkedHashMap(initMap);
Map originalTotalLJMap = new LinkedHashMap(initMap);
Map originalTotalHYMap = new LinkedHashMap(initMap);
//把json數(shù)據(jù)重新轉(zhuǎn)換為Map數(shù)據(jù)
Map<String, Object> m = parseJSON2Map(str);
//遍歷map，拿到map的key的集合的迭代對象
Iterator<Map.Entry<String,Object>> iterator = m.entrySet().iterator();
while(iterator.hasNext()){
//拿到當(dāng)前的迭代對象
Map.Entry<String, Object> me = iterator.next();
//拿到當(dāng)前迭代對象的key（可以看做map的key）
String key = me.getKey();
String keyW = key.substring(key.indexOf("_")+1);
if("LJ".equals(keyW)){
//拿到當(dāng)前迭代對象的value，是List對象，取第一個元素拿到map
List li = (List) me.getValue();
//拿到map
Map map = (Map) li.get(0);
//覆蓋一下初始化map的數(shù)據(jù)
originalTotalLJMap.putAll(map);
//拿到實際上保存數(shù)據(jù)的Map集合,如保存每月裸機訂單數(shù)據(jù)的map
Iterator<Map.Entry<String,Object>> iterator1 = originalTotalLJMap.entrySet().iterator();
StringBuffer stringBufferLJ = new StringBuffer();
stringBufferLJ.append("[");
log.info("解析每月裸機數(shù)據(jù)..................................................");
while(iterator1.hasNext()){
Map.Entry<String, Object> mea = iterator1.next();
//這里的getKey獲取到是月份 如：2013.1
String keya = mea.getKey();
log.info(keya+" "+mea.getValue());
// getValue()是獲取當(dāng)月的訂單數(shù)量，保存到StringBuffer中,并處理//StringBuffer數(shù)據(jù)使得滿足highchart插件的要求
stringBufferLJ.append(mea.getValue()+",");
}
//當(dāng)iterator1中有數(shù)據(jù)時才刪除掉末尾的逗號
if(stringBufferLJ.length()>1){
stringBufferLJ.deleteCharAt(stringBufferLJ.length()-1);
}
stringBufferLJ.append("]");
log.info("裸機訂單數(shù)量 :"+stringBufferLJ.toString());
request.setAttribute("totalRecordLJ", stringBufferLJ.toString());
}
if("HY".equals(keyW)){
List li = (List) me.getValue();
//拿到map
Map map = (Map) li.get(0);
originalTotalHYMap.putAll(map);
Iterator<Map.Entry<String,Object>> iterator1 = originalTotalHYMap.entrySet().iterator();
StringBuffer stringBufferHY = new StringBuffer();
stringBufferHY.append("[");
log.info("解析每月合約機數(shù)據(jù)..................................................");
while(iterator1.hasNext()){
Map.Entry<String, Object> mea = iterator1.next();
String keya = mea.getKey();
stringBufferHY.append(mea.getValue()+",");
log.info(keya+" "+mea.getValue());
}
//當(dāng)iterator1中有數(shù)據(jù)時才刪除掉末尾的逗號
if(stringBufferHY.length()>1){
stringBufferHY.deleteCharAt(stringBufferHY.length()-1);
}
stringBufferHY.append("]");
log.info("合約機訂單數(shù)量 :"+stringBufferHY.toString());
request.setAttribute("totalRecordHY", stringBufferHY.toString());
}
if("total".equals(keyW)){
List li = (List) me.getValue();
//拿到map
Map map = (Map) li.get(0);
originalTotalMap.putAll(map);
Iterator<Map.Entry<String,Object>> iterator1 = originalTotalMap.entrySet().iterator();
StringBuffer stringBufferTotal = new StringBuffer();
stringBufferTotal.append("[");
log.info("解析每月訂單總量數(shù)據(jù)..................................................");
while(iterator1.hasNext()){
Map.Entry<String, Object> mea = iterator1.next();
String keya = mea.getKey();
stringBufferTotal.append(mea.getValue()+",");
log.info(keya+" "+mea.getValue());
}
//當(dāng)iterator1中有數(shù)據(jù)時才刪除掉末尾的逗號
if(stringBufferTotal.length()>1){
stringBufferTotal.deleteCharAt(stringBufferTotal.length()-1);
}
stringBufferTotal.append("]");
log.info("總訂單數(shù)量 :"+stringBufferTotal.toString());
request.setAttribute("totalRecord", stringBufferTotal.toString());
}
}
}
附上jsp的代碼
<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<head>
<script src="<%=basePath%>js/Highcharts3.0.8/jquery-1.8.3.js"></script>
<script src="<%=basePath%>js/Highcharts3.0.8/highcharts.js"></script>
<script src="<%=basePath%>js/Highcharts3.0.8/exporting.js" charset="UTF-8"></script>
<style>
hr{height: 0;margin: 0;padding: 0;width: 0;}
</style>
<script>
$(function () {
var xAxisTimeInfo = $("#xAxisTime").val();
var totalRecordInfo = $("#totalRecord").val();
var totalRecordHYInfo = $("#totalRecordHY").val();
var totalRecordLJInfo = $("#totalRecordLJ").val();
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: '每月訂單數(shù)量統(tǒng)計'
},
subtitle: {
text: ''
},
exporting:{
filename:"訂單統(tǒng)計",
sourceWidth: 1000,
sourceHeight: 550,
url:'<%=basePath%>shop/newOrder/orderPre/exportImage.do'//這里是一個重點哦,也可以修改exporting.js中對應(yīng)的url
},
/**
* 去掉圖標(biāo)的右下角HightCharts.com 的圖標(biāo)
*/
credits: {
enabled : false,
position:{ align: 'right',x: -8, verticalAlign: 'bottom',y: -390 },
href:'<%=basePath%>shop/newOrder/orderPre/orderSearch4HighCharts.do?type=1',
text:'區(qū)域圖表',
style : {cursor:'pointer',color:'#909090',fontSize:'20px'}
},
xAxis: {
categories:
},
yAxis: {
min: 0,
title: {
text: '單位 (個)'
}
},
tooltip: {
headerFormat: '<span style="font-size:20px;">{point.key}</span><table style="width:160px;height:50px">',
pointFormat: '<tr><td style="padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.0f} </b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: '裸機數(shù)量',
data:
}, {
name: '訂單總量',
data:
}, {
name: '合約機數(shù)量',
data:
}]
});
});
function showAreaView(){
window.document.location.href="<%=basePath%>shop/newOrder/orderPre/orderSearch4HighCharts.do?viewType=1"
}
function showLineView(){
window.document.location.href="<%=basePath%>shop/newOrder/orderPre/orderSearch4HighCharts.do?viewType=3"
}
</script>
</head>
<body>
<span onclick="showAreaView();" style="cursor: pointer">區(qū)域圖顯示</span> |
<span onclick="showLineView();" style="cursor: pointer">曲線圖顯示</span> |
<span style="font-weight: 900;color: red;cursor: default">柱狀圖</span>
<div id="container" style="min-width:90%;height:90%;"></div>
<input type="hidden" id="totalRecordLJ" value="${totalRecordLJ}"></input>
<input type="hidden" id="totalRecordHY" value="${totalRecordHY}"></input>
<input type="hidden" id="totalRecord" value="${totalRecord}"></input>
<input type="hidden" id="xAxisTime" value="${highChartXAxisInfo}"></input>
</body>
</html>
原文：
標(biāo)簽：
JavaScript HTML5圖表插件開發(fā)highcharts
本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請郵件反饋至chenjj@ke049m.cn
半島外圍網(wǎng)上直營 
4次
相關(guān)產(chǎn)品
正式授權(quán)
最新文章 
半島外圍網(wǎng)上直營相關(guān)的文章 
微信
在線咨詢
渝公網(wǎng)安備
50010702500608號
客服熱線