为什么80%的码农都做不了架构师&＃xff1f;>>> 
第一次加载时从数据库中抽取监控数据&＃xff0c;JS生成昨天及上周同天的对比数据。 每分钟动态更新图表。
var bistock &＃61; bistock || {};
$(function () { var seriesOptions &＃61; [], // 历史对比曲线 0当前&＃xff0c;1昨天&＃xff0c;7上周periods &＃61; [0, 1, 7], impl, config,seriesCount &＃61; 0, charts &＃61; [],get_data_url &＃61; false,update_url &＃61; false;impl &＃61; { config_chart: function() {Highcharts.setOptions({ colors: [&＃39;#DDDF00&＃39;, &＃39;#058DC7&＃39;, &＃39;#50B432&＃39;, &＃39;#ED561B&＃39;, &＃39;#24CBE5&＃39;, &＃39;#64E572&＃39;, &＃39;#FF9655&＃39;, &＃39;#FFF263&＃39;, &＃39;#6AF9C4&＃39;],global: { useUTC: false } }); }, debug: function(msg, vars) {console.log(msg);if(vars) {$.each(vars, function(i, v) {console.log(i&＃43;&＃39;:&＃39;&＃43;v);});}},/*** 生成监控图表* &＃64;id 图表id* &＃64;div 图表渲染的div*/generate_chart: function(id, div) { var tmp_count &＃61; 0;$.ajax({type: "get",async: false,data: {menuid: id},url: get_data_url,dataType: "json",success: function (response) {$.each(response.rs, function (series_name, item) { // 添加历史对比数据 $.each(periods, function (j, period) { seriesOptions[seriesCount] &＃61; {name: impl.get_series_name(period) &＃43; series_name,data: (period &＃61;&＃61;&＃61; 0) ? item.data : impl.get_series_data(item.data, period),type: &＃39;spline&＃39;,lineWidth: (seriesCount &＃61;&＃61; 0 || seriesCount &＃61;&＃61; 3) ? 4 : 2};impl.debug("Series info: ", {&＃39;name&＃39;:seriesOptions[seriesCount][&＃39;name&＃39;], &＃39;number&＃39;: seriesCount});seriesCount&＃43;&＃43;;}); });impl.createChart(seriesOptions, div, id); seriesOptions &＃61; [];seriesCount &＃61; 0;},error: function(){alert(&＃39;Fail to render to chart &＃39;&＃43;id);}});},/*** 获取图表曲线的名称* &＃64;period 图表曲线周期0,1,7*/get_series_name: function (period) { return (period &＃61;&＃61; 0) ? &＃39;当天&＃39; : ((period &＃61;&＃61; 1) ? &＃39;昨天&＃39; : &＃39;上周同天&＃39;);},/*** 获取图表的数据* &＃64;data 原始数据* &＃64;period 图表曲线周期0,1,7*/get_series_data: function (data, period) { var new_series_data &＃61; [],time_offset &＃61; period * 86400 * 1000,now &＃61; (new Date()).getTime(); $.each(data, function (i, item) {// 删除某段时间的数据&＃xff0c;然后整体偏移.var point_data;if (item[0]&＃43;time_offset < now&＃43;8*3600*1000-600*1000) {new_series_data[i] &＃61; [item[0] &＃43; time_offset, item[1]];} }); return new_series_data;},/*** 动态更新图表 */updateChart: function(menuid) {setInterval(function() { $.ajax({url: update_url,type: &＃39;GET&＃39;,data: {menuid: menuid},async: false,contentType: "application/json; charset&＃61;utf-8",dataType: &＃39;JSON&＃39;,success: function(response) { if (!response.rs) {impl.debug(&＃39;No Data&＃39;); impl.debug("Chart Info: ",{&＃39;menuid&＃39;: menuid, &＃39;time&＃39;: response.happen_time});return;}impl.debug("Chart Info: ",{&＃39;menuid&＃39;: menuid, &＃39;time&＃39;: response.happen_time}); var updateCount &＃61; 0; $.each(response.data, function(i, items){$.each(items, function(j, item) { impl.debug("Series info: ", {&＃39;data&＃39;: item, &＃39;number&＃39;: updateCount});charts[menuid].series[updateCount].addPoint(item, true, true); updateCount&＃43;&＃43;; });});updateCount &＃61; 0;},cache: false}); }, 60000); },/*** 从缓存中读取历史数据* &＃64;id menuid* &＃64;period 1,7* &＃64;num 数据序列 0,1,2...* &＃64;size 曲线的大小* &＃64;time 当期时间* &＃64;return 返回一个点的数据*/get_history_point: function(id, period, num, size, time) { var idx &＃61; (size &＃61;&＃61; 1) ? 0 : num;var tmp_size &＃61; cacheData[id][idx].length;// fix the timevar tmp_point_data &＃61; cacheData[id][idx][tmp_size-period*144&＃43;1][1]; return [time, tmp_point_data];},rand_point: function(max) {var x &＃61; (new Date()).getTime(), // current timey &＃61; Math.round(Math.random() * max);return [x,y];},/*** 创建图表* &＃64;seriesData 图表数据* &＃64;div 渲染到div* &＃64;id 图表的唯一id */createChart: function (seriesData,div,id) {charts[id] &＃61; new Highcharts.StockChart({chart: { animation: Highcharts.svg, marginRight: 10,renderTo: div,events: {load: impl.updateChart(id)}}, colors: (config[&＃39;colors&＃39;]) ? config[&＃39;colors&＃39;] : [&＃39;#AA4643&＃39;,&＃39;#4572A7&＃39;,&＃39;#89A54E&＃39;,&＃39;#80699B&＃39;,&＃39;#3D96AE&＃39;,&＃39;#DB843D&＃39;,&＃39;#92A8CD&＃39;,&＃39;#A47D7C&＃39;,&＃39;#B5CA92&＃39;],rangeSelector: {buttons: [{count: 1,type: &＃39;hour&＃39;,text: &＃39;1h&＃39;},{count: 8,type: &＃39;hour&＃39;,text: &＃39;8h&＃39;}, {count: 1,type: &＃39;day&＃39;,text: &＃39;1d&＃39;}, {count: 1,type: &＃39;week&＃39;,text: &＃39;1w&＃39;},{count: 1,type: &＃39;month&＃39;,text: &＃39;1m&＃39;},{count: 3,type: &＃39;month&＃39;,text: &＃39;3m&＃39;},{type: &＃39;all&＃39;,text: &＃39;All&＃39;}],inputEnabled: false,selected: 1},legend: {borderWidth: 0,enabled: true},yAxis: { min: 0,plotLines: [{value: 0,width: 2,color: &＃39;silver&＃39;}],labels: {enabled: config[&＃39;isEnabled&＃39;] }},plotOptions: {series: {//compare: &＃39;percent&＃39;}},tooltip: {pointFormat: config[&＃39;isEnabled&＃39;] ? &＃39;
});
京公网安备 11010802041100号