溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
highcharts是基于javascript的圖表庫，可以很簡單快捷的在web應用程序中添加交互性很強的圖表，可以免費提供給個人，非商業用途使用，支持的圖表類型有曲線圖、區域圖、柱狀圖、餅狀圖、散狀點圖和綜合圖表。
highcharts圖表的界面美觀，因為是通過javascript編寫的，所以不需要安裝插件即可運行，且運行的速度極快，兼容性好。本人親測在IE8(需要將IE8的瀏覽器模式設置成IE8(B),文本模式設置為IE8標準),firefox33.0，Chrome28.0下圖表顯示良好，圖表導出PNG,JPEG,PDF,SVG位圖功能完全正常。附上在IE8上顯示的圖表截圖一張。
以上圖表的顯示請參照http://www.stepday.com/topic/?951上的示例。如果要實現圖表導出png或者jpeg等的功能的話，頁面除了引用highcharts的核心js文件highcharts.js之外，還需要引用modules/exporting.js，除此之外，還需要修改下exporting.js，如果要鼠標懸浮出現中文的提示，將printChart ，downloadPNG ，downloadJPEG ，downloadPDF ，downloadSVG，contextButtonTitle 換成中文提示即可，如下所示：
printChart : "打印圖表",downloadPNG : "導出 PNG 圖像",
downloadJPEG : "導出 JPEG 圖像",downloadPDF : "導出 PDF 文檔",
downloadSVG : "Download SVG vector p_w_picpath",contextButtonTitle : "圖表導出"
還需要將enctype : "multipart/form-data"這行代碼注釋或者去掉，如果不將這行代碼注釋或者去掉的話，通過servlet或者action是無法通過提取svg的xml,通過fop將圖表轉為jpeg格式的圖片的。原因在于highcharts的exporting.js中采用的form是mulipart/form類型，使servlet或者action通過request的request.getParemeter獲取到的svg的xml字符串為空(具體可以通過控制臺輸出查看)，因此無法輸出jpeg格式的圖片。我們要輸出圖片，pdf，SVG位圖還需要用到batik-all-1.6.jar(此jar包中集成了很多開源的jar包核心的處理jar包為batik-codec.jar，它是apache項目組下面的一個專門用來處理圖形生成技術的開源產品：
The Apache XML Graphics Project currently consists of the following sub-projects, each focused on a different aspect of XML Graphics:
Apache Batik - A toolkit for Scalable Vector Graphics (SVG), based in Java
Apache FOP - A print formatter & renderer for XSL-FO (FO=formatting objects), based in Java
Apache XML Graphics Commons - A library with various components used by Apache Batik and Apache FOP, written in Java
具體是啥意思就有勞各位大神自己去翻譯了，所以java通過xml(json)等格式的數據轉換為可以收縮大小的矢量圖片的功能，當然，其中也有不少依賴的jar包，打開batik-all-1.6.jar我們就可以看到，如下)，fop.jar,xerces.jar，這些jar包的來源請自己百度(谷歌被墻了，百度就湊合著用吧)，當然我盡量在附件中上傳這些jar包，highcharts-3.0.1的的js文件請自行下載，現在需要用到的js文件修改完成，jar包也齊全了。現在來看具體的jsp頁面代碼(此代參照別人的代碼，自己手動加入了下載的功能)。
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="<%=basePath%>Highcharts-3.0.1/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="<%=basePath%>Highcharts-3.0.1/highcharts.js"></script>
<script type="text/javascript" src="<%=basePath%>Highcharts-3.0.1/modules/exporting.js"></script>
<script type="text/javascript" src="<%=basePath%>js/chart.js"></script>
<script type="text/javascript" charset="UTF-8">
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: '數據點線性顏色漸變效果'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
]
},
yAxis: {
min: 0,
title: {
text: '雨量值 (mm)'
}
},
tooltip: {
headerFormat: '<span >{point.key}</span><table>',
pointFormat: '<tr><td >{series.name}: </td>' +
'<td ><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0,
dataLabels:{
enabled:true, //是否顯示數據標簽
}
}
},
credits: {
//去掉右下角顯示的Highcharts.com聲明
enabled: false
},
exporting : {
filename : 'chart',
url : 'http://localhost:8080/chart/saveAsImage',//可以修改exporting.js中對應的url，這里的url會讓exporting.js中的無效
},
series: [{
name: 'Tokyo hot',
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
}, function (chart) {
SetEveryOnePointColor(chart);
});
});
</script>
</head>
<body>
<div id="container" ></div>
</body>
</html>實現顏色漸變的chart.js代碼
//定義一個全局顏色數組(淺藍色，深藍色，淺綠色，沙棕色，深卡布色，天藍色，沙***，寶藍色，馬棕色，灰色，閃光綠色，深灰色)
var colorArr = [
'#7CB5EC',
'#7171C6',
'#90ED7D',
'#F7A35C',
'#BDB76B',
'#87CEEB',
'#E4D354',
'#436EEE',
'#8D4653',
'#8B8B83',
'#00EE00',
'#B0B0B0'
];
//設置每一個數據點的顏色值
function SetEveryOnePointColor(chart) {
//獲得第一個序列的所有數據點
var pointsList = chart.series[0].points;
//遍歷設置每一個數據點顏色
for (var i = 0; i < pointsList.length; i++) {
chart.series[0].points[i].update({
color: {
linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 }, //橫向漸變效果 如果將x2和y2值交換將會變成縱向漸變效果
stops: [
[0, Highcharts.Color(colorArr[i]).setOpacity(1).get('rgba')],
[0.5, 'rgb(255, 255, 230)'],
[1, Highcharts.Color(colorArr[i]).setOpacity(1).get('rgba')]
]
}
});
}
}servlet代碼
package com.servlet;
import java.io.IOException;
import java.io.StringReader;
import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.batik.transcoder.Transcoder;
import org.apache.batik.transcoder.TranscoderException;
import org.apache.batik.transcoder.TranscoderInput;
import org.apache.batik.transcoder.TranscoderOutput;
import org.apache.batik.transcoder.p_w_picpath.JPEGTranscoder;
import org.apache.batik.transcoder.p_w_picpath.PNGTranscoder;
import org.apache.fop.svg.PDFTranscoder;
public class SaveAsImage extends HttpServlet {
/**
*
*/
private static final long serialVersionUID = 1L;
public SaveAsImage() {
super();
}
public void destroy() {
super.destroy();
}
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");// 設置編碼
String type = request.getParameter("type");
String svg = request.getParameter("svg");
String filename = request.getParameter("filename");
// String scale = request.getParameter("scale");
filename = filename == null ? "chart" : filename;
ServletOutputStream out = response.getOutputStream();
if (null != type && null != svg) {
svg = svg.replaceAll(":rect", "rect");
// 定義文件后綴名
String ext = "";
Transcoder t = null;
if (type.equals("p_w_picpath/png")) {
ext = "png";
t = new PNGTranscoder();
} else if (type.equals("p_w_picpath/jpeg")) {
ext = "jpg";
t = new JPEGTranscoder();
} else if (type.equals("p_w_picpath/svg+xml")) {
ext = "svg";
} else if (type.equals("application/pdf")) {
ext = "pdf";
t = (Transcoder) new PDFTranscoder();
}
response.addHeader("Content-Disposition", "p_w_upload; filename=chart." + 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("編碼流錯誤.");
e.printStackTrace();
}
} else if (ext == "svg") {
svg = svg.replace("http://www.w3.org/2000/svg", "http://www.w3.org/TR/SVG11/");
out.print(svg);
} else {
out.print("Invalid type: " + type);
}
} else {
response.addHeader("Content-Type", "text/html");
}
out.flush();
out.close();
}
public void init() throws ServletException {
}
}web.xml配置代碼
<?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <servlet> <servlet-name>saveAsImage</servlet-name> <servlet-class>com.servlet.SaveAsImage</servlet-class> </servlet> <servlet-mapping> <servlet-name>saveAsImage</servlet-name> <url-pattern>/saveAsImage</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>aa.jsp</welcome-file> </welcome-file-list> </web-app>
圖表的顯示與下載功能到此就OK了。
現在來進入本文的重點，結合json實現圖表的展示。由于本人的項目中用到了struts2，所以實現圖表導出為png，jpeg也是采用的action來實現了，將上面的servlet改寫為struts2的action來說應該沒啥難度，這里就請廣大程序猿自己動手一試吧。既然用到了JSON，就需要用到相關的jar包，我這里用的是json-lib-2.1-jdk15.jar(當然，你也可以使用StringBuffer去手動拼接來實現JSON的格式，前提是你不怕麻煩，不嫌繁瑣，不怕出錯)，在action中，只需要簡單的幾句代碼就能將List集合轉換成JSON格式的數據,并通過out.print輸出到jsp頁面，具體代碼如下：
HttpServletResponse response = ServletActionContext.getResponse();
PrintWriter out = response.getWriter();
JSONArray json = JSONArray.fromObject(list);
//輸出json，去驗證json的格式是否正確
//System.out.println(json.toString());
out.print(json.toString());
控制臺輸出的json數據為：
[{"STLC":"枝江善溪沖 ","MX":2,"Q":1.45,"WPTN":"4","STCD":"00000001","WZ":null,"TM":"2014-01-02","ADMAUTH":"信息管理單位","RVNM":null,"LOCALITY":null,"STNM":"雨量站","Z":1.45}]
當頁面訪問該action的時候，JSON格式的數據已經輸出到jsp頁面了。現在我們可以通過jquery的ajax方式訪問action，并且在成功的回調函數返回數據，并進行解析，具體代碼如下：
//顯示higthcharts圖表
var chart;
var time;
var z;
var q;
function showCharts(){
$.ajax({
type : 'POST',
dataType:'json',
async: false,
url :'/water/water!getDayList.action',
data:{
tm:$("#w_d_l_tm").val()
},
success:function(data) {
//遍歷
$.each(data,function(i,t){
stlc=t.STLC.trim();
time=t.TM;
z=t.Z;
q=t.Q;
//初始化highcharts圖表
chart = new Highcharts.Chart({
chart : {
renderTo : 'container', //制定圖標顯示的層的id
//defaultSeriesType: 'column'//柱狀圖 line直線圖，spline折線圖，pie餅狀圖，area區域圖，more綜合圖
type:'column'
//zoomType: 'xy',
},
credits: {
//去掉右下角顯示的Highcharts.com聲明
enabled: false
},
title : {
text : stlc+'水情日報表',
x : -20
},
//X坐標
xAxis : {
categories : ['水位','流量']
},
//Y坐標(分別有水位與流量兩個)
yAxis : [
{
title : {text : '水位(m)'},
style:{color:'#89A54E'},
opposite: false
},
{
gridLineWidth: 0,
title: {text: '流量(m3/s)'},
style:{color: '#4572A7'},
opposite: true
}
],
exporting : {
filename : 'chart',
url : '/chartImage!chart.action'
},
//此處是關鍵點,也可以修改exporting.js中對應的url，如果不需要此功能，不寫exporting即可
/*如果只需要將圖表導出為指定格式的圖片請使用下面的方法，即重寫exporting中的一些東西
exporting: {
type:'p_w_picpath/png',
url:'http://127.0.0.1:8080/yeqh/chartImg/',
buttons: {
contextButton: {
menuItems: [, {
text: '導出PNG圖片文件',
onclick: function() {
this.exportChart();
},
separator: false
}]
}
}
}
*/
//鼠標懸浮提示
tooltip : {
formatter : function() {
return this.x + ': ' + this.y;
}
},
//設置圖例
/*
legend : {
layout : 'vertical', //水平排列
//線條說明停靠位置
align : 'right',
verticalAlign : 'middle',
x : 10,
y : 100,
shadow: true, //設置陰影
borderWidth : 0,
floating: true,
},
*/
plotOptions:{
column:{
pointPadding: 0.5,
borderWidth: 0,
pointWidth: 30, //這種柱狀的寬度
dataLabels:{
enabled:true, //是否顯示數據標簽
}
}
},
series : [
{
name : '水位',
data :[z,q]
}
]
});
});
}
});
}jsp需要定義一個div，此div的id與上面js中的renderTo的屬性要相同，
<div id="container" ></div>
到這里，highcharts結合json顯示圖表已經完成，如果想要實現柱狀圖漸變的圖標效果，請自己加上實現顏色漸變的js代碼去實現。需要用的js文件與jar包請到http://down.51cto.com/data/1890578自行下載。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
