如何在Grafana中绘制网络图?

时间:2018-04-26 00:26:12

标签: diagram grafana

我想在Grafana中绘制一个网络图。

我的数据位于两列的表中:一列用于源节点的id;另一列是指目标节点。 E.g:

 +--------+--------+
 | source | target |
 +--------+--------+
 | 00     | 21     |
 | 00     | 23     |
 | 00     | 28     |
 | 01     | 21     |
 | 02     | 21     |
 | 02     | 22     |
 | 02     | 23     |
 +--------+--------+

我希望有一个图表,其节点对应于表格中同一行的节点之间的列和行中的数字。

你有什么建议吗?

更新

我使用了文本面板,并使用visjs网络库添加了以下HTML代码。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css" rel="stylesheet" type="text/css" />


<style type="text/css">
    #mynetwork {
        height: 400px;
        border: 1px solid lightgray;
    }
</style>
<div id="mynetwork"></div>

<script type="text/javascript">
    // create an array with nodes
    var nodes = new vis.DataSet([
        {id: '00', label: '00', group: 'producers'},
        {id: '01', label: '01', group: 'producers'},
        {id: '02', label: '02', group: 'producers'},
        {id: '21', label: '21', group: 'consumers'},
        {id: '22', label: '22', group: 'consumers'},
        {id: '23', label: '23', group: 'consumers'},
        {id: '28', label: '28', group: 'consumers'}
    ]);

    // create an array with edges
    var edges = new vis.DataSet([
        {from: '00', to: '21'},
        {from: '00', to: '23'},
        {from: '00', to: '28'},
        {from: '01', to: '21'},
        {from: '02', to: '21'},
        {from: '02', to: '22'},
        {from: '02', to: '23'}
    ]);

    // create a network
    var container = document.getElementById('mynetwork');

    // provide the data in the vis format
    var data = {
        nodes: nodes,
        edges: edges
    };    

    var options = {
        nodes: {
            shape: 'dot',
            size: 20,
            font: {
                size: 20,
                  color: '#ffffff'
            },
            borderWidth: 2
        },
        edges: {
            width: 2
        },
        groups: {
            producers: {
                color: {background:'red',border:'orange'},
                shape: 'diamond'
            },
            consumers: {
                shape: 'dot',
                color: {background: 'cyan',border:'blue'}
            }
        }
    };


    // initialize your network!
    var network = new vis.Network(container, data, options);

输出如下:

Network Diagram

跟进问题:

我得到的数据被硬编码到HTML中,而不是从我的MariaDB(mysql)数据库加载。

我应该做哪些更改才能直接从数据库加载网络数据?

3 个答案:

答案 0 :(得分:1)

不幸的是,您的任务没有面板插件(官方或非正式) 以下是最接近候选人的简短列表,但没有一个是你想要的:

您还可以使用内置文本(html)面板+一些JS代码+图形库(例如visjs)或编写自己的插件。

答案 1 :(得分:0)

现在有一个用于grafana的图表插件:https://grafana.com/grafana/plugins/jdbranham-diagram-panel

您可以使用Mermaid JS语法绘制图表并将度量与图表的每个节点相关联。

在您的情况下,配置将如下所示:

00 --> 21
00 --> 23
00 --> 28
01 --> 21
02 --> 21
02 --> 22
02 --> 23

每个节点(002101 ...)是特定的格拉法纳度量标准

答案 2 :(得分:-1)

尝试Grafana流程图插件