编写动态的highcharts页面教程

最新推荐文章于 2021-02-23 16:33:09 发布

classicbear

最新推荐文章于 2021-02-23 16:33:09 发布

阅读量6.3k

点赞数

文章标签： integer action function jsp struts exception

本文链接：https://blog.csdn.net/classicbear/article/details/6866909

版权

编写动态的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]]
				}]
        });
        
    });


}