(jQuery,Highcharts)前端图表系列之一 --Highcharts (转)

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

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

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

 

?

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

2

</SPAN>

 

 

   而是采用new关键字

 

?

1	var chart= new class(options);

   先看一个基本的示例

 

?

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：

?

1	[{},{},{}]

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

 

配置选项

chart：

renderTo//放置图表的容器

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

xAxis,yAxis:

tickInterval: 15//自定义刻度

更多

常见的使用环境

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

?

1	var options={

2

chart:{},

3

xAxis:{},

4

yAxis:{},

5

series:[]

6

}

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

 

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

?

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

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

 

?

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);

 

?

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选项的颜色配置，按显示顺序配置即可！主题显示效果

 

?

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

};

应用主题

 

?

1	Highcharts.setOptions(theme);

4：饼形图的计算

 

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

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