基于ssh框架的highcharts前后台数据交互实例

　　Highcharts 是一个用纯JavaScript编写的一个图表库， 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。

　　官网：http://www.highcharts.com/，官网上的数据都是写死的，作为一名菜鸟，搞了很久才知道怎么传递，现特地写出来，希望能对大家有帮助。

　　作为一名初入java web后台开发的菜鸟，在使用时highcharts时不知道前后台数据是怎么交互的，经过一番折腾，终于搞出一套方案，将后台传递数据传到前台。（可能我还是菜鸟，错误之处，大家自行甄别，以下我提到的只是我理解的，切忌不可当真）

　　传递流程如下：首先，在前台jsp界面上会发送一个action1的form表单请求，会把一些数据传到后台进行处理（相对的action1），此时，action1返回的是success转到1.jsp界面。在1.jsp界面中，将action1函数中的一些数据hide在1.jsp中。当转入1.jsp时，会加载ajax，ajax又转到一个action url，这个url会带着hide在1.jsp中数据，转入另一个action:action2.action返回的是json数据，这时，再会把json做一定处理传到highcharts。

1.form表单

<s:form action="action1" namespace="/" >
     //一些其他的要传入到后台的表单数据　
</s:form>

2.action1

public class actionAction extends BaseAction {
　　public String action1() {
　　　　//将前台的表单数据进行一些处理
　　　　Map xAxisMap = new HashMap();
　　　　Map yAxisMap = new HashMap();
　　　　//传值到xAxisMap，yAxisMap,hide在1.jsp的界面中
　　　　return success;
　　}
}

<action name="action1" class="actionAction" method="action1">
　　<result>/1.jsp</result>
</action>

3.前台1.jsp相关设置

<s:hidden id="xAxisMap" name="xAxisMap" value="%{xAxisMap}"/><!-- highcharts图表的x轴数据 -->
<s:hidden id="yAxisMap" name="yAxisMap" value="%{yAxisMap}"/><!-- highcharts图表的y轴数据 -->

$(function(){
            $.ajax({
               type: 'POST',
               dataType: 'JSON',
               url: nameSpace+"/statisticLog.action?xAxisMap="+$("#xAxisMap").val()+"&yAxisMap="+$("#yAxisMap").val(),
                   success : function(result){
                        解析result数据，形成highcharts图表
                   }
            });
        });
    );

4.action2处理xAxisMap，yAxisMap数据，转成json格式，也方便，在js文件中的ajax里面调用传入highcharts插件中。

public String action2() {
    //处理xAxisMap，yAxisMap并赋到jsonMap中
    jsonMap
    return success;
}

<action name="action2" class="actionAction" method="action2">
    <result type="json"><param name="root">jsonMap</param></result>
    <result name="input" type="json"><param name="root">jsonMap</param></result>
</action>

　　action2返回的是json数据，在ajax中的success function（result）{}中的result就是那个json型数据jsonMap。

　　在加载1jsp，ajax会同步加载，调用aciton2，解析返回的jsonMap，highcharts也会显示出来。

附：highcharts的使用设置

　　highcharts初始化设置方法，一个为饼状图，一个为折线图。highcharts很重要的一部分就是数据格式的处理。

function showLine(lineChart) {
    data0=lineChart[0];
    data1=lineChart[1];
    data2=lineChart[2];
    data3=lineChart[3];
    data4=lineChart[4];
    data5=lineChart[5];
    data6=lineChart[6];
    data7=lineChart[7];
    data8=lineChart[8];

    var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'chart',
                defaultSeriesType: 'line',
                marginRight: 130,
                marginBottom: 25
            },
            title: {
                text: 'smdb访问量统计',
                x: -20 //center
            },
            subtitle: {
                text: '各模块访问量折线图',
                x: -20
            },
            xAxis: {
                categories: data8
            },
            yAxis: {
                title: {
                    text: '访问次数'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                formatter: function() {
                        return '<b>'+ this.series.name +'</b><br/>'+
                        this.x +': '+ this.y +'';
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -10,
                y: 200,
                borderWidth: 0
            },
            plotOptions: {
                line: {
                    dataLabels: {
                        enabled: true
                    },
                    enableMouseTracking: false
                }
            },
            series: [{
                name: 'serverCount',
                data: data0
            }, {
                name: 'systemCount',
                data: data1
            }, {
                name: 'securityCount',
                data: data2
            }, {
                name: 'personCount',
                data: data3
            }, {
                name: 'unitCount',
                data: data4
            }, {
                name: 'projectCount',
                data: data5
            }, {
                name: 'productCount',
                data: data6
            }, {
                name: 'awardCount',
                data: data7
            }]
        });
} 

function showPie(arr) {
    var data1=arr[0];
    var data2=arr[1];
    var data3=arr[2];
    var data4=arr[3];
    var data5=arr[4];
    var data6=arr[5];
    var data7=arr[6];
    var chart = new Highcharts.Chart({
        chart: {
          renderTo: 'chart',
          plotBackgroundColor: null,
          plotBorderWidth: null,
          plotShadow: false
        },
        title: {
          text: 'smdb访问统计比例饼状图'
        },
        tooltip: {
          formatter: function() {
            return '<b>' + this.point.name + '</b>: ' + '总计'+this.y + '次';
          }
        },
        plotOptions: {
          pie: {
            allowPointSelect: false,
            cursor: 'pointer',
            dataLabels: {
              enabled: true,
              color: '#000000',
              connectorColor: '#000000',
              formatter: function() {
                    return '<b>' + this.point.name + '</b>: ' + '总计'+this.y + '次';
              }
            }
          }
        },
        series: [
          {
            type: 'pie',
            name: 'Browser share',
            data:  [['systemCount',data1],
                    ['securityCount',data2],
                    ['personCount',data3],
                    ['unitCount',data4],
                    ['projectCount',data5],
                    ['productCount',data6],
                    ['awardCount',data7],
                      ]
          }
        ]
      });
    }  

$(function(){
    $.ajax({
       type: 'POST',
       dataType: 'JSON',
       url: nameSpace+"/statisticLog.action?xMap="+$("#xMap").val()+"&yMap="+$("#yMap").val()+"&logTimeType="+$("#logTimeType").val(),
           success : function(result){
               if(JSON.parse(result).logTimeType==1){
                   var jjson=JSON.parse(result);
                   var pieChart = new Array();
                   pieChart[0]=jjson.systemCount;
                   pieChart[1]=jjson.securityCount;
                   pieChart[2]=jjson.personCount;
                   pieChart[3]=jjson.unitCount;
                   pieChart[4]=jjson.projectCount;
                   pieChart[5]=jjson.productCount;
                   pieChart[6]=jjson.awardCount;
　　　　　　　　　　　//systemCount等等各个count个表示一块扇形，这个数据不一定是显示百分比，也可以是值
                   showPie(pieChart);
                    }else{if(JSON.parse(result).logTimeType==2|JSON.parse(result).logTimeType==3|JSON.parse(result).logTimeType==4|JSON.parse(result).logTimeType==5){
                                var lineChart = new Array();
                                lineChart[0] = JSON.parse(result).serverCount;
                                lineChart[1] = JSON.parse(result).systemCount;
                                lineChart[2] = JSON.parse(result).securityCount;
                                lineChart[3] = JSON.parse(result).personCount;
                                lineChart[4] = JSON.parse(result).unitCount;
                                lineChart[5] = JSON.parse(result).projectCount;
                                lineChart[6] = JSON.parse(result).productCount;
                                lineChart[7] = JSON.parse(result).awardCount;
                                lineChart[8] = JSON.parse(result).listXData;
                                //serverCount等等count各用一条折线表示
　　　　　　　　　　　　　　　　　　 //listXData为x轴上坐标一次显示的名称，比如一周，就一次显示星期一到星期五

  showLine(lineChart); } } } }); });

　　图示如下：

　　饼状图：　　

　　折线图：

　　希望能通俗易懂。