Highcharts基本运用java版
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Highcharts基本运用
主要讲生成图表和导出图片
以myReport项目为例:
•先看一下myReport的结构
•
•其中highcharts文件夹包含highchart\Highcharts-2.1.9\js下所有文件；
•有了highcharts文件夹的引用生成图表就很简单了：
•新建一个js文件report.js
以生成柱状图为例，代码如下：
/*
*报表处理
*
*使用介绍：
*引用(<head></head>之间)：
*<script type="text/javascript"
src="/myReport/script/report/report.js"></script>
*调用(<body></body>之间)：
*<div id="reportDiv" style="width:100%; height:100%;">
*<input type='button' value='生成报表' onclick='mkChar()'/> */
document.write(" <scr"+"ipt lanague=\"javascript\"
src=\"/myReport/script/report/jquery-1.3.2.min.js\">
<\/scri"+"pt>") ;
document.write(" <scr"+"ipt lanague=\"javascript\"
src=\"/myReport/script/report/highcharts/highcharts.js\"> <\/scri"+"pt>");
document.write(" <scr"+"ipt lanague=\"javascript\"
src=\"/myReport/script/report/highcharts/modules/exportin g.js\"> <\/scri"+"pt>");
//测试报表
function mkChar(){
chart = new Highcharts.Chart({
chart: {
renderTo: 'reportDiv',
defaultSeriesType: 'column'
},
title: {
text: '主标题'
},
subtitle: {
text: '副标题'
},
xAxis: {
categories: [
'一月',
'二月',
'三月',
'四月',
'五月',
'六月',
'七月',
'八月',
'九月',
'十月',
'十一月',
'十二月'
]
},
yAxis: {
min: 0,
title: {
text: 'y轴计量单位'
}
},
legend: {//图例标签
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'left',
verticalAlign: 'top',
x: 100,//显示位置X偏移量
y: 70,
floating:true,//相对（统计图）位置，false，浏览器绝对位置
shadow: true //是否开启图形显隐，点击图例可显示/隐藏柱体
},
tooltip: {//鼠标悬浮
formatter: function() {
return ''+
this.x +': '+ this.y +'数量计量单位';
}
},
//柱体设置
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0 //柱体边框
}
},
series: [{
name: '已售房',
data: [{'color':'#F6BD0F','y':11},
{'color':'#AFD8F8','y':12},
{'color':'#8BBA00','y':13},
{'color':'#FF8E46','y':14},
{'color':'#008E8E','y':15},
{'color':'#D64646','y':16},
{'color':'#8E468E','y':17},
{'color':'#588526','y':18},
{'color':'#B3AA00','y':19},
{'color':'#008ED6','y':20},
{'color':'#9D080D','y':21},
{'color':'#A186BE','y':22}]
,
cursor: 'pointer',//指针
point: {
events: {
click: function() {//点击事件
alert(this.y+"计量单位");
}
}
},
dataLabels: {//数据标签
enabled: true,
rotation: 0,//文字方向 -90纵向
color: '#FFFFFF',
align: 'right',
x: -3,
y: 15,
formatter: function() {
return this.y;
},
style: {
font: 'normal 13px Verdana,
sans-serif'
}
}
}, {
name: '总数',
data: [23, 30, 31, 33, 32, 28, 29,26, 22, 50, 33, 29]
,
cursor: 'pointer',//指针
point: {
events: {
click: function() {//点击事件
alert(this.y+"计量单位");
}
}
},
dataLabels: {//数据标签
enabled: true,
rotation: 0,//文字方向 -90纵向
color: '#FFFFFF',
align: 'right',
x: -3,
y: 15,
formatter: function() {
return this.y;
},
style: {
font: 'normal 13px Verdana,
sans-serif'
}
}
} ]
});
}
•
•在index.jsp页面引用report.js,调用mkChar()方法;
•点击生成报表按钮，生成如下的图
生成柱状图表已经实现，此外生成饼图，曲线图也是大同小异：可以参考highchart\Highcharts-2.1.9\index.htm里面列举了很多种图表
导出图片功能：
此功能实现首先需导入两个实现导出图片功能的jar包：
batik-all-1.6.jar和xerces-2.4.0.jar；
在report.js中引用highcharts/modules/exporting.js（已经修改）
其次在后台ExportServlet.java中实现导出的方法：
主要代码如下：
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setCharacterEncoding("UTF-8");
request.setCharacterEncoding("UTF-8");
// TODO Auto-generated method stub
String fileName=request.getParameter("title");
String type = request.getParameter("type");
String svg = request.getParameter("svg");
ServletOutputStream
out=response.getOutputStream();
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("image/svg+xml")) {
ext = "svg";
}
response.addHeader("Content-Disposition", "attachment; 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("Problem transcoding stream. See the web logs for more details.");
e.printStackTrace();
}
} else if (ext == "svg"){
out.print(svg);
} 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();
}
方法已经写好，在哪里调用了?
这时我们需要打开项目中文件夹highcharts/modules/exporting.js
在里面关注方法
// Add the export related options
defaultOptions.exporting = {
//enabled: true,
//filename: 'chart',
type: 'image/png',
url: '/myReport/ExportServlet',
width: 800,
enableImages: false,
buttons: {
exportButton: {
//enabled: true,
symbol: 'exportIcon',
x: -10,
symbolFill: '#A8BF77',
hoverSymbolFill: '#768F3E',
_id: 'exportButton',
_titleKey: 'exportButtonTitle',
menuItems: [{
textKey: 'downloadPNG',
onclick: function () {
this.exportChart();
}
}, {
textKey: 'downloadJPEG',
onclick: function () {
this.exportChart({
type: 'image/jpeg'
});
}
}]
},
printButton: {
//enabled: true,
symbol: 'printIcon',
x: -36,
symbolFill: '#B5C9DF',
hoverSymbolFill: '#779ABF',
_id: 'printButton',
_titleKey: 'printButtonTitle',
onclick: function () {
this.print();
}
}
}
};
高亮部分为导出调用的方法（可以根据自己需求指定），也就是刚才在servlet 中写好的方法；
最后一步：在web.xml中配置映射servlet：
<servlet>
<description>This is the description of my J2EE component</description>
<display-name>This is the display name of my J2EE component</display-name>
<servlet-name>ExportServlet</servlet-name>
<servlet-class>servlet.ExportServlet</servlet-class> </servlet>
<servlet-mapping>
<servlet-name>ExportServlet</servlet-name>
<url-pattern>/ExportServlet</url-pattern>
</servlet-mapping>
这时看到刚才生成的图表，在右上方有两个按钮：
点击选中导出就可以把图表导出成图片。
Highcarts API /ref/#chart。