highcharts与ajax的应用（补）

最新推荐文章于 2024-05-01 19:17:00 发布

ZHOU西口

最新推荐文章于 2024-05-01 19:17:00 发布

阅读量1.3w

点赞数 6

文章标签： HTML Web java

本文链接：https://blog.csdn.net/splendid_java/article/details/9186681

版权

整理一份完整的例子，以供参考：

<1>页面chart.html：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>highchart折线图</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script src="highcharts.js"></script>
    <script type="text/javascript">
        var xset = [];//X轴数据集
        var yset = [];//Y轴数据集
        /*返回数据*/
        function getData(){
            $.getJSON('com/ChartServlet',function(data){
                $.each(data,function(i,item){
                    $.each(item,function(k,v){
                        xset.push(k);
                        yset.push(v);
                    });
                })
                console.log(xset); 
                console.log(yset); 
                //根据时间序列生成折线图
                showChart(xset,yset);
            });
        }
        /*定义图表*/
        function showChart(xset,yset){
            var chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'linecontainer',
                    type: 'line',
                    marginRight: 130,
                    marginBottom: 25
                },
                
                xAxis: {
                    categories: xset
                },
                yAxis: {
                    title: {
                        text: '数据'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    formatter: function() {
                            return '<b>'+ this.series.name +'</b><br/>'+
                            this.x +': '+ this.y;
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -10,
                    y: 100,
                    borderWidth: 0
                },
                series: [{
                    name: '随机时间序列',
                    data: yset
                }]
            });
        }
        
        //执行
        getData();
    </script>
    
  </head>
  
  <body>
          <!-- 图表显示区 -->
           <div id="linecontainer" style="width: 1200px; height: 300px"></div>
  </body>
</html>

<2>ChartServlet.java

package com;

import java.io.IOException;
import java.io.PrintWriter;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.Calendar;
import java.util.Date;
import java.util.GregorianCalendar;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

public class ChartServlet extends HttpServlet {
	public ChartServlet() {
		super();
	}
	public void destroy() {
		super.destroy(); // Just puts "destroy" string in log
	}

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		this.doPost(request, response);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setContentType("text/html;charset=utf-8");
		request.setCharacterEncoding("utf-8");
		PrintWriter out = response.getWriter();
		SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
		
		//生成一组随机的时间序列
		JSONArray jsonArr = new JSONArray();
		JSONObject item = null;
		for (int i = 0; i < 10; i++) {
			item = new JSONObject();
			//从今日开始统计
			item.put(sdf.format(add(new Date(),i)), Math.round(1000*Math.random()));
			jsonArr.add(item);
		}
		out.println(jsonArr.toString());
		out.flush();
		out.close();
	}
	
	//日期加N天
	public Date add(Date day,int dist) {
		Calendar calendar = new GregorianCalendar();
		calendar.setTime(day);
		calendar.add(calendar.DATE, dist);
		day = calendar.getTime();
		return day;
	}
	public void init() throws ServletException {
		// Put your code here
	}

}

ZHOU西口

关注

6
点赞
踩
12

收藏

觉得还不错? 一键收藏
10
评论
highcharts与ajax的应用（补）

整理一份完整的例子，以供参考：页面chart.html： highchart折线图 var xset = [];//X轴数据集 var yset = [];//Y轴数据集 /*返回数据*/ function getData(){
复制链接

扫一扫