做为系统开发应用不可缺少的部分，图表可以使系统分析看起来更直观，也可以使系统可以锦上添花，毕竟做统计比较繁琐~使用java的程序员，通常使用jfreechart这个工具去作图，唯一的缺憾是图是静态的jpg，缺乏灵性~其实前台有很多这样的图形控件可以使用。这是个一系列的随笔将介绍几乎所有的前台图形报表的使用。本篇是开篇;
HighCharts是jQuery的一个插件，当前它并不像其他的jQuery插件那样可以像这样调用
|
1
2
|
<span style=
"text-decoration: line-through;"
>$(selector).method();
</span>
|
而是采用new关键字
|
1
|
var
chart=
new
class(options);
|
先看一个基本的示例
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
var
chart;
$(document).ready(
function
() {
chart =
new
Highcharts.Chart({
chart: {
renderTo:
'container'
,
defaultSeriesType:
'line'
,
marginRight: 130,
marginBottom: 25
},
title: {
text:
'Monthly Average Temperature'
,
x: -20
//center
},
subtitle: {
text:
'Source: WorldClimate.com'
,
x: -20
},
xAxis: {
categories: [
'Jan'
,
'Feb'
,
'Mar'
,
'Apr'
,
'May'
,
'Jun'
,
'Jul'
,
'Aug'
,
'Sep'
,
'Oct'
,
'Nov'
,
'Dec'
]
},
yAxis: {
title: {
text:
'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color:
'#808080'
}]
},
tooltip: {
formatter:
function
() {
return
'<b>'
+
this
.series.name +
'</b><br/>'
+
this
.x +
': '
+
this
.y +
'°C'
;
}
},
legend: {
layout:
'vertical'
,
align:
'right'
,
verticalAlign:
'top'
,
x: -10,
y: 100,
borderWidth: 0
},
series: [{
name:
'Tokyo'
,
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]
}, {
name:
'New York'
,
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]
}, {
name:
'Berlin'
,
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]
}, {
name:
'London'
,
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]
}]
});
});
|
整个配置的关键部分在于series,chart,xAxis,yAxis;
series接受的数据格式为json Array：
|
1
|
[{},{},{}]
|
配置选项
chart：
renderTo//放置图表的容器
defaultSeriesType//图表类型line, spline, area, areaspline, column, bar, pie , scatter
xAxis,yAxis:
tickInterval: 15//自定义刻度
常见的使用环境
1：我想显示多个图形报表。这些数据不是循环生成的！因为如果循环生成的话直接$.each就可以了！
|
1
2
3
4
5
6
|
var
options={
chart:{},
xAxis:{},
yAxis:{},
series:[]
}
|
注意，我们不希望更改原有的options对象，所以
|
1
|
var
o=$.exend({},options,{chart:{},xAxis:{}})
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
var
options={
chart:{
x:1,
y:2
},
data:{
m:1,
n:2
}
}
var
o=$.extend(
{},options,
{chart:{
x:2},ss:{
u:2,
f:2
}})
var
o2=$.extend({},options,{data:{}})
//console.log(o);
var
chart=
new
Highcharts.Chart(o);
var
chart2=
new
Highcharts.Chart(o2);
|
2: 从服务器获取数据动态生成运行曲线
曲线是从服务器获取的点连接而成。我们将点输出到报表上，连接就可以组成动态曲线。
使用的方法
配置chart:{
events:{
load:requestData
}
} ,
series: [{ name: '服务器数据', data: [] }]
方法:
chart.series[0].addPoint([x,y], true, shift);
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
var
x=-10;
$(document).ready(
function
(){
chart =
new
Highcharts.Chart({
chart: {
renderTo:
'container'
,
defaultSeriesType:
'spline'
,
events: {
load: requestData
}
},
tooltip:{
formatter:
function
() {
return
''
+
this
.series.name +
'<br/>'
+
'时间 : '
+
this
.x +
'<br/>'
+
'价格: '
+
this
.y;
}
},
title: {
text:
'运行曲线'
},
xAxis: {
//type: 'linear',
//tickPixelInterval: 10,
maxZoom: 60*3,
min:0,
minPadding:0.2
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
title: {
text:
'Value'
,
margin: 80
}
},
series: [{
name:
'服务器数据'
,
data: []
}
//,{
//name:"fuww",
//data:[]
//}
]
});
function
requestData() {
$.ajax({
url:
'orderAuction.action'
,
success:
function
(point) {
var
series = chart.series[0],
shift = series.data.length > 20;
var
s=eval(
'('
+point+
')'
);
var
y=s.initial.price;
var
z=s.initial.change;
chart.series[0].addPoint([x,y],
true
, shift);
// call it again after one second
timett = setTimeout(
'requestData()'
, 1000);
//timett = setInterval(requestData,1000);
},
cache:
false
});
x=x+10;
}
|
最重要的是colors选项的颜色配置，按显示顺序配置即可！主题显示效果
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
var
theme = {
colors: [
'#058DC7'
,
'#50B432'
,
'#ED561B'
,
'#DDDF00'
,
'#24CBE5'
,
'#64E572'
,
'#FF9655'
,
'#FFF263'
,
'#6AF9C4'
],
title: {
style: {
color:
'#000'
,
font:
'bold 16px "Trebuchet MS", Verdana, sans-serif'
}
},
subtitle: {
style: {
color:
'#666666'
,
font:
'bold 12px "Trebuchet MS", Verdana, sans-serif'
}
},
xAxis: {
gridLineWidth: 1,
lineColor:
'#000'
,
tickColor:
'#000'
,
labels: {
style: {
color:
'#000'
,
font:
'11px Trebuchet MS, Verdana, sans-serif'
}
},
title: {
style: {
color:
'#333'
,
fontWeight:
'bold'
,
fontSize:
'12px'
,
fontFamily:
'Trebuchet MS, Verdana, sans-serif'
}
}
},
yAxis: {
alternateGridColor:
null
,
minorTickInterval:
'auto'
,
lineColor:
'#000'
,
lineWidth: 1,
tickWidth: 1,
tickColor:
'#000'
,
labels: {
style: {
color:
'#000'
,
font:
'11px Trebuchet MS, Verdana, sans-serif'
}
},
title: {
style: {
color:
'#333'
,
fontWeight:
'bold'
,
fontSize:
'12px'
,
fontFamily:
'Trebuchet MS, Verdana, sans-serif'
}
}
},
legend: {
itemStyle: {
font:
'9pt Trebuchet MS, Verdana, sans-serif'
,
color:
'black'
},
itemHoverStyle: {
color:
'#039'
},
itemHiddenStyle: {
color:
'gray'
}
},
labels: {
style: {
color:
'#99b'
}
}
};
|
|
1
|
Highcharts.setOptions(theme);
|
饼形图是按照百分比去生成的，不论是后台计算还是前台计算，我们需要将其百分比的总和为100%,所以为了不那么错误的计算，应该使用四舍五入的形式，最后一个数据=100-前面总和。
扫一扫
850
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
