點(diǎn)擊下載Highcharts最新試用版

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

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

要復(fù)制此圖表，您所要做的就是創(chuàng)建一個(gè)遵循此結(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']
]

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

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

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

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

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

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

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

• 擁有50多個(gè)直達(dá)目的地的機(jī)場。

• 有超過10個(gè)直達(dá)目的地的機(jī)場。

• 機(jī)場少于10個(gè)直達(dá)目的地。

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

您還可以使用單色圖表使圖表更易于訪問。但是，就個(gè)人而言，我更喜歡不同尺寸和顏色的產(chǎn)品，因?yàn)樗屗凶x者的生活更輕松。

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

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

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

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