HightCharts开发总结

1、   简介：Highcharts是一款纯javascript编写的图表库，能够在Web网站或Web应用中添加交互性的图表，现在官方的最新版本为Highcharts-4.2.3。

2、   兼容性：Highcharts基本支持目前所有IE6+ 的现代浏览器，Highcharts在标准（W3C标准）浏览器中使用SVG技术渲染图形，在遗留的IE浏览器中使用VML技术来绘图。

3、   图表类型: Highcharts目前支持直线图、曲线图、面积图、曲线面积图、面积范围图、曲线面积范围图、柱状图、柱状范围图、条形图、饼图、散点图、箱线图、气泡图、误差线图、漏斗图、仪表图、瀑布图、雷达图，共18种类型图表，其中很多图表可以集成在同一个图形中形成综合图。

在线演示：http://www.hcharts.cn/demo/highcharts.php

4、   API接口：提供丰富的API接口，方便在创建图表后对图表的任意点、线和文字等进行增加、删除和修改操作；可以针对每个轴设置其位置、文字和样式等属性；当鼠标悬停在图表上的数据点时，会显示信息提示框，显示的内容和样式可以指定和设置。开发文档http://www.hcharts.cn/api/index.php

5、   图标导出打印功能：需引入exporting.js文件，需要对menu汉化，汉化方法有两种：一、直接更改exporting.js文件，注意引入js文件时需要指定charset="GB2312"编码格式。（不推荐使用本方法）

二、利用API提供的属性更改

$('#container').highcharts({

           exporting: {

                    buttons: {

                        contextButton: {

                            menuItems: [{}, {}]

                         }

                     }

           }

}) 具体参考API文档。

6、   自适应：开发文档chart中提供的reflow属性，会使得图表根据div大小改变，但经测试该属性并不起作用，如果图表在dialog中可以再onResize方法中调用

$('#container').highcharts().reflow()来实现自适应;

 

注意：如果在IE7/8下，div的宽高设置的为100%，highcharts拿不到div实际的宽高，需要指定其宽高：

$("#container").width($("父div").width());

$("#container").height($("父div ").height());

 

1、   获取select区域横坐标的边缘值

通过提供的events的selection方法中的event.xAxis可以得到选中区域横坐标的最大、最小值，不过这个值是以 1 为单位长度的横坐标长度的，也就是说如果横坐标使用了categories数组，最小值为5就对应数组的categories[5]的值,为了获取更准确的值采用了下面方法计算边缘值：

//以 1 为单位长度的横坐标长度

var minFloat = event.xAxis[0].min;

var maxFloat = event.xAxis[0].max;

//向下取整

var minInt = Math.floor(minFloat) < 0 ? 0 : Math.floor(minFloat);

var maxInt = Math.floor(maxFloat);

 

var minRealValue = Math.floor((categoriesArray[minInt + 1] - categoriesArray[minInt]) * (minFloat - minInt)) + Number(categoriesArray[minInt]); //横坐标实际最小值,向下取整

var maxRealValue = Math.ceil((categoriesArray[minInt + 1] - categoriesArray[minInt]) * (maxFloat - maxInt)) + Number(categoriesArray[maxInt]); //横坐标实际最大值， 向上取整

 

更多详情请参考http://www.hcharts.cn/demo/highcharts.php。