半岛权威十大直营(官方)网站

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正版授权的朋友可以。

更多精彩内容，敬请关注下方的微信公众号，及时获取产品最新资讯▼▼▼