图表highcharts联合jquery ajax 后端取数据前端图表渲染

本文涉及的产品
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
云数据库 RDS MySQL,集群系列 2核4GB
推荐场景:
搭建个人博客
云数据库 RDS PostgreSQL,集群系列 2核4GB
简介:

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 设置图表区背景色 #FFFFFF
borderWidth 设置图表边框宽度 0
borderRadius 设置图表边框圆角角度 5
renderTo 图表放置的容器,一般在html中放置一个DIV,获取DIV的id属性值 null
defaultSeriesType 默认图表类型line, spline, area, areaspline, column, bar, pie , scatter 0
width 图表宽度,默认根据图表容器自适应宽度 null
height 图表高度,默认根据图表容器自适应高度 null
margin 设置图表与其他元素之间的间距,数组,如[0,0,0,0] [null]
plotBackgroundColor 主图表区背景色,即X轴与Y轴围成的区域的背景色 null
plotBorderColor 主图表区边框的颜色,即X轴与Y轴围成的区域的边框颜色 null
plotBorderWidth 主图表区边框的宽度 0
shadow 是否设置阴影,需要设置背景色backgroundColor。 false
reflow 是否自使用图表区域高度和宽度,如果没有设置width和height时,会自适应大小。 true
zoomType 拖动鼠标进行缩放,沿x轴或y轴进行缩放,可以设置为:'x','y','xy' ''
events 事件回调,支持addSeries方法,click方法,load方法,selection方法等的回调函数。

Color:颜色选项

Color颜色选项用于设置图表的颜色方案。

参数 描述 默认值
color 用于展示图表,折线/柱状/饼状等图的颜色,数组形式。 array

Highcharts已经默认提供了多种颜色方案,当要显示的图形多于颜色种类时,多出的图形会自动从第一种颜色方案开始选取。自定义颜色方案的方法:


Highcharts.setOptions({
   colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655',
'#FFF263', '#6AF9C4']
});

Title:标题选项

Title标题选项用于设置图表的标题相关属性。

参数 描述 默认值
text 标题文本内容。 Chart title
align 水平对齐方式。 center
verticalAlign 垂直对齐方式。 top
margin 标题与副标题之间或者主图表区间的间距。 15
floating 是否浮动,如果为true,则标题可以偏离主图表区,可配合x,y属性使用。 false
style 设置CSS样式。 {color: '#3E576F',
fontSize: '16px'}

Subtitle:副标题选项

副标题提供的属性选项与标题title大致相同,可参照上述标题选项,值得一提的是副标题的text选项默认为'',即空的,所以默认情况下副标题不显示。

xAxis:X轴选项

X轴选项用于设置图表X轴相关属性。

参数 描述 默认值
categories 设置X轴分类名称,数组,例如:categories: ['Apples', 'Bananas', 'Oranges'] []
title X轴名称,支持text、enabled、align、rotation、style等属性
labels 设置X轴各分类名称的样式style,格式formatter,角度rotation等。 array
max X轴最大值(categories为空时),如果为null,则最大值会根据X轴数据自动匹配一个最大值。 null
min X轴最小值(categories为空时),如果为null,则最小值会根据X轴数据自动匹配一个最小值。 array
gridLineColor 网格(竖线)颜色 #C0C0C0
gridLineWidth 网格(竖线)宽度 1
lineColor 基线颜色 #C0D0E0
lineWidth 基线宽度 0

yAxis: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 spline line

plotOptions:数据点选项

plotOptions用于设置图表中的数据点相关属性。plotOptions根据各种图表类型,其属性设置略微有些差异,现将常用选项列出来。

参数 描述 默认值
enabled 是否在数据点上直接显示数据 false
allowPointSelect 是否允许使用鼠标选中数据点 false
formatter 回调函数,格式化数据显示内容 formatter: function() {return this.y;}

Tooltip:数据点提示框

Tooltip用于设置当鼠标滑向数据点时显示的提示框信息。

参数 描述 默认值
enabled 是否显示提示框 true
backgroundColor 设置提示框的背景色 rgba(255, 255, 255, .85)
borderColor 提示框边框颜色,默认自动匹配数据列的颜色 auto
borderRadius 提示框圆角度 5
shadow 是否显示提示框阴影 true
style 设置提示框内容样式,如字体颜色等 color:'#333'
formatter 回调函数,用于格式化输出提示框的显示内容。返回的内容支持html标签如:<b>, <strong>, <i>, <em>, <br/>, <span> 2

Legend:图例选项

legend用于设置图例相关属性。

参数 描述 默认值
layout 显示形式,支持水平horizontal和垂直vertical horizontal
align 对齐方式。 center
backgroundColor 图例背景色。 null
borderColor 图例边框颜色。 #909090
borderRadius 图例边框角度 5
enabled 是否显示图例 true
floating 是否可以浮动,配合x,y属性。 false
shadow 是否显示阴影 false
style 设置图例内容样式 ''



第一个例子:


这个是从后端api取值,后端再从数据库里取值。

为了不让整个页面刷新,用了ajax做局部刷新


133955415.png


134739773.png


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
         ////////
         var  mysqlQuestionsOptions = {
             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
                     var  r = 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;
                                                                                                                                                                                                                                                                                          
                                                                                                                                                                                                                                                                                          
                 var  chart =  new  Highcharts.Chart(mysqlQuestionsOptions);
             },
             cache:  false
         });
                                                                                                                                                                                                                                                                                  
                                                                                                                                                                                                                                                                                  
         ////////
         // Mysql Select Sort
         ////////
         var  mysqlSelectSortOptions = {
             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
                     var  r = 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;
                                                                                                                                                                                                                                                                                      
                 var  chart =  new  Highcharts.Chart(mysqlSelectSortOptions);
             },
             cache:  false
         });
                                                                                                                                                                                                                                                                                  
                                                                                                                                                                                                                                                                                  
         ////////
         // Mysql Connections
         ////////
         var  mysqlConnectionsOptions = {
             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
                     var  r = 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;
                                                                                                                                                                                                                                                                                          
                 var  chart =  new  Highcharts.Chart(mysqlConnectionsOptions);
             },
             cache:  false
         });
                                                                                                                                                                                                                                                                                  
         ////////
         // Mysql Bytes
         ////////
         var  mysqlBytesOptions = {
             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
                     var  r = 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;
                 var  chart =  new  Highcharts.Chart(mysqlBytesOptions);
             },
             cache:  false
         });
                                                                                                                                                                                                                                                                                  
         ////////
         // Mysql Temp
         ////////
         var  mysqlTempOptions = {
             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
                     var  r = 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;
                 var  chart =  new  Highcharts.Chart(mysqlTempOptions);
             },
             cache:  false
         });
                                                                                                                                                                                                                                                                                  
         ////////
         // Mysql Table Locks
         ////////
         var  mysqlTableLocksOptions = {
             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
                     var  r = 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;
                 var  chart =  new  Highcharts.Chart(mysqlTableLocksOptions);
             },
             cache:  false
         });
                                                                                                                                                                                                                                                                                  
         ////////
         // Mysql Innodb Buffer Pool Usage
         ////////
         var  mysqlInnoDBBPOptions = {
             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
         ////////
         var  mysqlInnoDBOptions = {
             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
                     var  r = 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;
                                                                                                                                                                                                                                                                                          
                 var  chart =  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
         var  offset = $( '.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传值过去,在前端进行数据的渲染。


133858310.png



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 ();
         var  serverCount =  6 ;
         var  lastTimes =  new  Array ();
         var  max = ${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
                                 var  series =  this .series;
                                 var  serverIndex = i;
                                 lastTimes[serverIndex] =  0 ;
                                 var  loadData =  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++) {
                                                 var  point = data[k][j];
                                                 var  isShift = series[k].data.length >= max;
                                                 console.log( "series "  + k +  ".data.length="  + series[k].data.length);
                                                 var  lastTime =  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 );