點擊下載Highcharts最新試用版

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

創(chuàng)建網(wǎng)絡圖很簡單。該演示顯示了五個節(jié)點以及它們之間的關(guān)系。節(jié)點1與節(jié)點3,4和2具有關(guān)系。節(jié)點5還與節(jié)點2和4具有關(guān)系，但與節(jié)點3沒有關(guān)系。

要復制此圖表，您所要做的就是創(chuàng)建一個遵循此結(jié)構(gòu)的關(guān)系表['from', 'to']。在此示例中，表格如下所示：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

想要購買Highcharts正版授權(quán)的朋友可以。

更多精彩內(nèi)容，歡迎關(guān)注下方的微信公眾號，及時獲取產(chǎn)品最新資訊▼▼▼