零基础highcharts生成报表-简单应用

1.下载highcharts的js

http://pan.baidu.com/s/1o6NodRk

2.html引入js（用到了jquery.js）

<script  type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/highcharts.js"></script>

3.后台构造数据构造对象有三种数据格式:

data: Array<Object|Array|Number>

An array of data points for the series. The points can be given in three ways:

1. An array of numerical values. In this case, the numerical values will be interpreted as y values, and x values will be automatically calculated, either starting at 0 and incrementing by 1, or from pointStart and pointInterval given in the plotOptions. If the axis is has categories, these will be used. This option is not available for range series. Example:

   data: [0, 5, 3, 5]

2. An array of arrays with two values. In this case, the first value is the x value and the second is the y value. If the first value is a string, it is applied as the name of the point, and the x value is incremented following the above rules.

   For range series, the arrays will be interpreted as [x, low, high]. In this cases, the X value can be skipped altogether to make use ofpointStart and pointRange.

   Example:

   data: [[5, 2], [6, 3], [8, 2]]

3. An array of objects with named values. In this case the objects are point configuration objects as seen below.

   Range series values are given by low and high.

   Example:

   data: [{
   	name: 'Point 1',
   	color: '#00FF00',
   	y: 0
   }, {
   	name: 'Point 2',
   	color: '#FF00FF',
   	y: 5
   }]

笔者以第二种和第三种为例，创建对应的实体数据对象

第二种：SimpleSeries.java

public class SimpleSeries {
	
	// The name of the series as shown in the legend, tooltip etc.
	String name ;
	// An array of arrays with two values. In this case, the first value is the x value and the second is the y value. If the first value is a string, it is applied as the name of the point, and the x value is incremented following the above rules
	List<Object[]> data;

	public SimpleSeries(String name, List<Object[]> data) {
		this.name = name;
		this.data = data;
	}
	
	public SimpleSeries() {
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public List<Object[]> getData() {
		return data;
	}

	public void setData(List<Object[]> data) {
		this.data = data;
	}
	
	@Override
	public String toString() {
		//[{name:'人数',data:[['男',96.0],['女',29.0]]}] //横坐标  categories: ["男", "女"]
		String result = "{name:'"+name+"',data:[";
		String eachStr = "";
		for (int i = 0; i < data.size(); i++) {
			Object[] objArray = data.get(i);
			if(i == data.size() -1)
				eachStr += "['"+objArray[0]+"', "+objArray[1]+"]";
			else 
				eachStr += "['"+objArray[0]+"', "+objArray[1]+"],";
		}
		result +=eachStr;
		result +="]}";
		return result;
	}
}

第二种：ComplexSeries.java

public class ComplexSeries {
	
	// The name of the series as shown in the legend, tooltip etc.
	String name ;
	// An array of numerical values. In this case, the numerical values will be interpreted as y values, and x values will be automatically calculated, either starting at 0 and incrementing by 1, or from pointStart and pointInterval given in the plotOptions. If the axis is has categories, these will be used. This option is not available for range series
	List<Double> data;

	public ComplexSeries(String name, List<Double> data) {
		this.name = name;
		this.data = data;
	}
	
	public ComplexSeries() {
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public List<Double> getData() {
		return data;
	}

	public void setData(List<Double> data) {
		this.data = data;
	}
	
	@Override
	public String toString() {
		//[{name:'男',data:[17.0,1.0,24.0,5.0,5.0,22.0,1.0,7.0,5.0,4.0,5.0]},{name:'女',data:[2.0,0.0,8.0,2.0,2.0,8.0,0.0,0.0,2.0,2.0,3.0]}]"]  // 横轴  categories: ["亚历山大", "直销部", "人力资源部", 8 更多...]		String result = "{name:'"+name+"',data:[";
		String eachStr = "";
		for (int i = 0; i < data.size(); i++) {
			double d = data.get(i);
			if(i == data.size() -1)
				eachStr += d;
			else 
				eachStr += d+",";
		}
		result +=eachStr;
		result +="]}";
		return result;
	}
}

构造完对象后，输出到

 chartBean.setColumnData(simpleList.toString());// 设置简单柱状图数据

 chartBean.setMoreColumnData(complexList.toString()); // 设置复杂柱状图

ps:柱状图和曲线图所需数据相同，比如我需要的数据为

// 前台构造数据测试
  // 1.单柱状图、单折线图 
  // var data = "[{name:'人数',data:[['男',96.0],['女',29.0]]}]";  //  categories: ["男", "女"]
  // 2.饼图
  // var data = "[{name:'人数',data:[['男',96.0],['女',29.0]]}]";  
  // 3.复杂部门柱状图、折线图 
  // var data = "[{name:'男',data:[17.0,1.0,24.0,5.0,5.0,22.0,1.0,7.0,5.0,4.0,5.0]},{name:'女',data:[2.0,0.0,8.0,2.0,2.0,8.0,0.0,0.0,2.0,2.0,3.0]}]";  //  categories: ["亚历山大", "直销部", "人力资源部", 8 更多...]
  // 4.复杂类别柱状图、折线图  
  // var data = "[{name:'亚历山大',data:[17.0,2.0]},{name:'直销部',data:[1.0,0.0]},{name:'人力资源部',data:[24.0,8.0]}]"//  categories: ["男", "女"]

4.前台显示调用js

// 简单柱状、饼图、单折线图显示公共函数
function reportChart(divId, data , type, categories, min , max){
	console.log("157="+divId+","+data+","+type+","+categories+","+min+","+max);
	var series = eval(data);
	if("" == data) return ;// 无数据显示时,返回
	if("column" == type || "line" == type){// 单柱状图 和曲线图
		$('#'+divId).highcharts({
			 chart: {
	            type: type,
	        },
	        title: {
	            text: titleText
	        },
	        xAxis: {
	            title: {
	                text: ''
	            },
	            categories: categories
	        },
	        yAxis: {
	            title: {
	                text: ''
	            },
	            min: min,
	        	max:max,
	        },
	        plotOptions: {
	            column: {
	                pointPadding: 0.2,
	                borderWidth: 0
	            }
	        },
	        legend: {
	            layout: 'vertical',
	            align: 'left',
	            verticalAlign: 'top',
	            x: 50,
	            y: 20,
	            floating: true,
	            backgroundColor: '#FFFFFF',
	            borderWidth: 1
	        },
	        series: series
		});
	}else if("pie" == type){ // 饼图
		 $('#'+divId).highcharts({
			 chart: {
	            type: type,
		        },
		        title: {
		            text: titleText
		        },
		        tooltip: {
	    	    	pointFormat: '{series.name}: <b>{point.percentage:.1f} %</b>'
	        	},
		        plotOptions: {
		            pie: {
		                allowPointSelect: true,
		                cursor: 'pointer',
		                dataLabels: {
		                    enabled: true,
		                    color: '#000000',
		                    connectorColor: '#000000',
		                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
		                }
		            }
		        },
		        series: series
			});
	}
}

ps:附上生成图结果

附上文件下载地址（注意不是运行版，只是所需的文件）