highcharts跟后台交互的demo

最新推荐文章于 2023-08-11 23:07:18 发布

Mr_LiuP

最新推荐文章于 2023-08-11 23:07:18 发布

阅读量2.4k

点赞数 1

分类专栏： HighCharts 文章标签： Highcharts

本文链接：https://blog.csdn.net/liupeng_family/article/details/40581743

版权

HighCharts 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

很多人都不知道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>

Mr_LiuP

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
highcharts跟后台交互的demo

很多人都不知道highcharts跟后台如何进行交互，在此写了个小demo，一个servlet，一个jsp页面，servlet用来往jsp页面输出数据，我这里的后台数据是随便写的，你可以根据需要改成自己需要的数据。我这里的servlet往前台传的数据是字符串，然后在前台用js处理成json对象的，也可以往前台直接传json对象，我这里为了简单起见采用输出字符串。不多说了上代码：servl
复制链接

扫一扫