highcharts与ajax的应用（补）

时间：2025-03-22 16:37:56
整理一份完整的例子，以供参考：

<1>页面：

<!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."></script>
    <script src=""></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){
                        (k);
                        (v);
                    });
                })
                (xset); 
                (yset); 
                //根据时间序列生成折线图
                showChart(xset,yset);
            });
        }
        /*定义图表*/
        function showChart(xset,yset){
            var chart = new ({
                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>'+  +'</b><br/>'+
                             +': '+ ;
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -10,
                    y: 100,
                    borderWidth: 0
                },
                series: [{
                    name: '随机时间序列',
                    data: yset
                }]
            });
        }
        
        //执行
        getData();
    </script>
    
  </head>
  
  <body>
          <!-- 图表显示区 -->
           <div  style="width: 1200px; height: 300px"></div>
  </body>
</html>
<2> 

package com;

import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;

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

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

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

}


相关文章