highcharts跟后台交互的demo

来源：互联网发布：重庆python招聘编辑：程序博客网时间：2024/05/16 10:32
很多人都不知道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;@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {// TODO Auto-generated method stubthis.doPost(req, resp);}@Overrideprotected 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>
2 0