highcharts跟后台交互的demo

http://runjs.cn/code/ih5xzoeb

highcharts跟后台交互的demo

highcharts跟后台如何进行交互小demo,一个servlet,一个jsp页面,servlet用来往jsp页面输出数据,后台数据是随便写的,你可以根据需要改成自己需要的数据。 
  我这里的servlet往前台传的数据是字符串,然后在前台用js处理成json对象的,也可以往前台直接传json对象,我这里为了简单起见采用输出字符串。不多说了 上代码: 
servlet: 
package com.highcharts.servlet; 
 
import java.io.IOException; 
import java.io.PrintWriter; 
import java.util.ArrayList; 
import java.util.HashMap; 
import java.util.List; 
import java.util.Map; 
import java.util.Set; 
 
import javax.servlet.ServletException; 
import javax.servlet.annotation.WebServlet; 
import javax.servlet.http.HttpServlet; 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 
 
@WebServlet(name="lineServlet",urlPatterns="/lineServlet") 
 
public class LineServlet extends HttpServlet { 
 
private static final long serialVersionUID = 366512729238484827L; 
 
@Override 
protected void doGet(HttpServletRequest req, HttpServletResponse resp) 
throws ServletException, IOException { 
// TODO Auto-generated method stub 
this.doPost(req, resp); 

 
@Override 
protected void doPost(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException { 
PrintWriter out = response.getWriter(); 
  
List data = new ArrayList(); 
for(int i = 1; i < 10; i++){ 
data.add(i); 

List ll = new ArrayList(); 
for(int i=0; i <10; i++){ 
ll.add("\"data"+i+"\""); 

String str = ""; 
str += "{\"title\":\"this is demo\",\"data\":"+data+",\"xAxis\":"+ll+"}"; 
 
out.println(str.toString()); 
   out.flush(); 
   out.close(); 

 

 
 
jsp: 
 
<%@ page language="java" contentType="text/html; charset=UTF-8" 
    pageEncoding="UTF-8"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> 
<script type="text/javascript" src="highchart/highstock.js"></script> 
<title>Insert title here</title> 
</head> 
<body> 
<div id="container"></div> 
</body> 
<script type="text/javascript"> 
$(document).ready(function() { 
           $.ajax({ 
               url: "lineServlet", 
               type: "GET", 
               success: function(data){ 
                console.debug(data) 
                var a = eval_r('(' + data + ')'); 
                  console.debug(a); 
                   
                  var chart = new Highcharts.Chart({ 
                      chart: { 
                          renderTo: 'container' 
                      }, 
                      xAxis: { 
                          categories: a.xAxis 
                      }, 
                      title : { 
                      text : a.title 
                      }, 
                      tooltip: { 
                          formatter: function() { 
                              return '<b>'+ this.series.name +'</b><br/>'+ 
                                  this.x +': '+ this.y; 
                          } 
                      }, 
                      plotOptions: { 
                      }, 
                      series: [{ 
                          data: a.data 
                      }] 
                  }); 
                   
               } 
           }); 
       }); 
</script> 
</html> 

你可能感兴趣的:(highcharts跟后台交互的demo)