Highcharts js图表实例

最新推荐文章于 2024-01-06 10:34:12 发布

qzlink

最新推荐文章于 2024-01-06 10:34:12 发布

阅读量498

点赞数

分类专栏： jfinal j2ee

j2ee 同时被 2 个专栏收录

38 篇文章 0 订阅

订阅专栏

jfinal

20 篇文章 0 订阅

订阅专栏

前台显示：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Highcharts</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="../js/highcharts.js"></script>

<script type="text/javascript">
	$(function(){
		$("input[type=button]").bind("click",showChart);
	});
	var chart;
	function showChart(){
		$.ajax({
			url:'/t/highcharts',
			type:'post',
			dataType:'json',
			success:function(data){
				var json = eval(data);
				if(json!="" && json!=null){
					chart = new Highcharts.Chart({
						chart: {
							renderTo: 'container',
							type: 'line'
						},
						title: {
							text: 'Monthly Average Temperature'
						},
						subtitle: {
							text: ''
						},
						xAxis: {
							categories: json.categories
						},
						yAxis: {
							title: {
								text: 'Temperature (°C)'
							},
							min:0
						},
						plotOptions: {
							line: {
								dataLabels: {
									enabled: true
								},
								enableMouseTracking: true
							}
						},
						tooltip: {
							formatter: function() {
									return '<b>'+ this.series.name +'</b><br/>'+
									this.x +': '+ this.y +' 元';
							}
						},
						series: json.series
					});
				}
			},
			error:function(){
				alert('error!');
			}
		});
	}
</script>
</head>
<body>
<div style="margin:auto;text-align:center;">
<div style="padding:10px;"><input type="button" value=" Test Highcharts "/></div>
<div id="container" style="height:480px;width:980px;background-color:#efefef;"> </div>
</div>
</body>
</html>

后台代码：

import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONObject;

/**
 * @author showlike
 * @version v1.0 
 * 2012-8-16 下午5:20:51
 */
public class ShowChart extends HttpServlet{
	private static final long serialVersionUID = 3481044698564977772L;
	
	@SuppressWarnings({ "unchecked", "rawtypes" })
	public void service(HttpServletRequest request,
	        HttpServletResponse response){
		List data1 = new ArrayList();
		List data2 = new ArrayList();
		List date = new ArrayList();
		List data = new ArrayList();
		Map map1 = null;
		Map map2 = null;
		Map map = new HashMap();
		
		data1.add(7.0);
		data1.add(6.9);
		data1.add(9.5);
		data1.add(14.5);
		data1.add(18.2);
		data1.add(21.5);

		data2.add(0.2);
		data2.add(0.8);
		data2.add(5.7);
		data2.add(11.3);
		data2.add(17.0);
		data2.add(22.0);
		
		date.add("2012-01-01");
		date.add("2012-03-03");
		date.add("2012-05-01");
		date.add("2012-08-01");
		date.add("2012-10-01");
		date.add("2012-11-11");
		
		map1 = combinationSeriesData("Tokyo", data1);
		map2 = combinationSeriesData("New York", data2);
		
		data.add(map1);
		data.add(map2);
		
		map.put("categories",date);
		map.put("series", data);
		
		JSONObject json = new JSONObject();
		json.putAll(map);
		try {
			response.getWriter().print(json);
		} catch (IOException e) {
			e.printStackTrace();
		}
	}
	
	@SuppressWarnings({ "rawtypes", "unchecked" })
	public Map combinationSeriesData(String name,List data){
		Map map = new HashMap();
		map.put("name", name);
		map.put("data", data);
		return map;
	}
}

效果图

http://dl.iteye.com/upload/picture/pic/117005/d5a1b770-2dcb-3b28-b1dd-c142121ffe74.jpg

qzlink

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Highcharts js图表实例

Test Highcharts$(function(){$("input[type=button]").bind("click",showChart);});var chart;function showChart(){$.ajax({url:'/t/highcharts',type:'post',dataType:'json',succ
复制链接

扫一扫

专栏目录