Highcharts插件常見問題及解決辦法

在jsp中使用Highchart的步驟：

第一步：引入highchart必需的js檔案

1 2 3 4 5 6 7 8 9 10 11 12

<!-- -- 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>

開發過程遇到的問題：

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圖示的jsp頁面中，添加hr的樣式

第二步：組裝添加顯示highchart圖表所用的資料

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84

顯示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代碼是結合的struts1來//實作的，在java代碼解決了導出圖檔中中文亂碼的問題以及下載下傳檔案名亂碼//的問題,詳見java代碼中說明)               url:'<%=basePath%>shop/newOrder/orderPre/exportImage.do'//這裡是一個重點哦,也可以修改exporting.js中對應的url  }, credits: { enabled :  false ,  //設定false就不會顯示右下角的官網連結 //右下角連接配接的顯示位置         position:{ align:  'right' ,x: -8, verticalAlign:  'bottom' ,y: -390 }, //右下角連結的位址href:'<%=basePath%>shop/newOrder/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>' , pointFormat:  '' + '' , footerFormat:  '<table style="width:160px;height:50px"><tbody><tr><td style="color:{series.color};padding:0">{series.name}: </td><td style="padding:0"><b>{point.y:.0f}  </b></td></tr></tbody></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) }] }); });

基本的highchart顯示的資料格式是:

X軸資料資訊

圖例和顯示資料的格式：

是以我們要做的就是根據需求，在java背景組裝好上面的資料，填充到highchart的js代碼中即可

導出的Java背景代碼    (使用的是struts1)沒有在struts的配置檔案中配置,直接是在jsp中url請求

struts1版的結合highchart導出圖檔的java代碼

使用highchart調用本地的java類導出圖檔時，用到的jar包

batik-all-1.6.jar  fop.jar     xerces-2.9.0.jar

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67

public ActionForward exportImage (ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse 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; 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代碼

開發中遇到的問題

1. 在開發中使用了webservice，在dao層的java代碼中使用了Map，但是Map在webservice中并不支援，
2. 解決方法就是，在dao層的java代碼中把Map中的資料使用json-lib插件轉換成了Json
3. 然後在action層中再使用json-lib插件轉換成Map

java代碼片段

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

Dao層的代碼片段,查詢資料封裝成map，然後把map資料放到List中，然後在把list放到map中，調用json-lib插件轉換成json資料 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資料轉化為json資料 JSONObject jsonObjectFromMap =JSONObject.fromObject(recordInfo); dto.setAddress(jsonObjectFromMap.toString());</string></string>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

action層代碼 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();  // 傳進來的目前時間 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; }</p>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61

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; } 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)); }</p></gregoriancalendar></gregoriancalendar>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105

@SuppressWarnings( "unchecked" ) private void extractHighChartRecordInfo(HttpServletRequest request, String str,Map initMap) { //接受最初傳進來的map,使用了LinkedHashMap的構造方法，參數為map //由于資料的顯示問題，這裡構造了初始化的LinkedHashMap(帶順序) Map originalTotalMap =  new LinkedHashMap(initMap); Map originalTotalLJMap =  new LinkedHashMap(initMap); Map originalTotalHYMap =  new LinkedHashMap(initMap); //把json資料重新轉換為Map資料 Map<string, object= "" > m = parseJSON2Map(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()); } } }</string,></map.entry<string,object></string,></map.entry<string,object></string,></map.entry<string,object></string,></map.entry<string,object></string,>

附上jsp的代碼

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111

<%@ page language= "java" import= "java.util.*" pageEncoding= "GBK" %> <% String path = request.getContextPath(); String basePath = request.getScheme()+ "://" +request.getServerName()+ ":" +request.getServerPort()+path+ "/" ; %> <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/newOrder/orderPre/exportImage.do' //這裡是一個重點哦,也可以修改exporting.js中對應的url  }, credits: { enabled :  false , position:{ align:  'right' ,x: -8, verticalAlign:  'bottom' ,y: -390 }, href: '<%=basePath%>shop/newOrder/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/newOrder/orderPre/orderSearch4HighCharts.do?viewType=1" } function showLineView(){ window.document.location.href= "<%=basePath%>shop/newOrder/orderPre/orderSearch4HighCharts.do?viewType=3" } </script> <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 type= "hidden" id= "totalRecordHY" value= "${totalRecordHY}" > <input type= "hidden" id= "totalRecord" value= "${totalRecord}" > <input type= "hidden" id= "xAxisTime" value= "${highChartXAxisInfo}" >