highcharts插件使用總結和開發中遇到的問題及解決辦法：
關鍵詞：highcharts 插件 使用 總結 開發 中 遇到 問題 解決辦法
在js p中使用highchart的步驟：
第一步：引入highchart必需的js 文件
<! -- jquery 的js 要在引入highchart插件的js 之前引入 -->
<script
src="<%=basepath%>js /highcharts3.0.8/jquery -1.8.3.js ">
</script>
<!-- 實現highchart核心功能的js -->
<script
src="<%=basepath%>js /highcharts3.0.8/highcharts.js ">
</script>
<!--
導出和打印相關的js ，因爲這裏修改過的exporting.js 包含中文，使用
charset="utf-8" 進行指定
-->
<script
src="<%=basepath%>js /highcharts3.0.8/exporting.js " charset="utf-8">
</script>view code
開發開發過程 遇到的問題：
1) js 的引入順序錯了，導致highchart的圖表出不來，
highchart插件中用到了jquery ，當時jquery -1.8.3.js 的引入順序放到了highchart插件js 的下面，
導致當加載highchart插件用到的js 時，找不到jquery 的js ，報出某個js 的函數不合法
因此 jquery 的js 要在引入highchart的js 之前引入
2) exporting.js 打印下載的js 中，提示的都是英文，
要顯示中文，這裏採用的開發方法 是修改exporting.js
p(s.lang,{printchart:”打印報表 “,downloadpng:”下載爲png格式圖片”,downloadjpeg:”下載爲jpeg格式圖片”,
downloadpdf:”下載爲pdf格式文檔”,downloadsvg:”下載爲svg格式矢量圖片”,contextbuttontitle:”打印 下載”});
修改後的效果：
當修改了exporting.js 後，當保存時，沒法保存js ，提示編碼問題
解決方法 是：
window>>preferences>>general>>content types
在右邊的窗口中打開列表,選中”javascript”，在下面的”default encoding”右邊的輸入框中輸入”utf-8”，再點”update”按鈕
單擊打印下載時，顯示的下拉框在大部分的ie瀏覽器中顯示的很難看，火狐下正常
原因: 上面的下拉框顯示很長，是由於hr標籤的原因，導致hr的寬度按照 100%進行了顯示
解決方法 ：
在顯示highchart圖標的js p頁面中，添加hr的樣式
<style>
hr{height: 0;margin: 0;padding: 0;width: 0;}
</style>第二步：組裝添加顯示highchart圖表所用的數據
顯示highchart圖標的js 代碼
$(function () {
//填充數據使用,使用jquery 來獲取隱藏域的值
var xaxistimeinfo = $("#xaxistime").val();
var totalrecordinfo = $("#totalrecord").val();
var totalrecordhyinfo = $("#totalrecordhy").val();
var totalrecordljinfo = $("#totalrecordlj").val();
$('#container').highcharts({
chart: {
type: 'spline'
},
title: {
text: '每月訂單數量統計'
},
subtitle: {
text: ''
},
exporting:{
filename:"訂單統計", //下載顯示的文件名稱
sourcewidth: 1000, //下載圖片的寬度
sourceheight: 550, //下載圖片的高度
//指定下載圖片的url，這裏使用的本地的java代碼，沒有使用官網的代碼(那//樣會受到highchart官網的網絡限制,這裏的java代碼是結合的struts 1來//實現的，在java代碼解決了導出圖片中中文亂碼的問題以及下載文件名亂碼//的問題,詳見java代碼中說明)
url:'<%=basepath%>shop/neword er/orderpre/exportimage.do'//這裏是一個重點哦,也可以修改exporting.js 中對應的url
},
/**
* 去掉圖標的右下角hightcharts.com 的圖標
*/
credits: {
enabled : false, //設置false就不會顯示右下角的官網鏈接
//右下角連接的顯示位置
position:{ align: 'right',x: -8, verticalalign: 'bottom',y: -390 },
//右下角鏈接的地址href:'<%=basepath%>shop/neword er/orderpre/ordersearch4highcharts.do?type=1',
text:'區域圖表',//右下角連接的名字
style : {cursor:'pointer',color:'#909090',fontsize:'20px'}
},
xaxis: {
categories: eval(xaxistimeinfo)
},
yaxis: {
min: 0,
title: {
text: '單位 (個)'
}
},
//鼠標旁邊的提示框的樣式
//1. point.y:.0f 提示框中顯示的y軸單位的小數點位數
//2. style="width:160px;height:50px" 提示框的寬高
//3. point.key 座標的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
}
},
//圖例的顯示名稱和數據
//這裏使用了eval函數處理一下，使用jquery 獲取到的隱藏域的值
//否則不會顯示
series: [{
name: '裸機數量',
data: eval(totalrecordljinfo)
}, {
name: '訂單總量',
data: eval(totalrecordinfo)
}, {
name: '合約機數量',
data: eval(totalrecordhyinfo)
}]
});
}); view code
基本的highchart顯示的數據格式是:
x軸數據信息
圖例和顯示數據的格式：
**因此我們要做的就是根據需求，在java後臺組裝好上面的數據，填充到highchart的js 代碼中即可
導出的java後臺代碼 (使用的是struts 1)沒有在struts 的配置文件中配置,直接是在js p中url請求
struts 1版的結合highchart導出圖片的java代碼
使用highchart調用本地的java類導出圖片時，用到的jar包
batik-all-1.6.jar fop.jar xerces-2.9.0.jar**
/**
* 配合highchart插件導出圖片
* @param mapping
* @param form
* @param request
* @param response
* @return
* @throws exception
*/
public actionforward exportimage (actionmapping mapping, actionform form,
httpservlet開發 request request, httpservlet開發 response response)
throws exception {
log.info("圖片導出................");
request.setcharacterencoding("gb2312");//設置編碼，解決亂碼問題
string type = request.getparameter("type");
string svg = request.getparameter("svg");
response.setcharacterencoding("gb2312");//設置編碼，解決亂碼問題
string filename = request.getparameter("filename");
filename = filename==null?"chart":filename;
servlet開發 outputstream 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"),"Iphone 蘋果 ios -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;
} view code
使用highchart生成報表 信息的部分後臺java代碼
開發中遇到的問題
在開發中使用了webservice，在dao層的java代碼中使用了map，但是map在webservice中並不支持，
解決方法 就是，在dao層的java代碼中把map中的數據使用js on-lib插件轉換成了js on
然後在action層中再使用js on-lib插件轉換成map
java代碼片段
dao層的代碼片段,查詢數據封裝成map，然後把map數據放到list中，然後在把list放到map中，調用js on-lib插件轉換成js on數據
list lthy = findsql(dto, sqlhy.tostring(), list.toarray());
list adminsqltotalhy = new arraylist();
//使用的linkedhashmap，放到map中的數據使用順序的
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數據轉化爲js on數據
js onobject js onobjectfrommap =js onobject.fromobject(recordinfo);
dto.setaddress(js onobjectfrommap.tostring()); view code
action層代碼
/**
* 1. 構造highchart的x軸用到的每月時間數據信息 (月份不足兩位的沒有補0,直接放在request中)<p/>
* 2. 返回值map中月份不足2位的，進行了補0，該map在構造每月訂單數量統計時使用
* @throws parseexception
*/
private map extracthighchartxaxisinfo(httpservlet開發 request request) throws parseexception {
simpledateformat simpledateformat = new simpledateformat("yyyy-mm-dd");
calendar curr = calendar.getinstance();
calendar curr2 = curr;
date beginpaydate = curr.gettime(); // 傳進來的當前時間
curr2.add(calendar.year, -1);
curr2.add(calendar.month, 1);
date endpaydate = curr2.gettime(); // 上一年的時間
gregoriancalendar[] ga=getdate(simpledateformat.format(endpaydate), simpledateformat.format(beginpaydate));
//循環數組
stringbuffer stringbuffer = new stringbuffer();
map initmap = new linkedhashmap();
stringbuffer.append("[");
for(gregoriancalendar e:ga)
{
stringbuffer.append("'"+modifytimeanthor(e)+"',");
initmap.put(modifytime(e), 0);
}
//當ga數組中有數據時才刪除末尾的 逗號
if(stringbuffer.length()>1){
stringbuffer.deletecharat(stringbuffer.length()-1);
}
stringbuffer.append("]");
log.info("x軸用到的每月時間數據信息 (月份不足兩位的沒有補0) "+stringbuffer.tostring());
request.setattribute("highchartxaxisinfo", stringbuffer.tostring());
return initmap;
}view code
/**
*
* @param starttime
* @param endtime
* @return 返回開始時間和結束時間之間的每一個月
* 如：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. 要求查詢當月以及向前倒推11個月(總共12的月)的數據<p/>
* 3. 如當前日期是 2014.01，則構造開始時間2013.02,結束時間2014.02,都是由於oracle的between and
* @param mulorderdto
*/
private void passdateinfo(tmulordercountdto mulorderdto) {
//傳遞月份信息
simpledateformat simpledateformat = new simpledateformat("yyyy-mm");
calendar curr = calendar.getinstance();
//注意這裏把curr變量的引用賦值給了curr2，當curr的值變化時，會影響到curr2的值
calendar curr2 = curr;
curr.add(calendar.month, 1);
date beginpaydate = curr.gettime(); // 傳進來的當前時間
curr2.add(calendar.year, -1);
date endpaydate = curr2.gettime(); // 上一年的時間
mulorderdto.setbeginpaydate(simpledateformat.format(endpaydate));
mulorderdto.setendpaydate(simpledateformat.format(beginpaydate));
}
view code
/**
* 構造每個月 訂單總量、合約機總量、裸機總量的字符串信息，用於填充highchart插件
* @param request
* @param str
*/
@suppresswarnings("unchecked")
private void extracthighchartrecordinfo(httpservlet開發 request request,
string str,map initmap) {
//接受最初傳進來的map,使用了linkedhashmap的構造開發方法 ，參數爲map
//由於數據的顯示問題，這裏構造了初始化的linkedhashmap(帶順序)
map originaltotalmap = new linkedhashmap(initmap);
map originaltotalljmap = new linkedhashmap(initmap);
map originaltotalhymap = new linkedhashmap(initmap);
//把js on數據重新轉換爲map數據
map<string, object> m = parsejs on2map(str);
//遍歷map，拿到map的key的集合的迭代對象
iterator<map.entry<string,object>> iterator = m.entryset().iterator();
while(iterator.hasnext()){
//拿到當前的迭代對象
map.entry<string, object> me = iterator.next();
//拿到當前迭代對象的key（可以看做map的key）
string key = me.getkey();
string keyw = key.substring(key.indexof("_")+1);
if("lj".equals(keyw)){
//拿到當前迭代對象的value，是list對象，取第一個元素拿到map
list li = (list) me.getvalue();
//拿到map
map map = (map) li.get(0);
//覆蓋一下初始化map的數據
originaltotalljmap.putall(map);
//拿到實際上保存數據的map集合,如保存每月裸機訂單數據的map
iterator<map.entry<string,object>> iterator1 = originaltotalljmap.entryset().iterator();
stringbuffer stringbufferlj = new stringbuffer();
stringbufferlj.append("[");
log.info("解析每月裸機數據..................................................");
while(iterator1.hasnext()){
map.entry<string, object> mea = iterator1.next();
//這裏的getkey獲取到是月份 如：2013.1
string keya = mea.getkey();
log.info(keya+" "+mea.getvalue());
// getvalue()是獲取當月的訂單數量，保存到stringbuffer中,並處理//stringbuffer數據使得滿足highchart插件的要求
stringbufferlj.append(mea.getvalue()+",");
}
//當iterator1中有數據時才刪除掉末尾的逗號
if(stringbufferlj.length()>1){
stringbufferlj.deletecharat(stringbufferlj.length()-1);
}
stringbufferlj.append("]");
log.info("裸機訂單數量 :"+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("解析每月合約機數據..................................................");
while(iterator1.hasnext()){
map.entry<string, object> mea = iterator1.next();
string keya = mea.getkey();
stringbufferhy.append(mea.getvalue()+",");
log.info(keya+" "+mea.getvalue());
}
//當iterator1中有數據時才刪除掉末尾的逗號
if(stringbufferhy.length()>1){
stringbufferhy.deletecharat(stringbufferhy.length()-1);
}
stringbufferhy.append("]");
log.info("合約機訂單數量 :"+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("解析每月訂單總量數據..................................................");
while(iterator1.hasnext()){
map.entry<string, object> mea = iterator1.next();
string keya = mea.getkey();
stringbuffertotal.append(mea.getvalue()+",");
log.info(keya+" "+mea.getvalue());
}
//當iterator1中有數據時才刪除掉末尾的逗號
if(stringbuffertotal.length()>1){
stringbuffertotal.deletecharat(stringbuffertotal.length()-1);
}
stringbuffertotal.append("]");
log.info("總訂單數量 :"+stringbuffertotal.tostring());
request.setattribute("totalrecord", stringbuffertotal.tostring());
}
}
} view code
highcharts效果圖
附上js p的代碼
<%@ 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: '每月訂單數量統計'
},
subtitle: {
text: ''
},
exporting:{
filename:"訂單統計",
sourcewidth: 1000,
sourceheight: 550,
url:'<%=basepath%>shop/neword er/orderpre/exportimage.do'//這裏是一個重點哦,也可以修改exporting.js 中對應的url
},
/**
* 去掉圖標的右下角hightcharts.com 的圖標
*/
credits: {
enabled : false,
position:{ align: 'right',x: -8, verticalalign: 'bottom',y: -390 },
href:'<%=basepath%>shop/neword er/orderpre/ordersearch4highcharts.do?type=1',
text:'區域圖表',
style : {cursor:'pointer',color:'#909090',fontsize:'20px'}
},
xaxis: {
categories: eval(xaxistimeinfo)
},
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: '裸機數量',
data: eval(totalrecordljinfo)
}, {
name: '訂單總量',
data: eval(totalrecordinfo)
}, {
name: '合約機數量',
data: eval(totalrecordhyinfo)
}]
});
});
function showareaview(){
window.document.location.href="<%=basepath%>shop/neword er/orderpre/ordersearch4highcharts.do?viewtype=1"
}
function showlineview(){
window.document.location.href="<%=basepath%>shop/neword er/orderpre/ordersearch4highcharts.do?viewtype=3"
}
</script>
</head>
<body>
<span onclick="showareaview();" style="cursor: pointer">區域圖顯示</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>
</<
