highcharts 封装使用

一、引入highcharts的model

 

package com.duowan.gas.common.model;

import java.util.ArrayList;
import java.util.LinkedHashMap;
import java.util.List;
import java.util.Map;


public class HighCharts {

    // 图表在页面上显示的宽度 
    private int width;  
    // 图表在页面上显示的高度 
    private int height;  
    // 图表名称 
    private String title;  
    // 横坐标名称 
    private String xTitle;  
    // 纵坐标名称 
    private String yTitle;  
    // 图表类型（分为七种）    
    private String chartType;
    // x轴字段
    private String x;
	// y轴字段 <字段名，图注>  
	private LinkedHashMap<String,String> yFieldMap;
	// List<bean> 数据集
    private List<? extends Object> dataList;  
    
    public static class Ser {
		private String y;
		private String title;
		public Ser(String y, String title) {
			this.y = y;
			this.title = title;
		}
		public String getY() {
			return y;
		}
		public void setY(String y) {
			this.y = y;
		}
		public String getTitle() {
			return title;
		}
		public void setTitle(String title) {
			this.title = title;
		}
	}
    
    // 把yFieldMap转化成数组形式
    public Object[] getSers() {
    	List<Ser> sers = new ArrayList<Ser>();
    	for(Map.Entry<String, String> entry : yFieldMap.entrySet()){
    		Ser ser = new Ser(entry.getKey(), entry.getValue());
    		sers.add(ser);
    	}
		return sers.toArray();
	}

	// 图表类型
	public static enum ChartType {
		LINE("line", "折线图"),
		COLUMN("column", "纵向条形图"),
		BAR("bar", "横向条形图"),
		PIE("pie", "饼形图"),
		SCATTER("scatter", "散播点图 "),
		AREA("area", "区域折线图  "),
		AREASPLINE("areaspline", "区域曲线图");
		
		private String value;
		private String desc;
		
		private ChartType(String value, String desc) {
			this.value = value;
			this.desc = desc;
		}
		
		public String getValue() {
			return value;
		}
		public void setValue(String value) {
			this.value = value;
		}
		public String getDesc() {
			return desc;
		}
		public void setDesc(String desc) {
			this.desc = desc;
		}
	}
	
    public LinkedHashMap<String, String> getyFieldMap() {
		return yFieldMap;
	}
    
	public void setyFieldMap(LinkedHashMap<String, String> yFieldMap) {
		this.yFieldMap = yFieldMap;
	}
	
	public String getX() {
		return x;
	}

	public void setX(String x) {
		this.x = x;
	}

	public List<? extends Object> getDataList() {
		return dataList;
	}
	
	public void setDataList(List<? extends Object> dataList) {
		this.dataList = dataList;
	}
	
	public int getWidth() {
		return width;
	}

	public void setWidth(int width) {
		this.width = width;
	}


	public int getHeight() {
		return height;
	}

	public void setHeight(int height) {
		this.height = height;
	}

	public String getTitle() {
		return title;
	}

	public void setTitle(String title) {
		this.title = title;
	}

	public String getxTitle() {
		return xTitle;
	}

	public void setxTitle(String xTitle) {
		this.xTitle = xTitle;
	}

	public String getyTitle() {
		return yTitle;
	}

	public void setyTitle(String yTitle) {
		this.yTitle = yTitle;
	}

	public String getChartType() {
		return chartType;
	}
	
	public void setChartType(String chartType) {
		this.chartType = chartType;
	}  

	
	
}

 

二、引入highcharts js文件 (见附件)

 

三、前台展示

    主要调用方法：highchartsUtil.chart(div的ID,后台传回的json数据);

 

<div id="container"></div>

   <script src="/js/highcharts/jquery.min.js"></script>
   <script src="/js/highcharts/highcharts.js"></script>
   <script src="/js/highcharts/modules/exporting.js"></script>
   <script src="/js/highcharts/highchartsUtil.js"></script>

   <script type="text/javascript">

        $(function () {

                highchartsUtil.chart("container",${jsonStr});

         });

   </script>

 

四、后台数据处理

 

假设有一个TestBean,有字段如下： private String date; private double value; private double value2;

 

// 取得的List<bean>数据集
        List<TestBean> listBeans  = xxx;

        // 可选属性
        HighCharts highCharts = new HighCharts();
        highCharts.setTitle("title");
        highCharts.setWidth(900);
        highCharts.setHeight(500);
        highCharts.setxTitle("xTitle");
        highCharts.setyTitle("yTitle");

        // 必填属性
        highCharts.setChartType(HighCharts.ChartType.LINE.getValue()); //不同图表只需要修改这里
        highCharts.setX("date"); // 指定x轴字段
        LinkedHashMap<String,String> yFieldMap = new LinkedHashMap<String,String>(); // y轴的map<y轴的字段，y轴的图注>,多条线只需要多put值
        yFieldMap.put("value", "图注一");
        yFieldMap.put("value2", "图注二");
        highCharts.setyFieldMap(yFieldMap);
        highCharts.setDataList(listBeans);

        ObjectMapper objectMapper = new ObjectMapper();
        String jsonStr = objectMapper.writeValueAsString(highCharts);

        model.put("jsonStr", jsonStr);
        return "index";