RabbitMQ监控（5）——OpenCharts展示

最新推荐文章于 2024-07-06 16:42:11 发布

ESOO

最新推荐文章于 2024-07-06 16:42:11 发布

阅读量2.5k

点赞数 2

分类专栏： RabbitMQ 架构大数据云计算 OpenCharts RabbitMQ监控文章标签：图形软件 RabbitMQ 用户体验优化

本文链接：https://blog.csdn.net/xvshu/article/details/50962724

版权

架构同时被 3 个专栏收录

66 篇文章 3 订阅

订阅专栏

大数据

36 篇文章 1 订阅

订阅专栏

云计算

15 篇文章 0 订阅

订阅专栏

有了前几篇博客的基础，我们可以从容应对监控的实现，但是还有一个问题，我们没有解决，就是图形化展示监控结果，在网页上画图，我们的确有很多种方案，以前我们使用过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>