Highcharts是一个制作图表的纯Javascript类库，主要特性如下：

  • 兼容性：兼容当今所有的浏览器，包括iPhone、IE和火狐等等；

  • 对个人用户完全免费；

  • 纯JS，无BS；

  • 支持大部分的图表类型：直线图，曲线图、区域图、区域曲线图、柱状图、饼装图、散布图；

  • 跨语言：不管是PHP、Asp.net还是Java都可以使用，它只需要三个文件：一个是Highcharts的核心文件highcharts.js，还有a canvas emulator for IE和Jquery类库或者MooTools类库；

  • 提示功能：鼠标移动到图表的某一点上有提示信息；

  • 放大功能：选中图表部分放大，近距离观察图表；

  • 易用性：无需要特殊的开发技能，只需要设置一下选项就可以制作适合自己的图表；

  • 时间轴：可以精确到毫秒；

第一个例子：

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

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

  1. $(function () {
  2.     $(document).ready(function () {
  3.  
  4.         ////////
  5.         // Mysql Questions
  6.         ////////
  7.         var mysqlQuestionsOptions = {
  8.             chart: {
  9.                 renderTo: 'mysql-questions-container',
  10.                 type: 'spline'
  11.             },
  12.             title: {
  13.                 text: '',
  14.                 x: -20 //center
  15.             },
  16.             xAxis: {
  17.                 type: 'datetime'
  18.             },
  19.             yAxis: {
  20.                 title: {
  21.                     text: 'per second'
  22.                 }, min: 0
  23.             },
  24.             series: [{
  25.                 name: 'Select'
  26.             },{
  27.                 name: 'Insert'
  28.             },{
  29.                 name: 'Replace'
  30.             },{
  31.                 name: 'Update'
  32.             },{
  33.                 name: 'Delete'
  34.             }]
  35.         };
  36.  
  37.         $.ajax({
  38.             url: 'stats/mysql/questions',
  39.             dataType: "json",
  40.             success: function (data) {
  41.                 //init series arays
  42.                 select_arr = [];
  43.                 insert_arr = [];
  44.                 replace_arr = [];
  45.                 update_arr = [];
  46.                 delete_arr =[];
  47.                 for (i in data) {
  48.                     //build
  49.                     var r = data[i];
  50.                     select_arr.push([r.ts, r.Select_per_second]);
  51.                     insert_arr.push([r.ts, r.Insert_per_second]);
  52.                     replace_arr.push([r.ts, r.Replace_per_second]);
  53.                     update_arr.push([r.ts, r.Update_per_second]);
  54.                     delete_arr.push([r.ts, r.Delete_per_second]);
  55.                 }
  56.                 //save series
  57.                 mysqlQuestionsOptions.series[0].data = select_arr;
  58.                 mysqlQuestionsOptions.series[1].data = insert_arr;
  59.                 mysqlQuestionsOptions.series[2].data = replace_arr;
  60.                 mysqlQuestionsOptions.series[3].data = update_arr;
  61.                 mysqlQuestionsOptions.series[4].data = delete_arr;
  62.  
  63.                 var chart = new Highcharts.Chart(mysqlQuestionsOptions);
  64.             },
  65.             cache: false
  66.         });
  67.  
  68.         ////////
  69.         // Mysql Select Sort
  70.         ////////
  71.         var mysqlSelectSortOptions = {
  72.             chart: {
  73.                 renderTo: 'mysql-select-sort-container',
  74.                 type: 'spline'
  75.             },
  76.             title: {
  77.                 text: '',
  78.                 x: -20 //center
  79.             },
  80.             xAxis: {
  81.                 type: 'datetime'
  82.             },
  83.             yAxis: {
  84.                 title: {
  85.                     text: 'per second'
  86.                 }, min: 0
  87.             },
  88.             series: [{
  89.                 name: 'Select Scan'
  90.             },{
  91.                 name: 'Select Range'
  92.             },{
  93.                 name: 'Select Full Join'
  94.             },{
  95.                 name: 'Select Range Check'
  96.             },{
  97.                 name: 'Select Full Range Join'
  98.             },{
  99.                 name: 'Sort Scan'
  100.             },{
  101.                 name: 'Sort Range'
  102.             },{
  103.                 name: 'Sort Merge Passes'
  104.             }]
  105.         };
  106.  
  107.         $.ajax({
  108.             url: 'stats/mysql/select_sort',
  109.             dataType: "json",
  110.             success: function (data) {
  111.                 //init series arays
  112.                 select_scan_arr = [];
  113.                 select_range_arr = [];
  114.                 select_full_join_arr = [];
  115.                 select_range_check_arr = [];
  116.                 select_full_range_join_arr =[];
  117.                 sort_scan_arr =[];
  118.                 sort_range_arr =[];
  119.                 sort_merge_passes_arr =[];
  120.                 for (i in data) {
  121.                     //build
  122.                     var r = data[i];
  123.                     select_scan_arr.push([r.ts, r.Select_scan_per_sec]);
  124.                     select_range_arr.push([r.ts, r.Select_range_per_sec]);
  125.                     select_full_join_arr.push([r.ts, r.Select_full_join_per_sec]);
  126.                     select_range_check_arr.push([r.ts, r.Select_range_check_per_sec]);
  127.                     select_full_range_join_arr.push([r.ts, r.Select_full_range_join_per_sec]);
  128.                     sort_scan_arr.push([r.ts, r.Sort_scan_per_sec]);
  129.                     sort_range_arr.push([r.ts, r.Sort_range_per_sec]);
  130.                     sort_merge_passes_arr.push([r.ts, r.Sort_merge_passes_per_sec]);
  131.  
  132.                 }
  133.                 //save series
  134.                 mysqlSelectSortOptions.series[0].data = select_scan_arr;
  135.                 mysqlSelectSortOptions.series[1].data = select_range_arr;
  136.                 mysqlSelectSortOptions.series[2].data = select_full_join_arr;
  137.                 mysqlSelectSortOptions.series[3].data = select_range_check_arr;
  138.                 mysqlSelectSortOptions.series[4].data = select_full_range_join_arr;
  139.                 mysqlSelectSortOptions.series[5].data = sort_scan_arr;
  140.                 mysqlSelectSortOptions.series[6].data = sort_range_arr;
  141.                 mysqlSelectSortOptions.series[7].data = sort_merge_passes_arr;
  142.  
  143.                 var chart = new Highcharts.Chart(mysqlSelectSortOptions);
  144.             },
  145.             cache: false
  146.         });
  147.  
  148.         ////////
  149.         // Mysql Connections
  150.         ////////
  151.         var mysqlConnectionsOptions = {
  152.             chart: {
  153.                 renderTo: 'mysql-connections-container',
  154.                 type: 'spline'
  155.             },
  156.             title: {
  157.                 text: '',
  158.                 x: -20 //center
  159.             },
  160.             xAxis: {
  161.                 type: 'datetime'
  162.             },
  163.             yAxis: [{
  164.                 title: {
  165.                     text: 'per second'
  166.                 }, min: 0
  167.             },{
  168.                 title: {
  169.                     text: 'count'
  170.                 }, min: 0,
  171.                 opposite: true
  172.             }],
  173.             series: [{
  174.                 name: 'Max Connections',
  175.                 yAxis : 1, type: 'area'
  176.             },{
  177.                 name: 'Max Used Connections',
  178.                 yAxis : 1,  type: 'area'
  179.             },{
  180.                 name: 'Process Count',
  181.                 yAxis : 1,  type: 'area'
  182.             },{
  183.                 name: 'Running Process Count',
  184.                 yAxis : 1
  185.             },{
  186.                 name: 'Connection Rate',
  187.                 yAxis : 0
  188.             },{
  189.                 name: 'Aborted connects Rate',
  190.                 yAxis : 0
  191.             },{
  192.                 name: 'Aborted clients Rate',
  193.                 yAxis : 0
  194.             }]
  195.         };
  196.  
  197.         $.ajax({
  198.             url: 'stats/mysql/connections',
  199.             dataType: "json",
  200.             success: function (data) {
  201.                 //init series arays
  202.                 connections_arr = [];
  203.                 aborted_connects_arr = [];
  204.                 aborted_clients_arr = [];
  205.                 max_used_connections_arr = [];
  206.                 max_connections_arr =[];
  207.                 process_count_arr = [];
  208.                 running_process_count_arr =[];
  209.                 for (i in data) {
  210.                     //build
  211.                     var r = data[i];
  212.                     connections_arr.push([r.ts, r.Connections_per_second]);
  213.                     aborted_connects_arr.push([r.ts, r.Aborted_connects_per_second]);
  214.                     aborted_clients_arr.push([r.ts, r.Aborted_clients_per_second]);
  215.                     max_used_connections_arr.push([r.ts, r.max_used_connections]);
  216.                     max_connections_arr.push([r.ts, r.max_connections]);
  217.                     process_count_arr.push([r.ts, r.process_count]);
  218.                     running_process_count_arr.push([r.ts, r.process_count_non_sleep]);
  219.                 }
  220.                 //save series
  221.                 mysqlConnectionsOptions.series[4].data = connections_arr;
  222.                 mysqlConnectionsOptions.series[5].data = aborted_connects_arr;
  223.                 mysqlConnectionsOptions.series[6].data = aborted_clients_arr;
  224.                 mysqlConnectionsOptions.series[0].data = max_connections_arr;
  225.                 mysqlConnectionsOptions.series[1].data = max_used_connections_arr;
  226.                 mysqlConnectionsOptions.series[2].data = process_count_arr;
  227.                 mysqlConnectionsOptions.series[3].data = running_process_count_arr;
  228.  
  229.                 var chart = new Highcharts.Chart(mysqlConnectionsOptions);
  230.             },
  231.             cache: false
  232.         });
  233.  
  234.         ////////
  235.         // Mysql Bytes
  236.         ////////
  237.         var mysqlBytesOptions = {
  238.             chart: {
  239.                 renderTo: 'mysql-bytes-container',
  240.                 type: 'spline'
  241.             },
  242.             title: {
  243.                 text: '',
  244.                 x: -20 //center
  245.             },
  246.             xAxis: {
  247.                 type: 'datetime'
  248.             },
  249.             yAxis: {
  250.                 title: {
  251.                     text: 'kBps'
  252.                 }, min: 0
  253.             },
  254.             series: [{
  255.                 name: 'Sent'
  256.             },{
  257.                 name: 'Recieved'
  258.             }]
  259.         };
  260.  
  261.         $.ajax({
  262.             url: 'stats/mysql/bytes',
  263.             dataType: "json",
  264.             success: function (data) {
  265.                 //init series arays
  266.                 sent = [];
  267.                 recieved =[];
  268.                 for (i in data) {
  269.                     //build
  270.                     var r = data[i];
  271.                     sent.push([r.ts, r.kBps_sent]);
  272.                     recieved.push([r.ts, r.kBps_recieved]);
  273.                 }
  274.                 //save series
  275.                 mysqlBytesOptions.series[0].data = sent;
  276.                 mysqlBytesOptions.series[1].data = recieved;
  277.                 var chart = new Highcharts.Chart(mysqlBytesOptions);
  278.             },
  279.             cache: false
  280.         });
  281.  
  282.         ////////
  283.         // Mysql Temp
  284.         ////////
  285.         var mysqlTempOptions = {
  286.             chart: {
  287.                 renderTo: 'mysql-temp-container',
  288.                 type: 'spline'
  289.             },
  290.             title: {
  291.                 text: '',
  292.                 x: -20 //center
  293.             },
  294.             xAxis: {
  295.                 type: 'datetime'
  296.             },
  297.             yAxis: {
  298.                 title: {
  299.                     text: 'per minute'
  300.                 }, min: 0
  301.             },
  302.             series: [{
  303.                 name: 'Created Tmp Disk Tables'
  304.             },{
  305.                 name: 'Created Tmp Tables'
  306.             },{
  307.                 name: 'Created Tmp Files'
  308.             }]
  309.         };
  310.  
  311.         $.ajax({
  312.             url: 'stats/mysql/temp',
  313.             dataType: "json",
  314.             success: function (data) {
  315.                 //init series arays
  316.                 tmp_disk_tables = [];
  317.                 tmp_tables = [];
  318.                 tmp_files = [];
  319.                 for (i in data) {
  320.                     //build
  321.                     var r = data[i];
  322.                     tmp_disk_tables.push([r.ts, r.Created_tmp_disk_tables_per_min]);
  323.                     tmp_tables.push([r.ts, r.Created_tmp_tables_per_min]);
  324.                     tmp_files.push([r.ts, r.Created_tmp_files_per_min]);
  325.  
  326.                 }
  327.                 //save series
  328.                 mysqlTempOptions.series[0].data = tmp_disk_tables;
  329.                 mysqlTempOptions.series[1].data = tmp_tables;
  330.                 mysqlTempOptions.series[2].data = tmp_files;
  331.                 var chart = new Highcharts.Chart(mysqlTempOptions);
  332.             },
  333.             cache: false
  334.         });
  335.  
  336.         ////////
  337.         // Mysql Table Locks
  338.         ////////
  339.         var mysqlTableLocksOptions = {
  340.             chart: {
  341.                 renderTo: 'mysql-table-locks-container',
  342.                 type: 'spline'
  343.             },
  344.             title: {
  345.                 text: '',
  346.                 x: -20 //center
  347.             },
  348.             xAxis: {
  349.                 type: 'datetime'
  350.             },
  351.             yAxis: {
  352.                 title: {
  353.                     text: 'per second'
  354.                 }, min: 0
  355.             },
  356.             series: [{
  357.                 name: 'Table locks wait'
  358.             },{
  359.                 name: 'Table locks immediate'
  360.             }]
  361.         };
  362.  
  363.         $.ajax({
  364.             url: 'stats/mysql/table_locks',
  365.             dataType: "json",
  366.             success: function (data) {
  367.                 //init series arays
  368.                 wait = [];
  369.                 immediate = [];
  370.                 for (i in data) {
  371.                     //build
  372.                     var r = data[i];
  373.                     wait.push([r.ts, r.Table_locks_wait_per_sec]);
  374.                     immediate.push([r.ts, r.Table_locks_immediate_per_sec]);
  375.                 }
  376.                 //save series
  377.                 mysqlTableLocksOptions.series[0].data = wait;
  378.                 mysqlTableLocksOptions.series[1].data = immediate;
  379.                 var chart = new Highcharts.Chart(mysqlTableLocksOptions);
  380.             },
  381.             cache: false
  382.         });
  383.  
  384.         ////////
  385.         // Mysql Innodb Buffer Pool Usage
  386.         ////////
  387.         var mysqlInnoDBBPOptions = {
  388.             chart: {
  389.                 renderTo: 'mysql-innodb-bp-container',
  390.                 type: 'area'
  391.             },
  392.             title: {
  393.                 text: 'Buffer Pool Usage',
  394.                 x: -20 //center
  395.             },
  396.             xAxis: {
  397.                 type: 'datetime'
  398.             },
  399.             yAxis: [{
  400.                 title: {
  401.                     text: 'MBytes'
  402.                 }, min: 0
  403.             },{
  404.              title: {
  405.                     text: 'Hit Rate %'
  406.                 }, min: 0,  max: 100, opposite: true
  407.             }],
  408.             series: [{
  409.                 name: 'Buffer Pool Total'
  410.             },{
  411.                 name: 'Buffer Pool Used'
  412.             },{
  413.                 name: 'Read Hit Rate', type: 'spline', yAxis: 1
  414.             }]
  415.         };
  416.  
  417.         ////////
  418.         // Mysql Innodb
  419.         ////////
  420.         var mysqlInnoDBOptions = {
  421.             chart: {
  422.                 renderTo: 'mysql-innodb-container',
  423.                 type: 'spline'
  424.             },
  425.             title: {
  426.                 text: 'InnoDB Stats',
  427.                 x: -20 //center
  428.             },
  429.             xAxis: {
  430.                 type: 'datetime'
  431.             },
  432.             yAxis: {
  433.                 title: {
  434.                     text: 'per second'
  435.                 }, min: 0
  436.             },
  437.             series: [{
  438.                 name: 'Buffer Pool Read Request'
  439.             },{
  440.                 name: 'Buffer Pool Reads'
  441.             },{
  442.                 name: 'Buffer Pool Read Ahead Rnd'
  443.             },{
  444.                 name: 'Buffer Pool Read Ahead Seq'
  445.             },{
  446.                 name: 'Buffer Pool Write Request'
  447.             },{
  448.                 name: 'Buffer Pool Pages Flushed'
  449.             },{
  450.                 name: 'Buffer Pool Wait Free'
  451.             },{
  452.                 name: 'Row Lock Waits'
  453.             },{
  454.                 name: 'Data Reads'
  455.             },{
  456.                 name: 'Data Writes'
  457.             },{
  458.                 name: 'Data Fsyncs'
  459.             },{
  460.                 name: 'Pages Created'
  461.             },{
  462.                 name: 'Pages Read'
  463.             },{
  464.                 name: 'Pages Written'
  465.             },{
  466.                 name: 'Rows Deleted'
  467.             },{
  468.                 name: 'Rows Inserted'
  469.             },{
  470.                 name: 'Rows Read'
  471.             },{
  472.                 name: 'Rows Updated'
  473.             }]
  474.         };
  475.  
  476.         $.ajax({
  477.             url: 'stats/mysql/innodb',
  478.             dataType: "json",
  479.             success: function (data) {
  480.                 //init series arays
  481.                 bp_used = [];
  482.                 bp_total = [];
  483.                 bp_read_ratio = [];
  484.                 bp_read_requests = [];
  485.                 bp_reads = []
  486.                 bp_read_rnd = [];
  487.                 bp_read_seq = [];
  488.                 bp_write_req = [];
  489.                 bp_pages_flush = [];
  490.                 bp_wait_free = [];
  491.                 row_lock_waits = [];
  492.                 data_reads = [];
  493.                 data_write = [];
  494.                 data_fsyncs = [];
  495.                 pages_created = [];
  496.                 pages_read = [];
  497.                 pages_written = [];
  498.                 rows_deleted = [];
  499.                 rows_inserted = [];
  500.                 rows_read = [];
  501.                 rows_updated = [];
  502.                 for (i in data) {
  503.                     //build
  504.                     var r = data[i];
  505.                     bp_used.push([r.ts, r.Innodb_buffer_pool_used_mb]);
  506.                     bp_total.push([r.ts, r.Innodb_buffer_pool_total_mb]);
  507.                     bp_read_ratio.push([r.ts, r.Innodb_buffer_pool_read_ratio]);
  508.                     bp_read_requests.push([r.ts, r.Innodb_buffer_pool_read_requests_per_second]);
  509.                     bp_reads.push([r.ts, r.Innodb_buffer_pool_reads_per_second]);
  510.                     bp_read_rnd.push([r.ts, r.Innodb_buffer_pool_read_ahead_rnd_per_second]);
  511.                     bp_read_seq.push([r.ts, r.Innodb_buffer_pool_read_ahead_seq_per_second]);
  512.                     bp_write_req.push([r.ts, r.Innodb_buffer_pool_write_requests_per_second]);
  513.                     bp_pages_flush.push([r.ts, r.Innodb_buffer_pool_pages_flushed_per_second]);
  514.                     bp_wait_free.push([r.ts, r.Innodb_buffer_pool_wait_free_per_second]);
  515.                     row_lock_waits.push([r.ts, r.Innodb_row_lock_waits_per_second]);
  516.                     data_reads.push([r.ts, r.Innodb_data_reads_per_second]);
  517.                     data_write.push([r.ts, r.Innodb_data_writes_per_second]);
  518.                     data_fsyncs.push([r.ts, r.Innodb_data_fsyncs_per_second]);
  519.                     pages_created.push([r.ts, r.Innodb_pages_created_per_second]);
  520.                     pages_read.push([r.ts, r.Innodb_pages_read_per_second]);
  521.                     pages_written.push([r.ts, r.Innodb_pages_written_per_second]);
  522.                     rows_deleted.push([r.ts, r.Innodb_rows_deleted_per_second]);
  523.                     rows_inserted.push([r.ts, r.Innodb_rows_inserted_per_second]);
  524.                     rows_read.push([r.ts, r.Innodb_rows_read_per_second]);
  525.                     rows_updated.push([r.ts, r.Innodb_rows_updated_per_second]);
  526.  
  527.                 }
  528.                 //save series
  529.                 mysqlInnoDBBPOptions.series[1].data = bp_used;
  530.                 mysqlInnoDBBPOptions.series[0].data = bp_total;
  531.                 mysqlInnoDBBPOptions.series[2].data =  bp_read_ratio;
  532.  
  533.                 mysqlInnoDBOptions.series[0].data = bp_read_requests;
  534.                 mysqlInnoDBOptions.series[1].data = bp_reads;
  535.                 mysqlInnoDBOptions.series[2].data = bp_read_rnd;
  536.                 mysqlInnoDBOptions.series[3].data = bp_read_seq;
  537.                 mysqlInnoDBOptions.series[4].data = bp_write_req;
  538.                 mysqlInnoDBOptions.series[5].data = bp_pages_flush;
  539.                 mysqlInnoDBOptions.series[6].data = bp_wait_free;
  540.                 mysqlInnoDBOptions.series[7].data = row_lock_waits;
  541.                 mysqlInnoDBOptions.series[8].data = data_reads;
  542.                 mysqlInnoDBOptions.series[9].data = data_write;
  543.                 mysqlInnoDBOptions.series[10].data = data_fsyncs;
  544.                 mysqlInnoDBOptions.series[11].data = pages_created;
  545.                 mysqlInnoDBOptions.series[12].data = pages_read;
  546.                 mysqlInnoDBOptions.series[13].data = pages_written;
  547.                 mysqlInnoDBOptions.series[14].data = rows_deleted;
  548.                 mysqlInnoDBOptions.series[15].data = rows_inserted;
  549.                 mysqlInnoDBOptions.series[16].data = rows_updated;
  550.  
  551.                 var chart = new Highcharts.Chart(mysqlInnoDBBPOptions);
  552.                 chart = new Highcharts.Chart(mysqlInnoDBOptions);
  553.             },
  554.             cache: false
  555.         });
  556.     });
  557. });
  558. $(document).scroll(function(){
  559.     // If has not activated (has no attribute "data-top"
  560.     if (!$('.subnav').attr('data-top')) {
  561.         // If already fixed, then do nothing
  562.         if ($('.subnav').hasClass('subnav-fixed')) return;
  563.         // Remember top position
  564.         var offset = $('.subnav').offset();
  565.         $('.subnav').attr('data-top', offset.top);
  566.     }
  567.     if ($('.subnav').attr('data-top') - $('.subnav').outerHeight() <= $(this).scrollTop())
  568.         $('.subnav').addClass('subnav-fixed');
  569.     else
  570.         $('.subnav').removeClass('subnav-fixed');
  571. });

第二个例子

这个和前面是一样的方式，这里做了多个引用，也就是可以画多条线路

这个图不是我这的，但下面的代码是行的通的，可以放到一个js里面引用，然后通过ajax传值过去，在前端进行数据的渲染。

  1. var charts = new Array();
  2.         var serverCount = 6;
  3.         var lastTimes = new Array();
  4.         var max = ${params.int("max")?:120};
  5.         $(document).ready(function() {
  6.             Highcharts.setOptions({
  7.                 global: {
  8.                     useUTC: false
  9.                 }
  10.             });
  11.             for (var i = 0; i < serverCount; i++) {
  12.                 charts[i] = new Highcharts.Chart({
  13.                     chart: {
  14.                         renderTo: 'container' + i,
  15.                         type: 'spline',
  16.                         events: {
  17.                             load: function() {
  18.                                 // set up the updating of the chart each second
  19.                                 var series = this.series;
  20.                                 var serverIndex = i;
  21.                                 lastTimes[serverIndex] = 0;
  22.                                 var loadData = function() {
  23.                                                                         $.getJSON("http://${request.serverName}:${request.serverPort}${request.contextPath}/toolkits/queryStatistics.gsp", {"lasTime":lastTimes[serverIndex],"proxy":true,"index":serverIndex,"max":max}, function(data) {
  24.                                         for (var k = 0; k < series.length; k++) {
  25.                                             for (var j = 0; j < data[k].length; j++) {
  26.                                                 var point = data[k][j];
  27.                                                 var isShift = series[k].data.length >= max;
  28.                                                 console.log("series " + k + ".data.length=" + series[k].data.length);
  29.                                                 var lastTime = 0;
  30.                                                 if (series[k].data.length > 0)
  31.                                                     lastTime = series[k].data[series[k].data.length - 1].x;
  32.                                                 if (point[0] > lastTime)
  33.                                                     series[k].addPoint([point[0],point[1]], true, isShift);
  34.                                                 lastTimes[serverIndex] = point[0];
  35.                                             }
  36.                                         }
  37.                                     })
  38.                                 };
  39.                                 loadData();
  40.                                 setInterval(loadData, 60000);
  41.                             }
  42.                         }
  43.                     },
  44.                     title: {
  45.                         text: '访问量实时监控'
  46.                     },
  47.                     xAxis: [
  48.                         {
  49.                             type: 'datetime',
  50.                             tickPixelInterval: 120
  51.                         }
  52.                     ],
  53.                     yAxis: [
  54.                         {
  55.                             title: {
  56.                                 text: '总请求/分钟',
  57.                                 style: {
  58.                                     color: '#3E576F'
  59.                                 }
  60.                             }
  61.                         },
  62.                         {
  63.                             title: {
  64.                                 text: '平均响应时间',
  65.                                 style: {
  66.                                     color: '#00AA00'
  67.                                 }
  68.                             },opposite:true
  69.                         }
  70.                     ],
  71.                     plotOptions: {
  72.                         spline: {
  73.                             marker:{
  74.                                 enabled: false,
  75.                                 states: {
  76.                                     hover: {
  77.                                         enabled: true,
  78.                                         symbol: 'circle',
  79.                                         radius: 5,
  80.                                         lineWidth: 1
  81.                                     }
  82.                                 }
  83.                             }
  84.                         }
  85.                     },
  86.                     tooltip: {
  87.                         formatter: function() {
  88.                             return '<b>' + this.series.name + '</b><br/>' +
  89.                                     Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
  90.                                     Highcharts.numberFormat(this.y, 2);
  91.                         }
  92.                     },
  93.                     legend: {
  94.                         enabled: true
  95.                     },
  96.                     exporting: {
  97.                         enabled: false
  98.                     },
  99.                     series: [
  100.                         {
  101.                             name: '总请求数',
  102.                             data: []
  103.                         },
  104.                         {
  105.                             name: '错误请求数',
  106.                             data: []
  107.                         },
  108.                         {
  109.                             name: '平均响应时间',
  110.                             yAxis:1,
  111.                             data: []
  112.                         }
  113.                     ]
  114.                 });
  115.             }
  116.         })
  1.  

highcharts联合jquery ajax 后端取数据的更多相关文章

  1. jquery ajax返回json数据进行前后台交互实例

    jquery ajax返回json数据进行前后台交互实例 利用jquery中的ajax提交数据然后由网站后台来根据我们提交的数据返回json格式的数据,下面我来演示一个实例. 先我们看演示代码 代码如 ...

  2. 练习 jquery+Ajax+Json 绑定数据 分类： asp.net 练习 jquery+Ajax+Json 绑定数据 分类： asp.net

    练习 jquery+Ajax+Json 绑定数据

  3. Jquery Ajax 提交json数据

    在MVC控制器(这里是TestController)下有一个CreateOrder的Action方法 [HttpPost] public ActionResult CreateOrder(List&l ...

  4. 使用jQuery AJAX读取二进制数据

    READING BINARY DATA USING JQUERY AJAX http://www.henryalgus.com/reading-binary-files-using-jquery-aj ...

  5. jQuery Ajax请求后台数据并在前台接收

    1.ajax基本语法 <script> $(function(){ $('#sub').click(function(){ var username=$('#username').val( ...

  6. Django + JQuery + ajax实时显示数据

    1 创建django项目 :Visualization and  APP :Demo >>django-admin startproject Visualization >>p ...

  7. ASP.NET使用EasyUI-DataGrid + ashx + JQuery Ajax：实现数据的增删查改，查询和分页！

    转自:http://www.cnblogs.com/lt-style/p/3457399.html 数据表: 学生表:学生编号.姓名.性别.班级编号.年龄 班级表:班级编号.班级名称 开发过程: 1. ...

  8. jQuery AJAX获取JSON数据解析多种方式示例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. jquery ajax获取后台数据后无法输出

    今天做ajax获取数据,再浏览器的debugger窗口也看到了数据 ajax代码 $('#userSearch').click(function(){ $.get("loadAllUsers ...

随机推荐

  1. ArrayList、LinkedList、Vector的区别

    Arraylist和Vector是采用数组方式存储数据,此数组元素数大于实际存储的数据以便增加插入元素,都允许直接序号索引元素,但是插入数据要涉及到数组元素移动等内存操作,所以插入数据慢,查找有下标, ...

  2. 用Keytool和OpenSSL生成和签发数字证书

    一)keytool生成私钥文件(.key)和签名请求文件(.csr),openssl签发数字证书      J2SDK在目录%JAVA_HOME%/bin提供了密钥库管理工具Keytool,用于管理密 ...

  3. Codeforces Round #354 (Div. 2) C. Vasya and String

    题目链接: http://codeforces.com/contest/676/problem/C 题解: 把连续的一段压缩成一个数,对新的数组求前缀和,用两个指针从左到右线性扫一遍. 一段值改变一部 ...

  4. SqlServer Split函数

    Create FUNCTION [dbo].[SplitToTable] ( @SplitString nvarchar(max), @Separator nvarchar(10)=' ' ) RET ...

  5. 【BZOJ】【1050】【HAOI2006】旅行comf

    枚举/暴力/Kruskal orz……我sb了……其实是sb题<_< 有一道题问的是最小极差生成树……(不记得是什么名字了,就是求最大边权与最小边权差最小的生成树)做法是枚举最小边,然后k ...

  6. 《深入浅出JavaScript》

    第一章JS入门 第二章数据和判定常用的转义序列\b 回退 \f换页 \n换行 \r回车 \t制表符 \'单引 \"双引 \\反斜乘除求余的优先级相同,从左向右执行string对象indexO ...

  7. Gitlab仓库规范实践建议

    记录一下Gitlab仓库实践信息: 仓库是指一个可以git clone的地址,用于存储某个服务,模块,子系统或某类辅助代码的地方 仓库的visibility level一般设置为Private(访问需 ...

  8. DevSecOps 简介（一）

    DevOps,或者说企业应用开发团队和系统运营团队的合作,已经成为一个时髦的 IT 话题.这一新的运营模式往往与敏捷式软件开发方法并举,同时还会利用云计算的可扩展性--这一切,都是为了使企业更加灵活, ...

  9. HDU 1548 A strange lift (Dijkstra)

    A strange lift http://acm.hdu.edu.cn/showproblem.php?pid=1548 Problem Description There is a strange ...

  10. 数据库（.udl）简单测试连接

    当我们烦于打开数据库进行连接的时候,我们可以用udl进行测试连接,并可以获得连接字符串. 1.新建一个txt文件,然后将后缀改成udl保存. 2.双击打开udl文件. 3.进行数据库连接测试. 4.用 ...