编写动态的highcharts页面教程
编写动态的highcharts页面，数据从JSP页面中获取
场景描述：使用struts+hibernate技术，前端采用JSP
目的：Action向JSP页面传参数，js文件从JSP文件中获取数据
1. 编写Action类
package com.dice.voip.web.oam.example;
import com.dice.voip.web.oam.base.BaseAction;
public class DynamicHighchartsAction extends BaseAction{
/**
*
*/
private static final long serialVersionUID = 7679889542908443985L;
private Integer num1;
private Integer num2;
private Integer num3;
private Integer num4;
public String execute() throws Exception{
num1 = 23;
num2 = 46;
num3 = 6;
num4 = 25;
return SUCCESS;
}
public Integer getNum1() {
return num1;
}
public void setNum1(Integer num1) {
this.num1 = num1;
}
public Integer getNum2() {
return num2;
}
public void setNum2(Integer num2) {
this.num2 = num2;
}
public Integer getNum3() {
return num3;
}
public void setNum3(Integer num3) {
this.num3 = num3;
}
public Integer getNum4() {
return num4;
}
public void setNum4(Integer num4) {
this.num4 = num4;
}
}
2. 编写XML文件
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<!--
- This file is included by the struts.xml file as an example
- of how to break up the configuration file into multiple files.
-->
<struts>
<package name="example" namespace="/example" extends="default">
<action name="highcharts" class="com.dice.voip.web.oam.example.DynamicHighchartsAction">
<result>/example/DynamicJSPHighcharts.jsp</result>
</action>
</package>
</struts>
3. 编写JSP文件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <%@page import="com.opensymphony.xwork2.ActionContext"%> <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" import="java.util.*"%> <%@ taglib prefix="s" uri="/struts-tags"%> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <base href="<%= request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() %>/" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>StaticHighcharts DEMO</title> <script src="js/jquery/jquery.js" type="text/javascript"></script> <script src="js/Highcharts/js/highcharts.js" type="text/javascript"></script> <script src="js/demo/dynamichighcharts.js" type="text/javascript"></script> </head> <body> <div id="container" style="width: 400px; height: 400px"> <span id="id1"><s:property value="num1" /></span> <span id="id2"><s:property value="num2" /></span> <span id="id3"><s:property value="num3" /></span> <span id="id4"><s:property value="num4" /></span> </div> </body> </html>
4. 编写JS文件
$(document).ready(function(){
oanuepiechart("performance/perfsnuoandata.do", "oanuedata");
});
function oanuepiechart(action,div) {
$.post(action, function(dat){
setHighchartsTheme('#058DC7', '#50B432');
chart1 = new Highcharts.Chart({
chart: {
renderTo: div,
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
},
credits : {
enabled:false
},
title: {
text: 'OAN和UE数量比较 '
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.point.y ;
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ formatnumber(this.point.percentage,2) +'%';
}
},
showInLegend: true
}
},
series: [{
type: 'pie',
name: 'OAN和UE数量比较',
data: [{name:'OAN', y: dat.oanNum, sliced:true, selected:true},['UE', dat.ueNum]]
}]
});
});
}