ITKeyword,专注技术干货聚合推荐

注册 | 登录

RabbitMQ监控(5)——OpenCharts展示

xvshu 分享于 2016-03-23

2018阿里云全部产品优惠券(新购或升级都可以使用,强烈推荐)
领取地址https://promotion.aliyun.com/ntms/act/ambassador/sharetouser.html?userCode=gh9qh5ki&utm_source=gh9qh5ki

有了前几篇博客的基础,我们可以从容应对监控的实现,但是还有一个问题,我们没有解决,就是图形化展示监控结果,在网页上画图,我们的确有很多种方案,以前我们使用过highcharts,但是学习还好,在公司使用不是很合适,我们需要一款,简单,易上手,的绘图插件,这里带领大家一起熟悉一款这样的软件,opencharts。 先看结果: 一,简介 OpenCharts是基于HTML Canvas技术的采用面向对象的Web图表,通过OpenCharts,你可以方便的制作一系列漂亮的Web图表。现在我们支持8种类型的图表表达方式,你可以通过帮助文档了解详细信息,也可以通过范例了解如何使用。 官方地址:https://github.com/pasu/OpenCharts 效果展示: 二,应用 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> 总结:

再次重申,“世上无难事,只怕有心人”,大家一路跟过来,没有特别困哪的地方,但是就是简单工具的组合,就完成了好像很牛的功能,真的是好像很牛,这里不得不感谢奋斗在开源第一线孜孜不倦的人们!这就是这个时代,更开发,共享成为主旋律,打开我们自己,就能和大家一起拥抱更好的未来!

        有了前几篇博客的基础,我们可以从容应对监控的实现,但是还有一个问题,我们没有解决,就是图形化展示监控结果,在网页上画图,我们的确有很多种方案,以前我们使用过highcharts,但是
在线网页数据采集器

相关阅读排行


用户评论

游客

在线网页数据采集器

相关内容推荐

vivo京东自营官方旗舰店

最新文章

×

×

请激活账号

为了能正常使用评论、编辑功能及以后陆续为用户提供的其他产品,请激活账号。

您的注册邮箱: 修改

重新发送激活邮件 进入我的邮箱

如果您没有收到激活邮件,请注意检查垃圾箱。