使用快速开发报表.docVIP

一、what Highcharts是一个纯JavaScript编写的图表库，它提供了一个将交互式的图表添加到您的网站或Web应用程序的简单方法。?Highcharts目前支持折线图，曲线图，块状图，块状-曲线图，柱形图，条形图，饼图和散点图类型。 官网： 它的主要特点有： 兼容性强 支持主流浏览器，包括Ipad/Iphone. 免费和开源 纯Ja vaScript 不需要任何浏览器插件 多样化的图表类型 支持折线图，曲线图，块状图，块状-曲线图，柱形图，条形图，饼图和散点图类型，在同一个报表中可以任意搭配各种类型的图形，例如： 简单的配置规则 设置Highcharts配置选项不需要特殊的编程技巧，所有选项都是JavaScript对象结构，键和值用冒号对应，不同键用逗号分隔，不同选项用括号分组。如： var options = { chart: { renderTo: container, defaultSeriesType: column }, title: { text: Fruit Consumption }, xAxis: { categories: [] }, yAxis: { title: { text: Units } }, series: [] }; 动态 在图表创建后，能调用API改变图表的展现 支持多轴对比 尝试修复量和成功修复量对应左边的Y轴，而修复成功率则对应右边的Y轴 提示标签 时间轴 支持多种时间格式 支持导出和打印 自带导出和打印功能，能导出PNG, JPG, PDF or SVG 格式的图片，也能直接打印报表 支持缩放 外部数据加载 数据来自JavaScript数组中，可以定义在本地配置对象中或者外部加载 经典案例： //页面加载时调用 $(document).ready(function(){ //获取JSON对象 var data=jQuery.parseJSON(${requestScope._JSON_DATA_}); //显示图表 showChart(width,data); }); 这个data就是获取到的JavaScript数组，将提供给highcharts作为数据源 支持图表反转或者轴反转 支持标签旋转 二、why 由于Highcharts具有强兼容性、灵活易用性、画面效果好等特点，能被广泛用于报表开发。 三、How 3.1安装 3.1.1 引入Js 引入Jquery和Highcharts两个Js文件即可，Jquery用于获取Js数组数据(当然这里也可以是其它的工具去获取数据)，Highcharts用于展现图表 script type=text/javascriptsrc=../css/newMainjs/jquery-1.4.2.min.js/script script type=text/javascript src=../script/highcharts/highcharts.js/script 这些文件可以在Highcharts网站下载：/documentation/how-to-use 3.1.2 初始化图表 在web页面的script标签，或者在一个单独的js文件中，初始化highcharts图表。 var chart1; // globally available $(document).ready(function() { chart1 = new Highcharts.Chart({ chart: { renderTo: chart-container-1,//这里设置highcharts图表所在的DIV defaultSeriesType: bar }, title: { text: Fruit Consumption }, xAxis: { categories: [Apples, Bananas, Oranges] }, yAxis: { title: { text: Fruit eaten } }, series: [{ name: Jane, d