基於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); } } } }); });

　　圖示如下：

　　餅狀圖：　　

　　折線圖：

　　希望能通俗易懂。