转自：http://www.cnblogs.com/gxll1314/archive/2010/10/11/1847770.html

做为系统开发应用不可缺少的部分，图表可以使系统分析看起来更直观，也可以使系统可以锦上添花，毕竟做统计比较繁琐~使用java的程序员，通常使用jfreechart这个工具去作图，唯一的缺憾是图是静态的jpg，缺乏灵性~其实前台有很多这样的图形控件可以使用。这是个一系列的随笔将介绍几乎所有的前台图形报表的使用。本篇是开篇;

HighCharts是jQuery的一个插件，当前它并不像其他的jQuery插件那样可以像这样调用

view sourceprint?
1 　<SPAN style="TEXT-DECORATION: line-through">$(selector).method();
2 </SPAN>

而是采用new关键字

view sourceprint?
1 var chart= new class(options);

先看一个基本的示例

view sourceprint?
01 var chart;
02             $(document).ready(function() {
03                 chart = new Highcharts.Chart({
04                     chart: {
05                         renderTo: 'container',
06                         defaultSeriesType: 'line',
07                         marginRight: 130,
08                         marginBottom: 25
09                     },
10                     title: {
11                         text: 'Monthly Average Temperature',
12                         x: -20 //center
13                     },
14                     subtitle: {
15                         text: 'Source: WorldClimate.com',
16                         x: -20
17                     },
18                     xAxis: {
19                         categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
20                             'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
21                     },
22                     yAxis: {
23                         title: {
24                             text: 'Temperature (°C)'
25                         },
26                         plotLines: [{
27                             value: 0,
28                             width: 1,
29                             color: '#808080'
30                         }]
31                     },
32                     tooltip: {
33                         formatter: function() {
34                                 return '<b>'+ this.series.name +'</b><br/>'+
35                                 this.x +': '+ this.y +'°C';
36                         }
37                     },
38                     legend: {
39                         layout: 'vertical',
40                         align: 'right',
41                         verticalAlign: 'top',
42                         x: -10,
43                         y: 100,
44                         borderWidth: 0
45                     },
46                     series: [{
47                         name: 'Tokyo',
48                         data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
49                     }, {
50                         name: 'New York',
51                         data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
52                     }, {
53                         name: 'Berlin',
54                         data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
55                     }, {
56                         name: 'London',
57                         data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
58                     }]
59                 });
60                   
61                   
62             });

整个配置的关键部分在于series,chart,xAxis,yAxis;

series接受的数据格式为json Array：

view sourceprint?
1 [{},{},{}]

注意：最后一个数据后面一定不能有逗号，否则在IE系列下会报错，这个在几乎所有的jQuery插件的配置中也会出现的问题，当IE报错的时候，一定要检查是否多写了一个逗号

配置选项

chart：

renderTo//放置图表的容器

defaultSeriesType//图表类型line, spline, area, areaspline, column, bar, pie , scatter

xAxis,yAxis:

tickInterval: 15//自定义刻度

更多

常见的使用环境

1：我想显示多个图形报表。这些数据不是循环生成的！因为如果循环生成的话直接$.each就可以了！

view sourceprint?
1 var options={
2      chart:{},
3      xAxis:{},
4      yAxis:{},
5      series:[]
6 }

因为大部分的配置属性都是重复的，我们没有必要每次都声明。所以首先声明一个通用的options，然后采用$.extend函数

注意，我们不希望更改原有的options对象，所以

view sourceprint?
1 var o=$.exend({},options,{chart:{},xAxis:{}})

这样o是options与第三个对象合并后的对象

view sourceprint?
01 var options={
02             chart:{
03                 x:1,
04                 y:2
05             },
06             data:{
07                 m:1,
08                 n:2
09             }
10         }
11 var o=$.extend(
12           {},options,
13          {chart:{
14         x:2},ss:{
15             u:2,
16             f:2
17         }})
18 var o2=$.extend({},options,{data:{}})
19 //console.log(o);
20   
21 var chart=new Highcharts.Chart(o);
22 var chart2=new Highcharts.Chart(o2);

2: 从服务器获取数据动态生成运行曲线

曲线是从服务器获取的点连接而成。我们将点输出到报表上，连接就可以组成动态曲线。

使用的方法

配置chart:{

events:{

load:requestData

}

} ,

series: [{ name: '服务器数据', data: [] }]

方法:

chart.series[0].addPoint([x,y], true, shift);

view sourceprint?
01 var x=-10;
02 $(document).ready(function(){
03     chart = new Highcharts.Chart({
04         chart: {
05             renderTo: 'container',
06             defaultSeriesType: 'spline',
07             events: {
08                 load: requestData
09             }
10         },
11         tooltip:{
12             formatter: function() {
13                return ''+ this.series.name +'<br/>'+
14                 '时间 : '+ this.x +'<br/>'+
15                 '价格: '+ this.y;
16              }
17         },
18         title: {
19             text: '运行曲线'
20         },
21         xAxis: {
22             //type: 'linear',
23             //tickPixelInterval: 10,
24             maxZoom: 60*3,
25             min:0,
26             minPadding:0.2
27         },
28         yAxis: {
29             minPadding: 0.2,
30             maxPadding: 0.2,
31             title: {
32                 text: 'Value',
33                 margin: 80
34             }
35         },
36         series: [{
37             name: '服务器数据',
38             data: []
39         }//,{
40             //name:"fuww",
41             //data:[]
42         //}
43         ]
44     });
45 function requestData() {
46     $.ajax({
47         url: 'orderAuction.action',
48         success: function(point) {
49             var series = chart.series[0],
50             shift = series.data.length > 20;
51             var s=eval('('+point+')');
52             var y=s.initial.price;
53             var z=s.initial.change;
54             chart.series[0].addPoint([x,y], true, shift);
55             // call it again after one second
56            timett = setTimeout('requestData()', 1000);
57            //timett = setInterval(requestData,1000);
58         },
59         cache: false
60     });
61     x=x+10;
62 }

3:定义主题

最重要的是colors选项的颜色配置，按显示顺序配置即可！主题显示效果

view sourceprint?
01 var theme = {
02     colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
03     title: {
04         style: {
05             color: '#000',
06             font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
07         }
08     },
09     subtitle: {
10         style: {
11             color: '#666666',
12             font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
13         }
14     },
15     xAxis: {
16         gridLineWidth: 1,
17         lineColor: '#000',
18         tickColor: '#000',
19         labels: {
20             style: {
21                 color: '#000',
22                 font: '11px Trebuchet MS, Verdana, sans-serif'
23             }
24         },
25         title: {
26             style: {
27                 color: '#333',
28                 fontWeight: 'bold',
29                 fontSize: '12px',
30                 fontFamily: 'Trebuchet MS, Verdana, sans-serif'
31               
32             }
33         }
34     },
35     yAxis: {
36         alternateGridColor: null,
37         minorTickInterval: 'auto',
38         lineColor: '#000',
39         lineWidth: 1,
40         tickWidth: 1,
41         tickColor: '#000',
42         labels: {
43             style: {
44                 color: '#000',
45                 font: '11px Trebuchet MS, Verdana, sans-serif'
46             }
47         },
48         title: {
49             style: {
50                 color: '#333',
51                 fontWeight: 'bold',
52                 fontSize: '12px',
53                 fontFamily: 'Trebuchet MS, Verdana, sans-serif'
54             }
55         }
56     },
57     legend: {
58         itemStyle: {
59             font: '9pt Trebuchet MS, Verdana, sans-serif',
60             color: 'black'
61           
62         },
63         itemHoverStyle: {
64             color: '#039'
65         },
66         itemHiddenStyle: {
67             color: 'gray'
68         }
69     },
70     labels: {
71         style: {
72             color: '#99b'
73         }
74     }
75 };

应用主题

view sourceprint?
1 Highcharts.setOptions(theme);

4：饼形图的计算

饼形图是按照百分比去生成的，不论是后台计算还是前台计算，我们需要将其百分比的总和为100%,所以为了不那么错误的计算，应该使用四舍五入的形式，最后一个数据=100-前面总和。

5: 基本的图形报表参见官方示例

转载于:https://www.cnblogs.com/millen/archive/2011/04/17/2019144.html

(jQuery,Highcharts)前端图表系列之一 --Highcharts (转)相关推荐

  1. python前端图表框架_图表highcharts联合jquery ajax 后端取数据前端图表渲染

    Highcharts是一个制作图表的纯Javascript类库,主要特性如下:兼容性:兼容当今所有的浏览器,包括iPhone.IE和火狐等等: 对个人用户完全免费: 纯JS,无BS: 支持大部分的图表 ...

  2. 前端图表制作——HighCharts图表入门

    HighCharts图表入门 HighCharts的作用 ​ 在JavaEE企业级项目开发中,很多项目都会用到数据的统计和图表的展示功能,如:各种股票系统,银行的资金结算,公司的财务报表,等等.如何快 ...

  3. jquery图表统计插件-highcharts详解

    代码实例: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  4. 网页图表Highcharts实践教程之认识Highcharts

    网页图表Highcharts实践教程之认识Highcharts 第1章  认识Highcharts Highcharts是国际知名的一款图表插件.它完全使用Javascript编写实现.其结构清晰,使 ...

  5. Java通过HighCharts导出图表

    Highcharts是一款优秀的图表图形工具,支持几乎所有的图表图形,相信很多朋友都在项目中使用过该组件,然而我想我们不仅仅是要用它做展示还要讲分析出来的图表进行导出(word或pdf),本人最近的项 ...

  6. （转）基于MVC4+EasyUI的Web开发框架经验总结（4）--使用图表控件Highcharts

    http://www.cnblogs.com/wuhuacong/p/3736564.html 在我们做各种应用的时候,我们可能都会使用到图表统计,以前接触过一些不同的图表控件,在无意中发现了图表控件 ...

  7. 数据呈现图表插件Highcharts介绍+图表联动案例

    由于项目需要,学习并使用了Highcharts图表插件,这是一款功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库插件. Highcharts简介 下边的介绍来自Highcharts中文 ...

  8. uni-app app端用highcharts绘制图表，并生成海报保存到手机相册

    uni-app 打包app后 highcharts图表绘制不成功,不支持该方法,所以就考虑在app中嵌入webview h5页面,实现图表的绘制. 首先引用安装highcharts,封装成一个组件 n ...

  9. 网页图表控件Highcharts如何详细设置参数

    在下载了Highcharts范例之后,按照如下所示第一步第二步操作.在第二步中,默认并没有提供很多参数设置,比如如何去掉右下角的水印,如何自定义图标的高度宽度,背景颜色等等. 在我的另一篇文章中(Hi ...

最新文章

  1. Oracle常用傻瓜问题1000问
  2. 图标化java_java最小化到托盘显示图标实现
  3. linux启用root用户,Ubuntu 下启用root账号与修改密码
  4. 浏览器网页上的SSH终端webssh：pip install webssh
  5. 29. Divide Two Integers
  6. cisco 双ISP线路接入，链路自动切换方案
  7. svn忽略指定文件夹下的文件_管理SteamLibrary文件夹下的acf文件
  8. (转)Cortex-M3 (NXP LPC1788)之GPIO
  9. 确保帐户安全 谈MySQL数据库安全解决方案
  10. 【JAVA SE】第十二章 流(Stream)、IO流和文件(File)
  11. 【Android】Binder机制
  12. Java的四种包访问权限
  13. python自动化（七）自动化测试平台开发：1.自动化测试平台简介
  14. 码农翻身讲网络4：从Token到Sessions说到OAuth认证和CAS单点登录
  15. 基于opencv求直线方程
  16. 微信公众号商城前景分析
  17. 靠写代码登上胡润富豪榜花半年写得Python基础 入门必看
  18. VB中On Error Resume Next 什么意思，一般在什么情况下使用
  19. 江城子·己亥年戊辰月丁丑日话凄凉
  20. 【Python爬虫学习】一、Request

热门文章

  1. 在Panel上绘图的实现
  2. Python configparser模块
  3. 读书笔记2014年第1本：《赤裸裸的统计学》
  4. Java程序员应知道的十条Java优化策略，让你的系统健步如飞
  5. 编译安装php之安装libiconv-1.14.tar.gz出错解决方法
  6. 最小生成树--prim+优先队列优化模板
  7. Ubuntu12.04安装小记
  8. Android 使用正则表达式验证邮箱格式是否正确
  9. linux Telnet远程登录
  10. android string.xml中%1$s、%1$d等的用法