Я хотел бы нарисовать диаграмму сети в Графане.
Мои данные находятся в таблице из двух столбцов: один для идентификатора исходного узла;а другой столбец относится к целевому узлу.Например:
+--------+--------+
| source | target |
+--------+--------+
| 00 | 21 |
| 00 | 23 |
| 00 | 28 |
| 01 | 21 |
| 02 | 21 |
| 02 | 22 |
| 02 | 23 |
+--------+--------+
Мне бы хотелось иметь диаграмму с узлами, соответствующими номерам в обоих столбцах, и линиями между узлами, которые находятся в одной строке таблицы.
Doу вас есть предложения как это сделать?
ОБНОВЛЕНИЕ:
Я использовал текстовую панель и добавил следующий HTML-код, используя visjs сетевая библиотека.
<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);
Вывод выглядит следующим образом:
Контрольный вопрос:
Полученные данные жестко запрограммированы вHTML вместо загрузки из моей базы данных MariaDB (mysql).
Какие изменения я должен внести, чтобы загрузить сетевые данные из базы данных напрямую?