?轉自：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 (转)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。