點擊下載Highcharts最新試用版

網絡圖是使用簡單的鏈接顯示元素（節點）之間的關系的圖表。網絡圖允許我們快速可視化節點之間的集群和關系; 該圖表通常用于生命科學，網絡安全，情報等行業。

創建網絡圖很簡單。該演示顯示了五個節點以及它們之間的關系。節點1與節點3,4和2具有關系。節點5還與節點2和4具有關系，但與節點3沒有關系。

要復制此圖表，您所要做的就是創建一個遵循此結構的關系表['from', 'to']。在此示例中，表格如下所示：

data: [
  ['Node 1', 'Node 2'],
  ['Node 1', 'Node 3'],
  ['Node 1', 'Node 4'],
  ['Node 4', 'Node 5'],
  ['Node 2', 'Node 5']
]

這是另一個更復雜的演示。節點代表語言Indo-Europen語言樹，其中鏈接表示語言之間的關系。

注意使用顏色來幫助讀者快速查看聚類。橙色代表斜體語言，而綠色和粉紅色代表凱爾特語和印度伊朗語言。

要向節點添加顏色，請使用nodes基本上是一個數組的選項來使用其ID訪問任何節點：

nodes: [{
      id: 'Indo-Iranian',
      color: indoIranianColor
    },
    ...

color屬性具有節點的顏色; 在這種情況下，變量indoIranianColor。節點的顏色被定義為變量，以便在第一行中獲得更大的靈活性和維護：

VAR celticColor = “＃7becb2” ，
  italicColor = “＃ecb27b” ，
  indoIranianColor = “＃ec7bb6” ;

另一種可視化連接和節點性質的方法是將大小變量添加到網絡圖中; 節點的大小有助于對節點的類別進行分類。下面的演示說明了韓國國內航線。節點代表分為三大類的機場：

• 擁有50多個直達目的地的機場。

• 有超過10個直達目的地的機場。

• 機場少于10個直達目的地。

顏色和大小有助于讀者快速識別相對于彼此的機場大小。大小也可以用作輔助功能輔助工具，因為它允許色盲的人獲取數據故事，即使他們無法區分顏色。

您還可以使用單色圖表使圖表更易于訪問。但是，就個人而言，我更喜歡不同尺寸和顏色的產品，因為它讓所有讀者的生活更輕松。

盡管網絡圖表易于創建并且可以分享令人愉快的圖表，但如果它們顯示大量節點，它們可能非常復雜且難以理解。沒有確切數量的節點可以避免，但嘗試使用不同的顏色，大小，可以使您的圖表更易于閱讀。

本篇教程對您是否有用，歡迎分享您的疑問和看法~

想要購買Highcharts正版授權的朋友可以。

更多精彩內容，歡迎關注下方的微信公眾號，及時獲取產品最新資訊▼▼▼