使用参考: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
                    }
                }
            });
    });

效果: