Highcharts js图表实例
前台显示<!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").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
页:
[1]