gpt4 book ai didi

diagram - 如何在 Grafana 中绘制网络图?

转载 作者:行者123 更新时间:2023-12-03 23:16:30 28 4
gpt4 key购买 nike

我想在 Grafana 中绘制网络图。

我的数据在一个两列的表中:一列是源节点的 id;另一列是指目标节点。例如。:

 +--------+--------+
| 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) 数据库加载。

直接从数据库加载网络数据应该做哪些修改?

最佳答案

现在有一个 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 ...)都是特定的 grafana 指标

关于diagram - 如何在 Grafana 中绘制网络图?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50033085/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com