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就到这里，明天见