使用参考:https://www.cnblogs.com/lwme/archive/2012/08/18/jquery-flot-plugin.html

下面是一个显示内存和存储空间使用率的折线统计图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!-- statistics chart built with jQuery Flot -->
<div class="row chart">
<div class="col-md-12">
<h4 class="clearfix">
MQ内存和空间使用
<div class="btn-group pull-right">
<!--<button class="glow left">日</button>
<button class="glow middle active">月</button>
<button class="glow right">年</button>-->
<select id="chartOpts" class="form-control">
<option value="">请选择</option>
<option th:each="t:${mqConfigs}" th:value="${t.serverIp}" th:text="${t.serverIp}"></option>
</select>
</div>
</h4>
</div>
<div class="col-md-12">
<div id="statsChart" style="height: 500px;"></div>
</div>
</div>
<!-- end statistics chart -->

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
// 切换服务器时,自动定时获取数据重绘
$('#chartOpts').on('change',function() {
var server = $(this).val();
if (server != '') {
if (timerId) {
clearInterval(timerId);
}
darwMqStatistics();
timerId = setInterval('darwMqStatistics()',60000);
}
});
var timerId;
// 鼠标移动到图表的点上时显示提示
function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css( {
position: 'absolute',
display: 'none',
top: y - 30,
left: x - 50,
color: "#fff",
padding: '2px 5px',
'border-radius': '6px',
'background-color': '#000',
opacity: 0.80
}).appendTo("body").fadeIn(200);
}
var previousPoint = null;
$("#statsChart").bind("plothover", function (event, pos, item) {
if (item) {
if (previousPoint != item.dataIndex) {
previousPoint = item.dataIndex;
$("#tooltip").remove();
var x = item.datapoint[0].toFixed(0),
y = item.datapoint[1].toFixed(0);
var xLabel = item.series.xaxis.ticks[item.dataIndex].label;
showTooltip(item.pageX, item.pageY,
item.series.label + ": " + y + "%");
}
}
else {
$("#tooltip").remove();
previousPoint = null;
}
});
function darwMqStatistics() {
var serverIp = $('#chartOpts').val();
$.get(CTX+'/mqMonitor/getStatisticsData',{serverIp:serverIp},function(r) {
var storeUsed = r.data.storeUsed;
var memoryUsed = r.data.memoryUsed;
var xLabel = r.data.xLabel;
console.log(storeUsed);
console.log(memoryUsed);
console.log(xLabel);
// jQuery Flot Chart
var plot = $.plot($("#statsChart"),
[ { data: storeUsed, label: "存储空间使用百分比"},
{ data: memoryUsed, label: "内存使用百分比" }], {
series: {
lines: { show: true,
lineWidth: 1,
fill: true,
fillColor: { colors: [ { opacity: 0.1 }, { opacity: 0.13 } ] }
},
points: { show: true,
lineWidth: 2,
radius: 3
},
shadowSize: 0,
stack: false /*如果有多条线要设置成false,否则最上面显示的那条线是下面所有线的value的和*/
},
grid: { hoverable: true,
clickable: true,
tickColor: "#f9f9f9",
borderWidth: 0
},
legend: {
show: true,
labelBoxBorderColor: "#fff"
},
colors: ["#a7b5c5", "#30a0eb"],
xaxis: {
ticks: xLabel,
font: {
size: 12,
family: "Open Sans, Arial",
variant: "small-caps",
color: "#697695"
}
},
yaxis: {
ticks:[[0,'0'],[10,'10%'],[20,'20%'],[30,'30%'],[40,'40%'],[50,'50%'],[60,'60%'],[70,'70%'],[80,'80%'],[90,'90%'],[100,'100%']],
font: {size:12, color: "#9da3a9"},
tickOptions: {
formatString: "'%.2f",
showMark: false
}
}
});
});

效果: