国产精品一,91福利合集,涩涩在线视频

跨平臺圖表控件Anychart教程：如何創建JavaScript網絡圖

翻譯|使用教程|編輯：楊鵬連|2020-07-27 11:48:39.770|閱讀 397 次

概述：在本教程，我們不專注于以通常使用的相同精度來表示對象。取而代之的是，我們試圖發現網絡或網絡中各個部分的關系，而不必擔心單個節點。

相關鏈接：

AnyChart是基于JavaScript (HTML5) 的圖表控件。使用AnyChart控件，可創建跨瀏覽器和跨平臺的交互式圖表和儀表。AnyChart 圖表目前已被很多知名大公司所使用，可用于儀表盤、報表、數據分析、統計學、金融等領域。

點擊下載AnyChart正式版

?|?????????¨Web???JavaScript HTML5?????o?????????

如何使用Web的JavaScript HTML5創建網絡圖網絡圖是一種特殊的，非常有趣的數據可視化形式。與條形圖或餅圖等更傳統的圖表類型不同，網絡圖的作用遠不只是可視化數字數據。使用這些圖表，可以將每個對象表示為一個點（稱為節點），并將對象之間的連接表示為一條線（稱為鏈接或邊）。在這里，我們不專注于以通常使用的相同精度來表示對象。取而代之的是，我們試圖發現網絡或網絡中各個部分的關系，而不必擔心單個節點。

現在，我將指導您如何使用JavaScript（HTML5）為Web開發交互式網絡圖。受本·沙林斯（Ben Sullins）創建的有趣的可視化效果的啟發，我決定采用有關過去十年最大的電視連續劇《權力的游戲》的數據。這是一個史詩般的幻想故事，圍繞著各種派系式房屋的爭吵。因此，在本教程中，我將通過展示誰攻擊了誰來形象化《權力的游戲》世界中的關系。跟著我，這將是一次很酷的冒險！

制作網絡圖

從頭開始構建JS網絡圖

基本上，要構建基于JS的網絡圖，我們需要遵循與任何JavaScript圖表相同的四個步驟：

創建一個HTML頁面。
添加必要的腳本。
加載將可視化的數據。
繪制圖表。

1.創建一個HTML頁面

建立網絡圖的第一步是設置HTML頁面。這涉及為圖表創建基本的HTML模板以及添加必要的CSS規則。
在這里，我們還為HTML頁面添加標題，并創建一個div來包含圖表。

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Network Graph</title>
    <style>
      html, body, #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      // The chart code goes here.
    </script>
  </body>
</html>

我設置了CSS，以使容器div填充整個頁面。當然，您可能要根據用例進行更改。

2.添加必要的腳本

第二步是添加所有必需的腳本。我們將使用AnyChart JS Charts ，它是一個非常易于使用且功能強大的JavaScript圖表庫。我個人喜歡AnyChart，因為它對初學者和專業人士都非常有用。它使您可以快速建立數據可視化的原型，并確實有助于加快整個開發過程。

為了充分利用AnyChart庫，我們需要添加其專用模塊。在本教程中，我們將使用其中的三個。需要Core和Graph模塊來繪制我們的網絡圖，而Data Adapter模塊將幫助我們導入《權力的游戲》 JSON數據（稍后會介紹更多）。

<script src="http://cdn.anychart.com/releases/8.8.0/js/anychart-core.min.js"></script>
<script src="http://cdn.anychart.com/releases/8.8.0/js/anychart-graph.min.js"></script>
<script src="http://cdn.anychart.com/releases/8.8.0/js/anychart-data-adapter.min.js"></script>

我們將這些腳本添加到代碼的開頭。

3.加載我們將要可視化的數據

如前所述，我們將使用的數據基于《權力的游戲》。我找到了一個很棒的數據集，《五王之戰》。數據最初是從源火維基和冰，致力于權力的游戲維基。然后，數據科學家Wikimedia Foundation的機器學習總監Chris Albon對其進行了刮擦和清理。為了這個JS網絡圖教程的目的，我自己進一步處理了它。你可以找到的結果在這里，在JSON。

問題是，AnyChart希望您的網絡圖形數據采用特定格式。它想要一個具有節點數組和邊緣數組的JSON對象。每個節點都需要一個“ id”。邊緣需要一個“從”和“到”，分別是每個連接的源和目標。

像這樣：

nodes: [{ "id": "Lannister" }]
edges: [{ "from": "Lannister", "to": "Tully" }]

然后，我們需要導入數據。為JavaScript數據可視化加載數據有時會很麻煩。但是使用AnyChart，處理數據  確實非常簡單。利用正確的功能，您可以輕松導入CSV，JSON，XML甚至Google電子表格！

在這里，我們的數據為JSON格式，因此我們需要以下功能：

anychart.data.loadJsonFile('//static.anychart.com/git-storage/word-press/data/network-graph-tutorial/data.json', function (data) {
  // The chart code goes here.
})

因為我們希望僅在成功加載數據之后才繪制圖表，所以我們將放置代碼以在該函數中繪制圖表。

4.繪制圖表

第四步也是最后一步是繪制圖表。在這里，我們命令根據數據創建一個圖表，設置圖表標題，然后使用這些非常簡單的函數將圖形可視化：

// create a chart from the loaded data
var chart = anychart.graph(data);

// set the title
chart.title("Network Graph showing the battles in Game of Thrones");

// draw the chart
chart.container("container").draw();

結果如下：

請參見此網絡圖示例，以及在AnyChart Playground或CodePen上的完整HTML / CSS / JS代碼。

也許不如我們基于D3.js的靈感在美學上給人留下深刻的印象，但我們稍后會談到。花一些時間將鼠標懸停在節點上，或者將它們拖動一點。多么驚人？通過這四個簡單步驟和幾行JavaScript代碼，我們創建了這個功能強大且交互式的網絡圖。

完整的代碼如下，檢查出來：

<html>
  <head>
    <script src="http://cdn.anychart.com/releases/8.8.0/js/anychart-core.min.js"></script>
    <script src="http://cdn.anychart.com/releases/8.8.0/js/anychart-graph.min.js"></script>
    <script src="http://cdn.anychart.com/releases/8.8.0/js/anychart-data-adapter.min.js"></script>
    <style type="text/css">
      html, body, #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      anychart.onDocumentReady(function () {
        anychart.data.loadJsonFile("http://static.anychart.com/git-storage/word-press/data/network-graph-tutorial/data.json", function (data) {
        // create a chart from the loaded data
        var chart = anychart.graph(data);
        // set the title
        chart.title("Network Graph showing the battles in Game of Thrones");
        // draw the chart
        chart.container("container").draw();
        });
      });
    </script>
  </body>
</html>

自定義網絡圖外觀

正如我們目前的可視化效果一樣，我們可以做得更好。好了很多。所有不錯的JS圖表庫都允許您自定義使用其API構建的圖表。作為數據可視化開發人員，利用這些自定義更好地講述您的數據故事是一項關鍵技能。這些定制中的一些是美觀的，例如更改元素的大小或顏色，而某些功能是在更改工具提示時。

下面，我將展示一些可用于網絡圖的自定義技術。

更改迭代步驟

網絡圖是使用一種算法繪制的，該算法反復嘗試改善其布局。對于每次迭代，算法都會根據誤差度量進一步優化步驟。這表明迭代次數越多越好。但是，有時算法對優化布局的想法與您（以及您的用戶）對優化布局的想法可能會大不相同。通過更改迭代次數，我們可以獲得適合我們需求的不同布局。

在下面添加代碼，您將看到如果僅使用10次迭代（默認值為500），將會發生什么情況。

// set the iteration step
chart.layout().iterationCount(10);

好吧，這只是一個快速演示。讓我們跳過此更改，看看如何對我們的JS網絡圖可視化做一些有趣的事情。

定制節點（基本）：

我們可以自定義每個節點的大小，填充和筆觸，以及為每個狀態設置不同的規則。狀態表示默認節點，懸停的節點或選定的節點。可以使用與設置CSS顏色相同的方式來設置JavaScript網絡圖中的顏色，這里我們將使用十六進制代碼。

顯示懸停/選定/正常更改：

// set the size of nodes
nodes.normal().height(30);
nodes.hovered().height(45);
nodes.selected().height(45);

// set the fill of nodes
nodes.normal().fill("#ffa000");
nodes.hovered().fill("white");
nodes.selected().fill("#ffa000");
 
// set the stroke of nodes
nodes.normal().stroke(null);
nodes.hovered().stroke("#333333", 3);
	
		nodes.selected().stroke("#333333", 3);

請參見此網絡圖示例，以及在AnyChart Playground或CodePen上的完整HTML / CSS / JS代碼。

自定義節點（高級）：

就個人而言，對于網絡圖，我最喜歡的美學更改是將節點圖標替換為圖像。在這里，我們可以用圖像替換韋斯特羅斯（我們的節點）的大房子。通過將圖像的文件路徑添加到我們JSON中每個節點的對象上，可以輕松完成此操作。例如：

{id: "Example",
  fill: {
    src: "example_url"
  }
},

我已經進行了更改，可以在這里找到更新的文件。通過將此JSON與包含的圖像一起使用，我們得到以下圖形：

請參見此網絡圖示例，以及在AnyChart Playground或CodePen上的完整HTML / CSS / JS代碼。

節點標簽

并非所有人都知道每所房子的標語，不得不將鼠標懸停在每個節點上以查看它屬于哪個節點可能會非常痛苦。為了解決這個問題，我們可以標記每個節點。使用以下代碼即可輕松完成此操作：

// enable the labels of nodes
chart.nodes().labels().enabled(true);
 
// configure the labels of nodes
chart.nodes().labels().format("{%id}");
chart.nodes().labels().fontSize(12);
chart.nodes().labels().fontWeight(600);

結果是：

請參見此網絡圖示例，以及在AnyChart Playground或CodePen上的完整HTML / CSS / JS代碼。

為了方便起見，這是此交互式Java網絡圖（此教程的最終版本）的完整代碼，該可視化圖像將有關權力游戲之戰的數據可視化：

<html>
  <head>
    <script src="http://cdn.anychart.com/releases/8.8.0/js/anychart-core.min.js"></script>
    <script src="http://cdn.anychart.com/releases/8.8.0/js/anychart-graph.min.js"></script>
    <script src="http://cdn.anychart.com/releases/8.8.0/js/anychart-data-adapter.min.js"></script>
    <style type="text/css">
      html, body, #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>

      anychart.onDocumentReady(function () {
        anychart.data.loadJsonFile("http://static.anychart.com/git-storage/word-press/data/network-graph-tutorial/data_images.json", function (data) {

          // create a chart from the loaded data
          var chart = anychart.graph(data);

          // set the title
          chart.title("Network Graph showing the battles in Game of Thrones");

          // access nodes
          var nodes = chart.nodes();

          // set the size of nodes
          nodes.normal().height(30);
          nodes.hovered().height(45);
          nodes.selected().height(45);

          // set the stroke of nodes
          nodes.normal().stroke(null);
          nodes.hovered().stroke("#333333", 3);
          nodes.selected().stroke("#333333", 3);

          // enable the labels of nodes
          chart.nodes().labels().enabled(true);

          // configure the labels of nodes
          chart.nodes().labels().format("{%id}");
          chart.nodes().labels().fontSize(12);
          chart.nodes().labels().fontWeight(600);

          // draw the chart
          chart.container("container").draw();

        });
      });

    </script>
  </body>
</html>

結論

就像這樣，我們有了很棒的可視化工具，可以解開該網絡中的復雜關系。在本教程中，我展示了啟動和運行JS網絡圖表的過程是多么快速和容易，以及通過多一點的努力，我們就能通過一些選擇調整真正使圖表變得生動起來。

如果本教程激發了您對基于演出的圖表的興趣，請查看此精彩絕倫的32權力游戲數據可視化列表。

想要購買Anychart正版授權，或了解更多產品信息請點擊