[置顶] highcharts封装使用总结

时间:2022-05-08 00:18:48

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封装使用总结

//曲线图

[置顶] highcharts封装使用总结

//纵向条形图

[置顶] highcharts封装使用总结

//横向条形图

[置顶] highcharts封装使用总结

//饼形图

[置顶] highcharts封装使用总结

//散播点图

[置顶] highcharts封装使用总结

//区域折线图

[置顶] highcharts封装使用总结

//区域曲线图

[置顶] highcharts封装使用总结

下面介绍封装后的类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文件