Highcharts是一款純JavaScript編寫的圖表庫，為你的Web網站、Web應用程序提供直觀、交互式圖表。當前支持折線、曲線、區域、區域曲線圖、柱形圖、條形圖、餅圖、散點圖、角度測量圖、區域排列圖、區域曲線排列圖、柱形排列圖、極坐標圖等幾十種圖表類型。

Highcharts現已更新至最新版本7.2.0，新版本添加了新的頂級選項-說明；幾乎所有系列都增加了對多個色軸的支持；增加了高對比度光和高對比度 - 黑暗主題，與背景形成3：1對比度并修復了一些之前存在的BUG，趕快下載試用吧~

點擊下載Highcharts最新試用版

一個組織結構圖可以幫助您顯示任何組織結構和結構中的不同元素的主要連接和行列。盡管其他圖表類型可以顯示節點之間的關系，例如“ 網絡圖”或“ 樹圖”系列，但是組織結構圖的獨特之處在于，始終存在一個頂部節點，網絡中的所有其他節點都從該頂部節點流出。

以下示例顯示了聯合國統計部門的組織結構圖：

用戶可以輕松地看到整個組織的元素，結構的性質以及不同的分支。

要在Highcharts中創建此分層效果，您要做的就是設置一個表，在該表中鏈接上位元素和后裔元素，或上級成員和下級成員，例如此示例['Superior，'Subordinate']。注意每個分支使用不同的顏色；顏色有助于引導用戶更好，更快地區分分支及其元素。

為避免過多的信息使用戶不知所措，您可以將元素懸停在元素上，從而將其他信息顯示為工具提示。

要添加額外的信息和顏色，請使用nodes選項，您可以在其中通過元素的ID引用每個元素，然后添加正確的顏色或信息。例如，行政支持股的nodes選項具有以下結構：

{
  id: 'ESU',
  title: null,
  name: 'Executive Support Unit',
  layout: 'hanging',
  color: "#41c0a4",
  info: "Planning and coordination of the overall Division’s work program and operation, including program management finance/budget management, human resources management, and general office administration"
}

顏色和其他信息分別保存在color和info屬性中。

您還可以更改方向，以使分支水平擴展，從左向右讀取，而不是垂直擴展。下面的演示顯示了簡化的肉食動物系統發生學，具有水平方向

與第一個演示顯示元素排名的演示相反，該演示更多地關注進化歷史而不是對元素進行排名。該演示使此圖表類型的功能類似于流程圖，但與真正的流程圖相反，此處的流向只是推斷的，而不是可視化的。

要創建水平組織結構圖，您要做的就是將inverted選項設置為false：

chart: {
  height: 600,
  inverted: false},

請注意，我們如何包含圖片以改善某些元素的可用性。將圖片添加到圖表框或節點很容易。只需使用以下圖像選項，然后將鏈接添加到圖片即可：

image:"//raw.githubusercontent.com/mekhatria/demo_highcharts/master/panthera.png"

組織結構圖提供了一種熟悉且直觀的方式來可視化層次結構。在使用Highcharts的組織結構圖時，請隨時檢查API以了解有關可用功能和選項的更多信息。

=====================================================

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

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