HightCharts與後臺交互

　　今天寫一下HightCharts與後臺是怎麼交互的吧。

　　我用的是servlet，沒有鏈接數據庫，這樣你們粘過來就能看到效果了。

　　先把jar包放進lib裏：

　　

　　
　　在web.xml配置要運行的路徑：

<servlet>
          <!-- 這個名字隨便起，本身明白就行，下面的名字跟這個得是相同的 ，
               ajax裏的URL裏寫的就是這個名字-->
      <servlet-name>hightCharts</servlet-name>
          <!-- 這個是配置的servlet的包名和類名 -->
      <servlet-class>test.HightCharts</servlet-class> 
  </servlet>
  <servlet-mapping>
      <servlet-name>hightCharts</servlet-name>
      <url-pattern>/hightCharts</url-pattern>
  </servlet-mapping>

　　而後就能夠寫代碼了

　　首先是javabean：

package bean;

public class Student {
    
    //定義屬性
    //id
    private Integer id;
    //姓名
    private String name;
    //成績
    private double grade;
    //年齡
    private Integer age;
　
    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public double getGrade() {
        return grade;
    }

    public void setGrade(double grade) {
        this.grade = grade;
    }

    public Integer getAge() {
        return age;
    }

    public void setAge(Integer age) {
        this.age = age;
    }

}

　　而後是servlet：

　　　　注意：包不要引錯了

package test;


import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

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

import org.codehaus.jackson.map.ObjectMapper;

import bean.Student;

public class HightCharts extends HttpServlet{
    
    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        
        //這裏是不用鏈接數據庫的，直接賦值就好了，可是實際作時，是要從數據庫取值的
        //在數據庫建個表，在這查詢出來就好了，從第一行到第23行就用不到了
        
        //new一個新對象，給新對象賦值 //第一行
        Student stu = new Student();
        stu.setId(1);
        stu.setName("John");
        stu.setGrade(100);
        stu.setAge(18);
        
        Student stu2 = new Student();
        stu2.setId(2);
        stu2.setName("Alice");
        stu2.setGrade(95);
        stu2.setAge(19);
        
        Student stu3 = new Student();
        stu3.setId(3);
        stu3.setName("andy");
        stu3.setGrade(90);
        stu3.setAge(20);
        
        //把多個對象一塊放到list集合裏
        List list = new ArrayList();
        list.add(stu);
        list.add(stu2);
        list.add(stu3);  //第23行
        
        //把list集合放到json數組裏
        ObjectMapper mapper=new ObjectMapper();
        String json = mapper.writeValueAsString(list);
        
        //發送json，關閉json
        PrintWriter out = response.getWriter();
        out.print(json);
        out.close();
        
    }
}

 

　　最後jsp頁面：

<script type="text/javascript" src="jquery/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="jquery/highcharts.js"></script>
<script type="text/javascript">
    
    $(function(){
        
        //給姓名定義了兩個全局變量,方便下面字符串拼接
        names = "";
        cate = "";
        //給成績數據定義了兩個全局變量,方便下面字符串拼接
        grades = "";
        datas = "";
        //給年齡定義了兩個全局變量,方便下面字符串拼接
        agee="";
        ages="";
        
        $.ajax({
            url:"hightCharts",
            async:false, //同步，默認是異步，這個必需要寫，否則在ajax外面是取不到值的，
            success:function(data){
                for(var index in data){
                    //取值
                    var name=data[index].name;
                    var grade=data[index].grade;
                    var age=data[index].age;
                    
                    //把單個數據循環從後臺拿到的json數組裏取出來，拼接成字符串
                    cate=names += ",'"+name+"'"; 
                    datas=grades += ","+grade+"";
                    ages=agee+=","+age+"";
                }
                
                cate=names.substring(1); //前面拼接字符串，逗號是放在前面的，這個意思是截取掉第一個字符
                cate="["+cate+"]";  //到這一步是把字符串拼接成json數組的樣式，但不是json數組
                datas=grades.substring(1);
                datas="["+datas+"]";
                ages=ages.substring(1);
                ages="["+ages+"]";
                 
            },dataType:"json",
        });
        
        $("#container").highcharts({    //圖表展現容器，與div的id保持一致
            chart: {
                type:'column',    //指定圖表的類型，默認是折線圖（line）
            },
            title: {
                text:'這是個人圖表', //指定圖表標題
            },
            xAxis: { //指定X分組
                categories: eval(cate), //eval是把字符串轉成json格式
            },
            yAxis: {
                title: {
                    text:'something', //指定Y軸的標題
                },
            },
            series: [ //指定數據列
                {
                    name:'grade', //數據列名
                    data:eval(datas), //數據
                },{
                    name:'age',
                    data:eval(ages),
                }
            ],
        });
        
    }); 
    
    
    
</script>

<body>
    
    <div id="container" style="width: 600px; height: 400px;"></div>
        
</body>

　　運行效果：

　　　　把鼠標放到柱形圖的柱狀上，會出來相對應的數據

　　好了，HightCharts就到這裏，明天見