用highcharts前后台传输数据struts2--柱形图

//柱形图
   var categories = [];
   var name ='';
   var data = [];
   var chart = new Highcharts.Chart({
            chart: {
         renderTo:'container',
                type: 'column'
            },
            title: {
                text: '总负荷环比'
            },
               
               

            xAxis: {
             categories: categories,
             title: {
                 algin:'right',
                    text: '时/h'
                }
             },
            
            yAxis: {
                min: 0,
                title: {
                    text: 'KW'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f} KW</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0,//设置两个柱形图的距离
                    borderWidth: 0
                }
            }

         
        });
       
       $.ajax({
             type: "POST",
             url: "<%= basePath%>tu/cloumnjson.action",
             data: "year=1&lastyear=2&status=zhuxingtu",
             dataType:'json',
             success: function(returndata){
             var result = eval('(' + returndata.json + ')');--------------------returndata.变量名（JSON）必须和后台的json变量名一致,json数据返回时候最好用eval来处理一下
              
                 for(var i = 0; i < result.length; i++) {
                  
              
             var varkeyTemp = (result[i].key).split("#")
            if(varkeyTemp.length>0){
              for (var n=0;n<varkeyTemp.length;n++){
            categories.push(varkeyTemp[n].toString())
            }
                     }
 
                  var varvalueTemp = (result[i].data).split("#")
                if(varvalueTemp.length>0){
                  for (var j=0;j<varvalueTemp.length;j++){
                   data[j]= parseFloat(varvalueTemp[j]);//必须加parseFloat

                   }

                 }
             
                 chart.addSeries({ name: result[i].name, data:data});
                 //chart.xAxis[i].setCategories(categories);  已经push了，所以不需要再设置，
                 }
              
             }
      
          });

struts2配置文件:

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
    "http://struts.apache.org/dtds/struts-2.3.dtd">

<struts>
 <constant name="struts.configuration.xml.reload" value="true" />
 <constant name="struts.devMode" value="true" />
 <include file="struts-default.xml" />

 <!-- 默认的配置包 -->
 <package name="defaultPackage" extends="struts-default,json-default"></package>
 
 <include file="/struts-config/leftmenu_struts.xml" />
 <include file="/struts-config/cloumn_struts.xml" />
</struts>

column_struts.xml:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
    "http://struts.apache.org/dtds/struts-2.3.dtd">
   
<struts>
  <include file="struts-default.xml" />

 <package name="cloumnpackage" extends="json-default" namespace="/page/emanage/elecline">
    <action name="cloumnjson" class="com.nari.npce.action.HighChartsJsonAction" method="initCloumnString">
      <result type="json">
      </result>
    </action>
  </package>
</struts>

后台java

package com.nari.npce.action;

import java.util.Calendar;
import java.util.GregorianCalendar;

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

import org.apache.struts2.ServletActionContext;

import com.nari.npce.log.NPECRunLog;
import com.nari.npce.log.impl.NPECRunLogImpl;
import com.opensymphony.xwork2.ActionSupport;

/**
 * Servlet implementation class HighChartsJsonAction
 */
public class HighChartsJsonAction extends ActionSupport {
 private static final long serialVersionUID = 1L;
    private static final NPECRunLog LOGGER = new NPECRunLogImpl();
      
    /**
     * @see HttpServlet#HttpServlet()
     */
    private String json;
    public String getJson()
     {
         return json;
     }
    
     /**
      * @param 对jsonTree进行赋值
      */
     public void setJson(String json)
     {
         this.json = json;
     }

 
 
 public String initCloumnString() {
        JSONArray gdsNodes = new JSONArray();
        JSONObject gdsNodeYear = new JSONObject();
        gdsNodeYear.put("key", "1#2#3#4#5#6#7#8#9#10#11#12#13#14#15#16#17#18#19#20#21#22#23#24");
        gdsNodeYear.put("name", "今年");
        gdsNodeYear.put("data", "10# 11# 12# 13# 14# 15# 10#16# 17# 10# 18# 10#10#10#10#10#10#10#10#10#10#10#10#10");
       
        JSONObject gdsNodeLastYear = new JSONObject();
        gdsNodeLastYear.put("key", "1#2#3#4#5#6#7#8#9#10#11#12#13#14#15#16#17#18#19#20#21#22#23#24");
        gdsNodeLastYear.put("name", "去年");
        gdsNodeLastYear.put("data", "20# 20# 20#20# 20# 20# 20# 20# 20# 20# 20# 20#20#20#20#20#20#20#20#20#20#20#20#15");
       
        gdsNodes.add(gdsNodeYear);
        gdsNodes.add(gdsNodeLastYear);
        json = gdsNodes.toString();   直接复制，前台直接就可)获取了或者（this.setJson(gdsNodes.toString())),

此种情况用在ajax情况下，不跳转页面，如果要跳转页面，那么就不需要写出了，直接request.setAtrrbute就可以了或者通过通过${json}的EL表达式
        return SUCCESS;

    }

}

最后

以上就是寒冷西装为你收集整理的用highcharts前后台传输数据struts2--柱形图的全部内容，希望文章能够帮你解决用highcharts前后台传输数据struts2--柱形图所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。