C#_串口调试助手-网络拓扑显示
先來個效果圖，鼠標放在上面也會顯示一些數據。
點擊刷新的時候其實是動態的，會旋轉一下，然后慢慢停停下來，使用js文件和html文件配合實現效果。
需要的是jequery-1.10.2.min和echarts。
node.html是實際顯示的界面，會調用上面兩個文件，并且里面也有接口和C#的控件對接。
此三個文件需要同級目錄，且和啟動程序也要統計目錄。
以下是前兩個文件的連接以及node.html文件的內容。
?百度網盤鏈接：
https://pan.baidu.com/s/18hONdXIs3N3ajZJZ0Xkydw提取碼：
ga7o以下是node.html文件的內容
<!DOCTYPE html> <html><head><meta charset="utf-8"></meta><title>ECharts</title> <script src="echarts.js"></script><script src="jquery-1.10.2.min.js"></script><script type="text/javascript">function draw(ccomap){var text = ccomap;var data = eval(text);var graph = data2Graph(data);drawGraph(graph);}function data2Graph(data) {var graph = {}var vertices = {}var links = [];for (var i = 0; i < data.length; i++) {var s = String(data[i][0]);var t = String(data[i][1]);var v = data[i][2];vertices[s] = s;vertices[t] = t;links.push({'source' : s, 'target' : t, 'value' : v});}var nodes = [];$.each(vertices, function(k, v) {nodes.push({'name' : v, 'value' : v});});graph['links'] = links;graph['data'] = nodes;return graph;}function drawGraph(graph) {var myChart = echarts.init(document.getElementById("echarts-main"));var option = {tooltip: {},series : [{type: 'graph',layout: 'force',symbolSize: 30,edgeSymbol: ['none', 'arrow'],data: graph.data,links: graph.links,roam: true,label: {normal: {show: true,formatter: function (e) {return e['data']['value'];}}},edgeLabel: {normal: {show: true,position: 'middle'}},force: {repulsion: 1000,edgeLength: 200}}]};myChart.setOption(option);}//$(document).ready(function(){// draw();// $("#gen-btn").on("click", function(){// draw();// });//});</script></head><body><p>拓撲圖:</p><div id="echarts-main" style="height:700px;width:100%;border:1px dashed;"></div></body> </html>?
然后開始在上位機上實現對接。
打開C#在Form添加一個Button按鍵和WebBrowser控件，
WebBrowser控件的大小決定顯示的web界面的大小。
?將WebBrowser控件的以下屬性設置為True。
然后點擊事件，雙擊事件生成函數。?
按鍵也需要一個事件，雙擊按鍵建立一個按鍵事件，
在按鍵事件函數里面復制進入如下函數中的內容，
其中的node.html就是上面準備好的文件。
private void Button_RefreshMap_Click(object sender, EventArgs e) {try{string Map_js_Path = Application.StartupPath + "\\node.html"; //獲得當前工作路徑WebBrowser_DeviceMap.Url = new Uri(Map_js_Path);}catch (Exception ex){MessageBox.Show(ex.ToString(), "ERROR");return;} }?在上方WebBrowser生成的事件函數里面復制進去如下函數中的內容，然后就可以直接運行看一下效果圖了。
private void WebBrowser_DeviceMap_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e) {//*string map_string = "[[0,1,10], [1,0,1], [1,2,5], [2,0,5], [3,0,5], [4,1,4]]";string map_string = "";byte map_num = 10;byte[] map_byte = new byte[map_num];for (int i = 0; i < map_num; i++){map_string += "[";map_string += i.ToString();map_string += ",";map_string += "0";map_string += ",";map_string += i.ToString();map_string += ",";if(i == map_num-1){map_string += "]";}else{map_string += "], ";}}map_string = "[" + map_string + "]";WebBrowser_DeviceMap.Document.InvokeScript("draw", new Object[] { map_string }); }然后介紹每個數字的含義。
最后傳給html文件的是如下所示的類似的字符串數據。
中間的每個中括號的數據才是需要顯示的，比如第一個則是0指向1的關系還會有一個箭頭，然后10是指向的那根線上顯示的東西，如下圖中框起來的三部分。
?
只要知道三個數字的含義，則可以隨意設置參數和指向關系了。
關于頁面上顯示的漢字，需要修改node.html文件就可以了。
需要注意的是，在加載拓撲的過程中可能會消耗一定的電腦性能，自己把控。
個人見解，感謝閱讀。
總結
以上是生活随笔為你收集整理的C#_串口调试助手-网络拓扑显示的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 计算机一级b考试理论知识,全国计算机等级
- 下一篇： 基于javaweb+jsp的设备维修管理