[置顶] highcharts封装使用总结

    Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用。目前HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。

    HighCharts界面美观,由于使用JavaScript编写,所以不需要像Flash和Java那样需要插件才可以运行,而且运行速度快。另外HighCharts还有很好的兼容性,能够完美支持当前大多数浏览器。现在官方的最新版本为HighCharts3.0Beta。

 

HighCharts的主要特性包括:

1. 兼容性:HighCharts采用纯JavaScript编写,兼容当今大部分的浏览器,包括Safari、IE和火狐等等;

2. 图表类型众多:HighCharts现在支持多种图表类型,包括曲线图、区域图、柱状图、饼状图、散状点图和综合图表等等,可以满足各种需求。

3. 不受语言约束:HighCharts可以在大多数的WEB开发中使用,并且对个人用户免费,支持ASP,PHP,JAVA,.NET等多种语言中使用。

4. 提示功能:HighCharts生成的图表中,可以设置在数据点上显示提示效果,即将鼠标移动到某个数据点上,可以显示该点的详细数据,并且可以对显示效果进行设置。

5. 放大功能:HighCharts可以大量数据集中显示,并且可以放大某一部分的图形,将图表的精度增大,进行详细的显示,可以选择横向或者纵向放大。

6. 时间轴:可以精确到毫秒。

它主要包括两个部分: Highcharts 和 Highstock。

    Highcharts 可以为您的网站或 Web 应用程序提供直观,互动式的图表。目前支持线, 样条, 面积,areaspline,柱形图,条形图,饼图和散点图类型。

    Highstock 可以为您方便地建立股票或一般的时间轴图表。它包括先进的导航选项,   预设的日 期范围,日期选择器,滚动和平移等等。

 

highcharts图表控件要收费

以下方法教你怎么去掉官方网址:
    1、首先打开:highcharts.js
    2、搜索他的官方网址:www.highcharts.com 替换成自己的网站。或者变成空“”。     然后地下就没有或者变成空了。

hightcharts支持的data格式

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

A list of numerical values. In this case, thenumberical values will be interpreted and y values, and x values will beautomatically 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. Example:

data: [0, 5, 3, 5]

A list of arrays with two values. In this case, thefirst value is the x value and the second is the y value. If the first value isa string, it is applied as the name of the point, and the x value isincremented following the above rules. Example:

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

A list of object with named values. In this case theobjects are point configuration objects as seen underoptions.point. Example:

data: [{

   name:'Point 1',

   color:'#00FF00',

   y:0

}, {

   name:'Point 2',

   color:'#FF00FF',

   y:5

}]

后台只要抛回一个list<javabean>,javabean 里面是一个包括name,y,href的属性。

前台即可显示饼图,并且带有点击触发效果。


报表图类型介绍

 

   //折线形

  [置顶] highcharts封装使用总结_第1张图片

    //曲线图

   [置顶] highcharts封装使用总结_第2张图片

    //纵向条形图

  [置顶] highcharts封装使用总结_第3张图片

    //横向条形图

  [置顶] highcharts封装使用总结_第4张图片

    //饼形图

  [置顶] highcharts封装使用总结_第5张图片

    //散播点图

   [置顶] highcharts封装使用总结_第6张图片

    //区域折线图

  [置顶] highcharts封装使用总结_第7张图片

    //区域曲线图

  [置顶] highcharts封装使用总结_第8张图片

 


下面介绍封装后的类PublicChartsInfo

 

/**
 * @Title: PublicChartsInfo.java
 * @version V1.0
 * @Description: 公共报表信息
 */
public class PublicChartsInfo {

	/**
	 * 报表在页面上显示的宽度
	 */
	private int chartWidth;
	/**
	 * 报表在页面上显示的高度
	 */
	private int chartHight;
	/**
	 * 报表名称
	 */
	private String chartText;
	/**
	 * 横坐标所需列
	 */
	private String[] xCategories;
	/**
	 * 横坐标名称
	 */
	private String xText;
	/**
	 * 纵坐标名称
	 */
	private String yText;
	/**
	 * 系列名称
	 */
	private String seriesName;
	/**
	 * 报表(纵坐标)值
	 */
	private int[] chartData;
	/**
	 * 报表类型(分为八种,在SysConstant公共常量类定义)
	 */
	private String chartType;
	以下省略set/get方法
}


定义一个常量信息类SysConstant,用于记录报表的类型

 

 

//折线形
	public static final String CHART_LINE = "line";
	//曲线图
	public static final String CHART_SPLINE = "spline";
	//纵向条形图
	public static final String CHART_COLUMN = "column";
	//横向条形图
	public static final String CHART_BAR = "bar";
	//饼形图
	public static final String CHART_PIE = "pie";
	//散播点图
	public static final String CHART_SCATTER = "scatter";
	//区域折线图
	public static final String CHART_AREA = "area";
	//区域曲线图
	public static final String CHART_AREASPLINE = "areaspline";


下面是最重要的使用方法

 

 

1、  使用前需要引入必要的js

<!--jquery-->
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<!-- highcharts 必要的俩个js:highcharts.js 与exporting.js -->
<script src="${pageContext.request.contextPath }/js/highcharts.js"></script>
<script src="${pageContext.request.contextPath }/js/exporting.js"></script>
<!—myChart为封装好的js文件-->
<script src="${pageContext.request.contextPath }/js/myChart.js"></script>

 

2、 在后台取得数据后,封装到PublicChartsInfo类中,通过json将其返回到页面中。

3、  调用myChart方法生成报表,需要传入三个参数:

myChart("divID",data数据, function(event){
	点击报表触发的事件
	event.point.category:获取除饼形图以外的x轴的值
	event.point.name:获取饼形图的x轴的值
	event.point.y:获取所有图形的y轴的值
});

4、调用setData(data)方法,给报表赋值。

例子:
$.get("${pageContext.request.contextPath}/publicInfoAction!showChar.action,
	function(data) {
		myChart("container",data,function(event){
 			//除饼形图以外的x轴的值
			alert(event.point.category);
 			//饼形图的x轴的值
 			alert(event.point.name);
 			//所有图形的y轴的值
 			alert(event.point.y);
		});
		setData(data);
	});
<div id="container"></div>   报表将生成在这个div中


以下为本人写的myChart.js文件可以到我的下载资源中下载,实在太多,无法粘贴。

点击打开链接下载myChart.js文件

 

你可能感兴趣的:(Highcharts)