65 lines
13 KiB
HTML
65 lines
13 KiB
HTML
|
<include file="Public/header" title="公告管理 - 企业安全应急响应与缺陷管理中心" page_status="open" page_color="#6164C1;"/>
|
||
|
|
|
||
|
|
<div class="main-content">
|
||
|
|
<div class="page-title">
|
||
|
|
<div class="title">Flot</div>
|
||
|
|
<div class="sub-title">Flot chart plugin</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-sm-12">
|
||
|
|
<div class="card bg-white">
|
||
|
|
<div class="card-header">
|
||
|
|
Line series
|
||
|
|
</div>
|
||
|
|
<div class="card-block text-center">
|
||
|
|
<div class="chart line" style="height: 320px; padding: 0px; position: relative;"><canvas class="flot-base" width="993" height="320" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 993px; height: 320px;"></canvas><div class="flot-text" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; font-size: smaller; color: rgb(84, 84, 84);"><div class="flot-x-axis flot-x1-axis xAxis x1Axis" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;"><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 112px; top: 301px; left: 19px; text-align: center;">0.0</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 112px; top: 301px; left: 138px; text-align: center;">1.0</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 112px; top: 301px; left: 258px; text-align: center;">2.0</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 112px; top: 301px; left: 377px; text-align: center;">3.0</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 112px; top: 301px; left: 497px; text-align: center;">4.0</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 112px; top: 301px; left: 617px; text-align: center;">5.0</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 112px; top: 301px; left: 736px; text-align: center;">6.0</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 112px; top: 301px; left: 856px; text-align: center;">7.0</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 112px; top: 301px; left: 976px; text-align: center;">8.0</div></div><div class="flot-y-axis flot-y1-axis yAxis y1Axis" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;"><div class="flot-tick-label tickLabel" style="position: absolute; top: 287px; left: 15px; text-align: right;">0</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 239px; left: 8px; text-align: right;">20</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 191px; left: 8px; text-align: right;">40</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 144px; left: 8px; text-align: right;">60</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 96px; left: 8px; text-align: right;">80</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 48px; left: 1px; text-align: right;">100</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 0px; left: 1px; text-align: right;">120</div></div></div><canvas class="flot-overlay" width="993" height="320" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 993px; height: 320px;"></canvas></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-sm-6">
|
||
|
|
<div class="card bg-white">
|
||
|
|
<div class="card-header">
|
||
|
|
Grouped bar series
|
||
|
|
</div>
|
||
|
|
<div class="card-block text-center">
|
||
|
|
<div class="chart bar" style="height: 320px; padding: 0px; position: relative;"><canvas class="flot-base" width="470" height="320" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 470px; height: 320px;"></canvas><div class="flot-text" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; font-size: smaller; color: rgb(84, 84, 84);"><div class="flot-x-axis flot-x1-axis xAxis x1Axis" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;"><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 68px; top: 302px; left: 31px; text-align: center;">Feb</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 68px; top: 302px; left: 117px; text-align: center;">Mar</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 68px; top: 302px; left: 213px; text-align: center;">Apr</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 68px; top: 302px; left: 303px; text-align: center;">May</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 68px; top: 302px; left: 398px; text-align: center;">Jun</div></div><div class="flot-y-axis flot-y1-axis yAxis y1Axis" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;"><div class="flot-tick-label tickLabel" style="position: absolute; top: 285px; left: 14px; text-align: right;">0</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 228px; left: 7px; text-align: right;">20</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 171px; left: 7px; text-align: right;">40</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 114px; left: 7px; text-align: right;">60</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 57px; left: 7px; text-align: right;">80</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 0px; left: 0px; text-align: right;">100</div></div></div><canvas class="flot-overlay" width="470" height="320" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 470px; height: 320px;"></canvas></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-sm-6">
|
||
|
|
<div class="card bg-white">
|
||
|
|
<div class="card-header">
|
||
|
|
Pie series
|
||
|
|
</div>
|
||
|
|
<div class="card-block text-center">
|
||
|
|
<div class="chart pie" style="height: 320px; padding: 0px; position: relative;"><canvas class="flot-base" width="470" height="320" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 470px; height: 320px;"></canvas><canvas class="flot-overlay" width="470" height="320" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 470px; height: 320px;"></canvas><div class="legend"><div style="position: absolute; width: 60px; height: 90px; top: 5px; right: 5px; background-color: rgb(255, 255, 255); opacity: 0.85;"> </div><table style="position:absolute;top:5px;right:5px;;font-size:smaller;color:#545454"><tbody><tr><td class="legendColorBox"><div style="border:1px solid #ccc;padding:1px"><div style="width:4px;height:0;border:5px solid rgb(221, 103, 119);overflow:hidden"></div></div></td><td class="legendLabel">IE</td></tr><tr><td class="legendColorBox"><div style="border:1px solid #ccc;padding:1px"><div style="width:4px;height:0;border:5px solid rgb(110, 199, 230);overflow:hidden"></div></div></td><td class="legendLabel">Safari</td></tr><tr><td class="legendColorBox"><div style="border:1px solid #ccc;padding:1px"><div style="width:4px;height:0;border:5px solid rgb(242, 183, 118);overflow:hidden"></div></div></td><td class="legendLabel">Chrome</td></tr><tr><td class="legendColorBox"><div style="border:1px solid #ccc;padding:1px"><div style="width:4px;height:0;border:5px solid rgb(245, 245, 245);overflow:hidden"></div></div></td><td class="legendLabel">Opera</td></tr><tr><td class="legendColorBox"><div style="border:1px solid #ccc;padding:1px"><div style="width:4px;height:0;border:5px solid rgb(68, 66, 91);overflow:hidden"></div></div></td><td class="legendLabel">Firefox</td></tr></tbody></table></div></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-sm-12">
|
||
|
|
<div class="card bg-white">
|
||
|
|
<div class="card-header">
|
||
|
|
Realtime series
|
||
|
|
</div>
|
||
|
|
<div class="card-block text-center">
|
||
|
|
<div class="chart realtime" style="height: 320px; padding: 0px; position: relative;"><canvas class="flot-base" width="993" height="320" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 993px; height: 320px;"></canvas><div class="flot-text" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; font-size: smaller; color: rgb(84, 84, 84);"><div class="flot-x-axis flot-x1-axis xAxis x1Axis" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;"><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 144px; top: 302px; left: 23px; text-align: center;">0</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 144px; top: 302px; left: 179px; text-align: center;">50</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 144px; top: 302px; left: 335px; text-align: center;">100</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 144px; top: 302px; left: 495px; text-align: center;">150</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 144px; top: 302px; left: 655px; text-align: center;">200</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 144px; top: 302px; left: 815px; text-align: center;">250</div></div><div class="flot-y-axis flot-y1-axis yAxis y1Axis" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;"><div class="flot-tick-label tickLabel" style="position: absolute; top: 288px; left: 14px; text-align: right;">0</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 230px; left: 7px; text-align: right;">20</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 173px; left: 7px; text-align: right;">40</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 115px; left: 7px; text-align: right;">60</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 58px; left: 7px; text-align: right;">80</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 0px; left: 0px; text-align: right;">100</div></div></div><canvas class="flot-overlay" width="993" height="320" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 993px; height: 320px;"></canvas></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
(function($){var data=[],totalPoints=300,updateInterval=300,previousPoint=null,plot;var browserData=[{label:'IE',data:15,color:$.staticApp.danger},{label:'Safari',data:14,color:$.staticApp.info},{label:'Chrome',data:34,color:$.staticApp.warning},{label:'Opera',data:13,color:$.staticApp.bodyBg},{label:'Firefox',data:24,color:$.staticApp.dark}];var getRandomArbitrary=function(){return Math.round(Math.random()*100);};var visits=[[0,getRandomArbitrary()],[1,getRandomArbitrary()],[2,getRandomArbitrary()],[3,getRandomArbitrary()],[4,getRandomArbitrary()],[5,getRandomArbitrary()],[6,getRandomArbitrary()],[7,getRandomArbitrary()],[8,getRandomArbitrary()]];var visitors=[[0,getRandomArbitrary()],[1,getRandomArbitrary()],[2,getRandomArbitrary()],[3,getRandomArbitrary()],[4,getRandomArbitrary()],[5,getRandomArbitrary()],[6,getRandomArbitrary()],[7,getRandomArbitrary()],[8,getRandomArbitrary()]];var plotdata=[{data:visits,color:$.staticApp.primary},{data:visitors,color:$.staticApp.info}];var barData=[{data:[[1391761856000,80],[1394181056000,40],[1396859456000,20],[1399451456000,20],[1402129856000,50]],bars:{show:true,barWidth:7*24*60*60*1000,fill:true,lineWidth:0,order:1,fillColor:$.staticApp.info}},{data:[[1391761856000,50],[1394181056000,30],[1396859456000,10],[1399451456000,70],[1402129856000,30]],bars:{show:true,barWidth:7*24*60*60*1000,fill:true,lineWidth:0,order:2,fillColor:$.staticApp.danger}},{data:[[1391761856000,30],[1394181056000,60],[1396859456000,40],[1399451456000,40],[1402129856000,40]],bars:{show:true,barWidth:7*24*60*60*1000,fill:true,lineWidth:0,order:3,fillColor:$.staticApp.success}}];function getRandomData(){if(data.length>0){data=data.slice(1);}
|
||
|
|
while(data.length<totalPoints){var prev=data.length>0?data[data.length- 1]:50,y=prev+ Math.random()*10- 5;if(y<0){y=0;}else if(y>100){y=100;}
|
||
|
|
data.push(y);}
|
||
|
|
var res=[];for(var i=0;i<data.length;++i){res.push([i,data[i]]);}
|
||
|
|
return res;}
|
||
|
|
function showTooltip(x,y,contents){$('<div id=\'tooltip\'>'+ contents+'</div>').css({top:y- 10,left:x+ 20}).appendTo('body').fadeIn(200);}
|
||
|
|
function update(){plot.setData([getRandomData()]);plot.draw();setTimeout(update,updateInterval);}
|
||
|
|
$.plot($('.pie'),browserData,{series:{pie:{show:true,innerRadius:0.5,stroke:{width:0},label:{show:false,}}},legend:{show:true},});$.plot($('.bar'),barData,{grid:{hoverable:false,clickable:false,labelMargin:8,color:$.staticApp.border,borderWidth:0,},xaxis:{mode:'time',timeformat:'%b',tickSize:[1,'month'],monthNames:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],tickLength:0,axisLabel:'Month',axisLabelUseCanvas:true,axisLabelFontSizePixels:12,axisLabelFontFamily:'Roboto',axisLabelPadding:5}});plot=$.plot('.realtime',[getRandomData()],{colors:[$.staticApp.dark],lines:{lineWidth:1,},grid:{color:$.staticApp.border,borderWidth:0,hoverable:true},yaxis:{min:0,max:100}});$('.line').length&&$.plot($('.line'),plotdata,{series:{lines:{show:true,lineWidth:0,},splines:{show:true,tension:0.5,lineWidth:1,fill:0.2,},shadowSize:0},grid:{color:$.staticApp.border,borderWidth:1,hoverable:true,},});$('.chart, .chart-sm').bind('plothover',function(event,pos,item){if(item){if(previousPoint!==item.dataIndex){previousPoint=item.dataIndex;$('#tooltip').remove();var x=item.datapoint[0],y=item.datapoint[1];showTooltip(item.pageX,item.pageY,y+' at '+ x);}}else{$('#tooltip').remove();previousPoint=null;}});update();})(jQuery);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<include file="Public/footer" />
|