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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
| <script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/highcharts.js"></script><script type="text/javascript">var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: ‘container‘,//设置显示图表的容器
type: ‘line‘,//设置图表样式，可以为line,spline, scatter, splinearea bar,pie,area,column // defaultSeriesType: ‘column‘, //图表的默认样式 // margin:[21, 23, 24, 54],//整个图表的位置(上下左右的空隙)
marginRight: 200,//右边间距
marginBottom: 25//底部间距/空隙 // inverted: false,//可选，控制显示方式，默认上下正向显示 // shadow:true,//外框阴影 // backgroundColor:"#FFF", // animation:true, // borderColor:"#888", // borderRadius:5, // borderWidth:1, // ignoreHiddenSeries:true, // reflow:true, // plotBorderWidth:1, // alignTicks:true },
labels:{//在报表上显示的一些文本
items:[{
html:‘本图表数据有误，仅用于说明相应的属性‘,
style:{left:‘100px‘,top:‘60px‘} }, {
html:‘http://www.highcharts.com/demo‘,
style:{left:‘100px‘,top:‘100px‘} }]},
credits:{//右下角的文本
enabled: true,
position: {//位置设置
align: ‘right‘,
x: -10,
y: -10},
href: "http://www.highcharts.com",//点击文本时的链接
style: {
color:‘blue‘ },
text: "Highcharts Demo"//显示的内容 },
// plotOptions:{//绘图线条控制 // spline:{ // allowPointSelect :true,//是否允许选中点 // animation:true,//是否在显示图表的时候使用动画 // cursor:‘pointer‘,//鼠标移到图表上时鼠标的样式 // dataLabels:{ // enabled :true,//是否在点的旁边显示数据 // rotation:0 // }, // enableMouseTracking:true,//鼠标移到图表上时是否显示提示框 // events:{//监听点的鼠标事件 // click: function() { // } // }, // marker:{ // enabled:true,//是否显示点 // radius:3,//点的半径 // fillColor:"#888" // lineColor:"#000" // symbol: ‘url(http://highcharts.com/demo/gfx/sun.png)‘,//设置点用图片来显示 // states:{ // hover:{ // enabled:true//鼠标放上去点是否放大 // }, // select:{ // enabled:false//控制鼠标选中点时候的状态 // } // } // }, // states:{ // hover:{ // enabled:true,//鼠标放上去线的状态控制 // lineWidth:3 // } // }, // stickyTracking:true,//跟踪 // visible:true, // lineWidth:2//线条粗细 // pointStart:100, // } // },
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‘] // lineWidth:1,//纵轴一直为空所对应的轴，即X轴 // plotLines: [{//一条竖线 // color: ‘#FF0000‘, // width: 2, // value: 5.5 // }] // labels: {//设置横轴坐标的显示样式 // rotation: -45,//倾斜度 // align: ‘right‘, // style: { // font: ‘normal 13px Verdana, sans-serif‘ // color: ‘white‘ // } // } },
yAxis: {// tickInterval: 200, //自定义刻度 // max:1000,//纵轴的最大值 // min: 0,//纵轴的最小值
title: {//纵轴标题
text: ‘百分数‘ },
labels : {
formatter : function() {//设置纵坐标值的样式
return this.value + ‘%‘; }},
plotLines: [{
value: 0,
width: 1,
color: ‘#808080‘ }]},
tooltip: {//鼠标移到图形上时显示的提示框
formatter: function() {
return ‘<b>‘+ this.series.name +‘</b><br />‘+
this.x +‘: ‘+ this.y +‘?°C‘; }// crosshairs:[{//控制十字线 // width:1, // color:"#CCC", // dashStyle:"longdash" // } },
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]}]});});</script><body><div id="container" ></div></body> |
