[置顶] RabbitMQ监控（5）——OpenCharts展示
有了前几篇博客的基础，我们可以从容应对监控的实现，但是还有一个问题，我们没有解决，就是图形化展示监控结果，在网页上画图，我们的确有很多种方案，以前我们使用过highcharts，但是学习还好，在公司使用不是很合适，我们需要一款，简单，易上手，的绘图插件，这里带领大家一起熟悉一款这样的软件，opencharts。
先看结果：
![[置顶] RabbitMQ监控（5）——OpenCharts展示_第1张图片](http://img.e-com-net.com/image/info5/d9bf99060d1e4164a26b7e59f86b3315.jpg)
一，简介
OpenCharts是基于HTML Canvas技术的采用面向对象的Web图表，通过OpenCharts，你可以方便的制作一系列漂亮的Web图表。现在我们支持8种类型的图表表达方式，你可以通过帮助文档了解详细信息,也可以通过范例了解如何使用。
官方地址：https://github.com/pasu/OpenCharts
效果展示：
![[置顶] RabbitMQ监控（5）——OpenCharts展示_第2张图片](http://img.e-com-net.com/image/info5/27f72ac30f8a491d98405fa13db1d4be.jpg)
二，应用
action代码：
/**
* Created by Administrator on 2015/5/9.
*/
public class RabbitMQAction extends BaseAction {
private IRabbitMenuService rabbitMenuService;
public String index() throws Exception {
String stringbid = request.getParameter("menId");
RabbitMenu rabbitMenu =rabbitMenuService.selectByPrimaryKey(Integer.valueOf(stringbid));
Result result = new Result(true);
result.addDefaultModel("bid",rabbitMenu.getDomainName());
toVm(result);
return "list";
}
public String getCharDate(){
String stringbid = request.getParameter("bid");
HashMap<String,String> hashMap=null;
String json = FileSaveMq.getDate();
if(json==null||json.trim().isEmpty()){
writeJson("");
}else{
hashMap = JSON.parseObject(json,HashMap.class);
}
if(hashMap!=null && hashMap.containsKey(stringbid)){
String values = hashMap.get(stringbid);
List<String> list = JSON.parseObject(values,List.class);
List<Long> listlong = new ArrayList<Long>();
for(String one:list){
listlong.add(Long.valueOf(one));
}
writeJson(listlong);
}else{
writeJson("");
}
return "list";
}
public IRabbitMenuService getRabbitMenuService() {
return rabbitMenuService;
}
public void setRabbitMenuService(IRabbitMenuService rabbitMenuService) {
this.rabbitMenuService = rabbitMenuService;
}
}
html代码：
<pre name="code" class="html"><!doctype html>
<html lang="en">
<head>
<script type="text/javascript" src="$!homeModule.getTarget("/common/js/opencharts/OpenCharts-min.js")"></script>
<link rel="stylesheet" type="text/css" href="$!homeModule.getTarget("/common/css/opencharts/style.css")">
<script>
var bid = $!bid;
var charts1;
$(function () {
reflashchar();
});
function reflashchar(){
$.post(' $!homeModule.getTarget('/rabbitmq/getCharDate.action')', { bid:bid }, function (result) {
if (result) {
logChar(result);
}
else {
$.messager.alert("提示信息", "加载失败");
}
}, 'json');
}
function logChar(result){
var items = [];
var style = new OpenCharts.Style();
style.fillStyle = "#4169E1";
var itemss = [];
for(var i=0;i<result.length;i++){
if(i==0){
itemss.push({strCaption : 1,data :result[i],itemStyle:'#D2691E'});
}else if((i+1)%10==0){
itemss.push(new OpenCharts.Item(result[i],i+1,'#D2691E'));
}else if(i==(result.length-1)){
itemss.push(new OpenCharts.Item(result[i],i+1,'#D2691E'));
}else{
itemss.push(new OpenCharts.Item(result[i],'','#D2691E'));
}
}
var message = "${itemName}${itemCaption}:[${itemData}]";
charts1 = new OpenCharts.Chart.AreaChart("canvas1");
charts1.strTitle = "RabbitMQ 监控记录";
charts1.addItems(itemss,"Queue");
charts1.addEventListener("mousedown",message);
charts1.render();
}
var int=self.setInterval("reflashchar()",60000)
</script>
</head>
<body>
<div style="">
<canvas id="canvas1" height="600px" width="1000px" />
</div>
</body>
</html>
总结：
再次重申，“世上无难事，只怕有心人”，大家一路跟过来，没有特别困哪的地方，但是就是简单工具的组合，就完成了好像很牛的功能，真的是好像很牛，这里不得不感谢奋斗在开源第一线孜孜不倦的人们！这就是这个时代，更开发，共享成为主旋律，打开我们自己，就能和大家一起拥抱更好的未来！