HighCharts

来源：互联网发布：三巨网络面试如何编辑：程序博客网时间：2024/05/17 22:31

Highcharts基本运用

主要讲生成图表和导出图片

以myReport项目为例:

• 先看一下myReport的结构

•

• 其中highcharts文件夹包含highchart\Highcharts-2.1.9\js下所有文件；

• 有了highcharts文件夹的引用生成图表就很简单了：

• 新建一个js文件report.js

以生成柱状图为例，代码如下：

*报表处理

*使用介绍：

*引用(<head></head>之间)：

*<scripttype="text/javascript"src="/myReport/script/report/report.js"></script>

*调用(<body></body>之间)：

*<divid="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/exporting.js\"><\/scri"+"pt>");

//测试报表

functionmkChar(){

chart = new Highcharts.Chart({

chart: {

renderTo: 'reportDiv',

defaultSeriesType: 'column'

title: {

text: '主标题'

subtitle: {

text: '副标题'

xAxis: {

categories: [

'一月',

'二月',

'三月',

'四月',

'五月',

'六月',

'七月',

'八月',

'九月',

'十月',

'十一月',

'十二月'

]

yAxis: {

min: 0,

title: {

text: 'y轴计量单位'

}

legend: {//图例标签

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: [{

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'

}

}, {

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, HttpServletResponseresponse)

throws ServletException, IOException {

response.setCharacterEncoding("UTF-8");

request.setCharacterEncoding("UTF-8");

// TODO Auto-generatedmethod stub

String fileName=request.getParameter("title");

String type =request.getParameter("type");

String svg =request.getParameter("svg");

ServletOutputStreamout=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){

TranscoderInputinput = new TranscoderInput(new StringReader(svg));

TranscoderOutputoutput = new TranscoderOutput(out);

try {

t.transcode(input,output);

} catch(TranscoderException e){

out.print("Problem transcoding stream. See the web logs formore 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 beconverted.\n\tParameter [type]: The destination MIME type for the elment to betranscoded.");

}

out.flush();

out.close();

}

方法已经写好，在哪里调用了?

这时我们需要打开项目中文件夹highcharts/modules/exporting.js

在里面关注方法

// Add the export relatedoptions

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：

<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 http://www.highcharts.com/ref/#chart