图表highcharts联合jquery ajax 后端取数据前端图表渲染
来源：互联网 发布：闲鱼的淘宝介入有用吗 编辑：程序博客网 时间：2024/05/22 12:00
给自己和志同道合的童鞋们留存了
Highcharts是一个制作图表的纯Javascript类库，主要特性如下：
兼容性：兼容当今所有的浏览器，包括iPhone、IE和火狐等等；
对个人用户完全免费；
纯JS，无BS；
支持大部分的图表类型：直线图，曲线图、区域图、区域曲线图、柱状图、饼装图、散布图；
跨语言：不管是PHP、Asp.net还是Java都可以使用，它只需要三个文件：一个是Highcharts的核心文件highcharts.js，还有a canvas emulator for IE和Jquery类库或者MooTools类库；
提示功能：鼠标移动到图表的某一点上有提示信息；
放大功能：选中图表部分放大，近距离观察图表；
易用性：无需要特殊的开发技能，只需要设置一下选项就可以制作适合自己的图表；
时间轴：可以精确到毫秒；
Highcharts提供大量的选项配置参数，您可以轻松定制符合用户要求的图表，目前官网只提供英文版的开发配置说明文档，而中文版的文档网上甚少，且零散不全。这里，我把Highcharts常用的最核心的参数选项配置整理成文档，与大家分享。
Chart：图表区选项
Chart图表区选项用于设置图表区相关属性。
参数描述默认值backgroundColor设置图表区背景色#FFFFFFborderWidth设置图表边框宽度0borderRadius设置图表边框圆角角度5renderTo图表放置的容器，一般在html中放置一个DIV，获取DIV的id属性值nulldefaultSeriesType默认图表类型line, spline, area, areaspline, column, bar, pie , scatter0width图表宽度，默认根据图表容器自适应宽度nullheight图表高度，默认根据图表容器自适应高度nullmargin设置图表与其他元素之间的间距，数组，如[0,0,0,0][null]plotBackgroundColor主图表区背景色，即X轴与Y轴围成的区域的背景色nullplotBorderColor主图表区边框的颜色，即X轴与Y轴围成的区域的边框颜色nullplotBorderWidth主图表区边框的宽度0shadow是否设置阴影，需要设置背景色backgroundColor。falsereflow是否自使用图表区域高度和宽度，如果没有设置width和height时，会自适应大小。truezoomType拖动鼠标进行缩放，沿x轴或y轴进行缩放，可以设置为：'x','y','xy'''events事件回调，支持addSeries方法，click方法，load方法，selection方法等的回调函数。Color：颜色选项
Color颜色选项用于设置图表的颜色方案。
参数描述默认值color用于展示图表，折线/柱状/饼状等图的颜色，数组形式。arrayHighcharts已经默认提供了多种颜色方案，当要显示的图形多于颜色种类时，多出的图形会自动从第一种颜色方案开始选取。自定义颜色方案的方法：
Highcharts.setOptions({
colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655',
'#FFF263', '#6AF9C4']
});
Title：标题选项
Title标题选项用于设置图表的标题相关属性。
参数描述默认值text标题文本内容。Chart titlealign水平对齐方式。centerverticalAlign垂直对齐方式。topmargin标题与副标题之间或者主图表区间的间距。15floating是否浮动，如果为true，则标题可以偏离主图表区，可配合x,y属性使用。falsestyle设置CSS样式。{color: '#3E576F',fontSize: '16px'}
Subtitle：副标题选项
副标题提供的属性选项与标题title大致相同，可参照上述标题选项，值得一提的是副标题的text选项默认为''，即空的，所以默认情况下副标题不显示。
xAxis：X轴选项
X轴选项用于设置图表X轴相关属性。
参数描述默认值categories设置X轴分类名称，数组，例如：categories: ['Apples', 'Bananas', 'Oranges'][]titleX轴名称，支持text、enabled、align、rotation、style等属性 labels设置X轴各分类名称的样式style，格式formatter，角度rotation等。arraymaxX轴最大值(categories为空时)，如果为null，则最大值会根据X轴数据自动匹配一个最大值。nullminX轴最小值(categories为空时)，如果为null，则最小值会根据X轴数据自动匹配一个最小值。arraygridLineColor网格（竖线）颜色#C0C0C0gridLineWidth网格(竖线)宽度1lineColor基线颜色#C0D0E0lineWidth基线宽度0yAxis：Y轴选项
Y轴选项与上述xAxis选项基本一致，请参照上表中的参数设置，不再单独列出。
Series：数据列选项
数据列选项用于设置图表中要展示的数据相关的属性。
参数描述默认值data显示在图表中的数据列，可以为数组或者JSON格式的数据。如：data:[0, 5, 3, 5]，或data: [{name: 'Point 1',y: 0}, {name: 'Point 2',y: 5}]''name显示数据列的名称。''type数据列类型，支持 area, areaspline, bar, column, line, pie, scatter or splineline
plotOptions：数据点选项
plotOptions用于设置图表中的数据点相关属性。plotOptions根据各种图表类型，其属性设置略微有些差异，现将常用选项列出来。
参数描述默认值enabled是否在数据点上直接显示数据falseallowPointSelect是否允许使用鼠标选中数据点falseformatter回调函数，格式化数据显示内容formatter: function() {return this.y;}Tooltip：数据点提示框
Tooltip用于设置当鼠标滑向数据点时显示的提示框信息。
参数描述默认值enabled是否显示提示框truebackgroundColor设置提示框的背景色rgba(255, 255, 255, .85)borderColor提示框边框颜色，默认自动匹配数据列的颜色autoborderRadius提示框圆角度5shadow是否显示提示框阴影truestyle设置提示框内容样式，如字体颜色等color:'#333'formatter回调函数，用于格式化输出提示框的显示内容。返回的内容支持html标签如：<b>, <strong>, <i>, <em>, <br/>, <span>2Legend：图例选项
legend用于设置图例相关属性。
参数描述默认值layout显示形式，支持水平horizontal和垂直verticalhorizontalalign对齐方式。centerbackgroundColor图例背景色。nullborderColor图例边框颜色。#909090borderRadius图例边框角度5enabled是否显示图例truefloating是否可以浮动，配合x，y属性。falseshadow是否显示阴影falsestyle设置图例内容样式''第一个例子：
这个是从后端api取值，后端再从数据库里取值。
为了不让整个页面刷新，用了ajax做局部刷新
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
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
$(function() { $(document).ready(function() { //////// // Mysql Questions //////// varmysqlQuestionsOptions = { chart: { renderTo:'mysql-questions-container', type:'spline' }, title: { text:'', x: -20//center }, xAxis: { type:'datetime' }, yAxis: { title: { text:'per second' }, min:0 }, series: [{ name:'Select' },{ name:'Insert' },{ name:'Replace' },{ name:'Update' },{ name:'Delete' }] }; $.ajax({ url:'stats/mysql/questions', dataType:"json", success:function (data) { //init series arays select_arr = []; insert_arr = []; replace_arr = []; update_arr = []; delete_arr =[]; for(i in data) { //build varr = data[i]; select_arr.push([r.ts, r.Select_per_second]); insert_arr.push([r.ts, r.Insert_per_second]); replace_arr.push([r.ts, r.Replace_per_second]); update_arr.push([r.ts, r.Update_per_second]); delete_arr.push([r.ts, r.Delete_per_second]); } //save series mysqlQuestionsOptions.series[0].data = select_arr; mysqlQuestionsOptions.series[1].data = insert_arr; mysqlQuestionsOptions.series[2].data = replace_arr; mysqlQuestionsOptions.series[3].data = update_arr; mysqlQuestionsOptions.series[4].data = delete_arr; varchart = new Highcharts.Chart(mysqlQuestionsOptions); }, cache:false }); //////// // Mysql Select Sort //////// varmysqlSelectSortOptions = { chart: { renderTo:'mysql-select-sort-container', type:'spline' }, title: { text:'', x: -20//center }, xAxis: { type:'datetime' }, yAxis: { title: { text:'per second' }, min:0 }, series: [{ name:'Select Scan' },{ name:'Select Range' },{ name:'Select Full Join' },{ name:'Select Range Check' },{ name:'Select Full Range Join' },{ name:'Sort Scan' },{ name:'Sort Range' },{ name:'Sort Merge Passes' }] }; $.ajax({ url:'stats/mysql/select_sort', dataType:"json", success:function (data) { //init series arays select_scan_arr = []; select_range_arr = []; select_full_join_arr = []; select_range_check_arr = []; select_full_range_join_arr =[]; sort_scan_arr =[]; sort_range_arr =[]; sort_merge_passes_arr =[]; for(i in data) { //build varr = data[i]; select_scan_arr.push([r.ts, r.Select_scan_per_sec]); select_range_arr.push([r.ts, r.Select_range_per_sec]); select_full_join_arr.push([r.ts, r.Select_full_join_per_sec]); select_range_check_arr.push([r.ts, r.Select_range_check_per_sec]); select_full_range_join_arr.push([r.ts, r.Select_full_range_join_per_sec]); sort_scan_arr.push([r.ts, r.Sort_scan_per_sec]); sort_range_arr.push([r.ts, r.Sort_range_per_sec]); sort_merge_passes_arr.push([r.ts, r.Sort_merge_passes_per_sec]); } //save series mysqlSelectSortOptions.series[0].data = select_scan_arr; mysqlSelectSortOptions.series[1].data = select_range_arr; mysqlSelectSortOptions.series[2].data = select_full_join_arr; mysqlSelectSortOptions.series[3].data = select_range_check_arr; mysqlSelectSortOptions.series[4].data = select_full_range_join_arr; mysqlSelectSortOptions.series[5].data = sort_scan_arr; mysqlSelectSortOptions.series[6].data = sort_range_arr; mysqlSelectSortOptions.series[7].data = sort_merge_passes_arr; varchart = new Highcharts.Chart(mysqlSelectSortOptions); }, cache:false }); //////// // Mysql Connections //////// varmysqlConnectionsOptions = { chart: { renderTo:'mysql-connections-container', type:'spline' }, title: { text:'', x: -20//center }, xAxis: { type:'datetime' }, yAxis: [{ title: { text:'per second' }, min:0 },{ title: { text:'count' }, min:0, opposite:true }], series: [{ name:'Max Connections', yAxis :1, type: 'area' },{ name:'Max Used Connections', yAxis :1, type: 'area' },{ name:'Process Count', yAxis :1, type: 'area' },{ name:'Running Process Count', yAxis :1 },{ name:'Connection Rate', yAxis :0 },{ name:'Aborted connects Rate', yAxis :0 },{ name:'Aborted clients Rate', yAxis :0 }] }; $.ajax({ url:'stats/mysql/connections', dataType:"json", success:function (data) { //init series arays connections_arr = []; aborted_connects_arr = []; aborted_clients_arr = []; max_used_connections_arr = []; max_connections_arr =[]; process_count_arr = []; running_process_count_arr =[]; for(i in data) { //build varr = data[i]; connections_arr.push([r.ts, r.Connections_per_second]); aborted_connects_arr.push([r.ts, r.Aborted_connects_per_second]); aborted_clients_arr.push([r.ts, r.Aborted_clients_per_second]); max_used_connections_arr.push([r.ts, r.max_used_connections]); max_connections_arr.push([r.ts, r.max_connections]); process_count_arr.push([r.ts, r.process_count]); running_process_count_arr.push([r.ts, r.process_count_non_sleep]); } //save series mysqlConnectionsOptions.series[4].data = connections_arr; mysqlConnectionsOptions.series[5].data = aborted_connects_arr; mysqlConnectionsOptions.series[6].data = aborted_clients_arr; mysqlConnectionsOptions.series[0].data = max_connections_arr; mysqlConnectionsOptions.series[1].data = max_used_connections_arr; mysqlConnectionsOptions.series[2].data = process_count_arr; mysqlConnectionsOptions.series[3].data = running_process_count_arr; varchart = new Highcharts.Chart(mysqlConnectionsOptions); }, cache:false }); //////// // Mysql Bytes //////// varmysqlBytesOptions = { chart: { renderTo:'mysql-bytes-container', type:'spline' }, title: { text:'', x: -20//center }, xAxis: { type:'datetime' }, yAxis: { title: { text:'kBps' }, min:0 }, series: [{ name:'Sent' },{ name:'Recieved' }] }; $.ajax({ url:'stats/mysql/bytes', dataType:"json", success:function (data) { //init series arays sent = []; recieved =[]; for(i in data) { //build varr = data[i]; sent.push([r.ts, r.kBps_sent]); recieved.push([r.ts, r.kBps_recieved]); } //save series mysqlBytesOptions.series[0].data = sent; mysqlBytesOptions.series[1].data = recieved; varchart = new Highcharts.Chart(mysqlBytesOptions); }, cache:false }); //////// // Mysql Temp //////// varmysqlTempOptions = { chart: { renderTo:'mysql-temp-container', type:'spline' }, title: { text:'', x: -20//center }, xAxis: { type:'datetime' }, yAxis: { title: { text:'per minute' }, min:0 }, series: [{ name:'Created Tmp Disk Tables' },{ name:'Created Tmp Tables' },{ name:'Created Tmp Files' }] }; $.ajax({ url:'stats/mysql/temp', dataType:"json", success:function (data) { //init series arays tmp_disk_tables = []; tmp_tables = []; tmp_files = []; for(i in data) { //build varr = data[i]; tmp_disk_tables.push([r.ts, r.Created_tmp_disk_tables_per_min]); tmp_tables.push([r.ts, r.Created_tmp_tables_per_min]); tmp_files.push([r.ts, r.Created_tmp_files_per_min]); } //save series mysqlTempOptions.series[0].data = tmp_disk_tables; mysqlTempOptions.series[1].data = tmp_tables; mysqlTempOptions.series[2].data = tmp_files; varchart = new Highcharts.Chart(mysqlTempOptions); }, cache:false }); //////// // Mysql Table Locks //////// varmysqlTableLocksOptions = { chart: { renderTo:'mysql-table-locks-container', type:'spline' }, title: { text:'', x: -20//center }, xAxis: { type:'datetime' }, yAxis: { title: { text:'per second' }, min:0 }, series: [{ name:'Table locks wait' },{ name:'Table locks immediate' }] }; $.ajax({ url:'stats/mysql/table_locks', dataType:"json", success:function (data) { //init series arays wait = []; immediate = []; for(i in data) { //build varr = data[i]; wait.push([r.ts, r.Table_locks_wait_per_sec]); immediate.push([r.ts, r.Table_locks_immediate_per_sec]); } //save series mysqlTableLocksOptions.series[0].data = wait; mysqlTableLocksOptions.series[1].data = immediate; varchart = new Highcharts.Chart(mysqlTableLocksOptions); }, cache:false }); //////// // Mysql Innodb Buffer Pool Usage //////// varmysqlInnoDBBPOptions = { chart: { renderTo:'mysql-innodb-bp-container', type:'area' }, title: { text:'Buffer Pool Usage', x: -20//center }, xAxis: { type:'datetime' }, yAxis: [{ title: { text:'MBytes' }, min:0 },{ title: { text:'Hit Rate %' }, min:0, max: 100, opposite:true }], series: [{ name:'Buffer Pool Total' },{ name:'Buffer Pool Used' },{ name:'Read Hit Rate', type:'spline', yAxis: 1 }] }; //////// // Mysql Innodb //////// varmysqlInnoDBOptions = { chart: { renderTo:'mysql-innodb-container', type:'spline' }, title: { text:'InnoDB Stats', x: -20//center }, xAxis: { type:'datetime' }, yAxis: { title: { text:'per second' }, min:0 }, series: [{ name:'Buffer Pool Read Request' },{ name:'Buffer Pool Reads' },{ name:'Buffer Pool Read Ahead Rnd' },{ name:'Buffer Pool Read Ahead Seq' },{ name:'Buffer Pool Write Request' },{ name:'Buffer Pool Pages Flushed' },{ name:'Buffer Pool Wait Free' },{ name:'Row Lock Waits' },{ name:'Data Reads' },{ name:'Data Writes' },{ name:'Data Fsyncs' },{ name:'Pages Created' },{ name:'Pages Read' },{ name:'Pages Written' },{ name:'Rows Deleted' },{ name:'Rows Inserted' },{ name:'Rows Read' },{ name:'Rows Updated' }] }; $.ajax({ url:'stats/mysql/innodb', dataType:"json", success:function (data) { //init series arays bp_used = []; bp_total = []; bp_read_ratio = []; bp_read_requests = []; bp_reads = [] bp_read_rnd = []; bp_read_seq = []; bp_write_req = []; bp_pages_flush = []; bp_wait_free = []; row_lock_waits = []; data_reads = []; data_write = []; data_fsyncs = []; pages_created = []; pages_read = []; pages_written = []; rows_deleted = []; rows_inserted = []; rows_read = []; rows_updated = []; for(i in data) { //build varr = data[i]; bp_used.push([r.ts, r.Innodb_buffer_pool_used_mb]); bp_total.push([r.ts, r.Innodb_buffer_pool_total_mb]); bp_read_ratio.push([r.ts, r.Innodb_buffer_pool_read_ratio]); bp_read_requests.push([r.ts, r.Innodb_buffer_pool_read_requests_per_second]); bp_reads.push([r.ts, r.Innodb_buffer_pool_reads_per_second]); bp_read_rnd.push([r.ts, r.Innodb_buffer_pool_read_ahead_rnd_per_second]); bp_read_seq.push([r.ts, r.Innodb_buffer_pool_read_ahead_seq_per_second]); bp_write_req.push([r.ts, r.Innodb_buffer_pool_write_requests_per_second]); bp_pages_flush.push([r.ts, r.Innodb_buffer_pool_pages_flushed_per_second]); bp_wait_free.push([r.ts, r.Innodb_buffer_pool_wait_free_per_second]); row_lock_waits.push([r.ts, r.Innodb_row_lock_waits_per_second]); data_reads.push([r.ts, r.Innodb_data_reads_per_second]); data_write.push([r.ts, r.Innodb_data_writes_per_second]); data_fsyncs.push([r.ts, r.Innodb_data_fsyncs_per_second]); pages_created.push([r.ts, r.Innodb_pages_created_per_second]); pages_read.push([r.ts, r.Innodb_pages_read_per_second]); pages_written.push([r.ts, r.Innodb_pages_written_per_second]); rows_deleted.push([r.ts, r.Innodb_rows_deleted_per_second]); rows_inserted.push([r.ts, r.Innodb_rows_inserted_per_second]); rows_read.push([r.ts, r.Innodb_rows_read_per_second]); rows_updated.push([r.ts, r.Innodb_rows_updated_per_second]); } //save series mysqlInnoDBBPOptions.series[1].data = bp_used; mysqlInnoDBBPOptions.series[0].data = bp_total; mysqlInnoDBBPOptions.series[2].data = bp_read_ratio; mysqlInnoDBOptions.series[0].data = bp_read_requests; mysqlInnoDBOptions.series[1].data = bp_reads; mysqlInnoDBOptions.series[2].data = bp_read_rnd; mysqlInnoDBOptions.series[3].data = bp_read_seq; mysqlInnoDBOptions.series[4].data = bp_write_req; mysqlInnoDBOptions.series[5].data = bp_pages_flush; mysqlInnoDBOptions.series[6].data = bp_wait_free; mysqlInnoDBOptions.series[7].data = row_lock_waits; mysqlInnoDBOptions.series[8].data = data_reads; mysqlInnoDBOptions.series[9].data = data_write; mysqlInnoDBOptions.series[10].data = data_fsyncs; mysqlInnoDBOptions.series[11].data = pages_created; mysqlInnoDBOptions.series[12].data = pages_read; mysqlInnoDBOptions.series[13].data = pages_written; mysqlInnoDBOptions.series[14].data = rows_deleted; mysqlInnoDBOptions.series[15].data = rows_inserted; mysqlInnoDBOptions.series[16].data = rows_updated; varchart = new Highcharts.Chart(mysqlInnoDBBPOptions); chart =new Highcharts.Chart(mysqlInnoDBOptions); }, cache:false }); });}); $(document).scroll(function(){ // If has not activated (has no attribute "data-top" if(!$('.subnav').attr('data-top')) { // If already fixed, then do nothing if($('.subnav').hasClass('subnav-fixed'))return; // Remember top position varoffset = $('.subnav').offset(); $('.subnav').attr('data-top', offset.top); } if($('.subnav').attr('data-top') - $('.subnav').outerHeight() <= $(this).scrollTop()) $('.subnav').addClass('subnav-fixed'); else $('.subnav').removeClass('subnav-fixed');});第二个例子
这个和前面是一样的方式，这里做了多个引用，也就是可以画多条线路
这个图不是我这的，但下面的代码是行的通的，可以放到一个js里面引用，然后通过ajax传值过去，在前端进行数据的渲染。
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
var charts = new Array(); varserverCount = 6; varlastTimes = new Array(); varmax = ${params.int("max")?:120}; $(document).ready(function() { Highcharts.setOptions({ global: { useUTC:false } }); for(var i = 0; i < serverCount; i++) { charts[i] =new Highcharts.Chart({ chart: { renderTo:'container' + i, type:'spline', events: { load:function() { // set up the updating of the chart each second varseries = this.series; varserverIndex = i; lastTimes[serverIndex] =0; varloadData = function() { $.getJSON("http://${request.serverName}:${request.serverPort}${request.contextPath}/toolkits/queryStatistics.gsp", {"lasTime":lastTimes[serverIndex],"proxy":true,"index":serverIndex,"max":max},function(data) { for(var k = 0; k < series.length; k++) { for(var j = 0; j < data[k].length; j++) { varpoint = data[k][j]; varisShift = series[k].data.length >= max; console.log("series "+ k + ".data.length="+ series[k].data.length); varlastTime = 0; if(series[k].data.length > 0) lastTime = series[k].data[series[k].data.length -1].x; if(point[0] > lastTime) series[k].addPoint([point[0],point[1]],true, isShift); lastTimes[serverIndex] = point[0]; } } }) }; loadData(); setInterval(loadData,60000); } } }, title: { text:'访问量实时监控' }, xAxis: [ { type:'datetime', tickPixelInterval:120 } ], yAxis: [ { title: { text:'总请求/分钟', style: { color:'#3E576F' } } }, { title: { text:'平均响应时间', style: { color:'#00AA00' } },opposite:true } ], plotOptions: { spline: { marker:{ enabled:false, states: { hover: { enabled:true, symbol:'circle', radius:5, lineWidth:1 } } } } }, tooltip: { formatter:function() { return'<b>' + this.series.name +'</b><br/>' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S',this.x) + '<br/>' + Highcharts.numberFormat(this.y,2); } }, legend: { enabled:true }, exporting: { enabled:false }, series: [ { name:'总请求数', data: [] }, { name:'错误请求数', data: [] }, { name:'平均响应时间', yAxis:1, data: [] } ] }); } })PS：附上原文链接：http://rfyiamcool.blog.51cto.com/1030776/1221175
0 0
- 图表highcharts联合jquery ajax 后端取数据前端图表渲染
- 图库highcharts联合jquery ajax 后端取数据前端图表渲染
- (jQuery,Highcharts)前端图表系列之一 --Highcharts
- Highcharts AJAX JSON JQuery 实现动态数据交互显示图表
- 前端 Highcharts图表,如何动态传入数据
- Highcharts 前端图表插件
- highcharts图表使用ajax调用数据
- Highcharts图表-ajax-获取json数据生成图表
- jquery图表插件highcharts
- JQuery图表控件Highcharts
- jQuery Highcharts 图表
- jquery 图表插件highcharts
- JQuery Highcharts图表控件
- Highcharts AJAX JSON JQuery 实现动态数据交互显示图表 柱形图
- Highcharts AJAX JSON JQuery 实现动态数据交互显示图表 柱形图
- Highcharts AJAX JSON JQuery 实现动态数据交互显示图表 柱形图
- Highcharts入门 前端图表显示
- JQuery Highcharts图表控件使用说明
- connect 是 errno 为111 115 101 22 错误分析
- JAVA 判断TXT文件编码格式
- Linux串口编程
- linux性能分析及调优
- HashSet源代码剖析
- 图表highcharts联合jquery ajax 后端取数据前端图表渲染
- Oracle编辑数据时提示：这些查询结果不可更新，请使用ROWI或者SELECT……FOR UPDATE获得可更新结果。
- android Repo 初识
- jQuery适用技巧笔记整合
- cocos2d-x IOS版本发布
- html parse
- 页眉页脚的制作 论文格式（奇偶页眉不同，页码连续）
- 【转】C++内存分区问题
- android驱动USB摄像头
