AnyGantt是基于JavaScript的高級解決方案，用于構建復雜且信息豐富的甘特圖。它完全跨瀏覽器和跨平臺，可用于ASP.NET、ASP、PHP、JSP、ColdFusion、Ruby on Rails或簡單的HTML頁面。

點擊下載AnyGantt正式版

總覽

詞樹是一種以層次結構方式顯示文本數據的可視化：作為元素樹，通常是單個單詞，由線連接。字的字體大小代表其權重-頻率/孩子的數量。此類型可用于顯示出現詞根或術語層次結構的典型上下文。

本文介紹了如何創建基本的單詞樹圖表以及配置特定于該類型的設置。您還可以查看下表以簡要了解字樹的特征：

模組

詞樹需要添加核心和詞樹模塊：

<script src="http://cdn.anychart.com/releases/8.9.0/js/anychart-core.min.js"></script>
&lt;script src="http://cdn.anychart.com/releases/8.9.0/js/anychart-bundle.min.js"></script>

快速開始

要創建單詞樹，請使用anychart.wordtree（）圖表構造函數。

下面的示例演示如何創建基本的單詞樹：

// create data
var data = [
  {value:     "Slavic Languages",
   children: [
    {value:   "East", children: [
      {value: "Russian"},
      {value: "Ukrainian"},
      {value: "Belarusian"}
    ]},
    {value:   "West", children: [
      {value: "Polish"},
      {value: "Czech"},
      {value: "Slovak"}
    ]},
    {value:   "South", children: [
      {value: "Bulgarian"},
      {value: "Serbian"},
      {value: "Croatian"},
      {value: "Slovene"},
      {value: "Macedonian"}
    ]}  
  ]} 
];

// create a chart and set the data
var chart = anychart.wordtree(data, "as-tree");

// set the container id
chart.container("container");

// initiate drawing the chart
chart.draw();

在AnyChart中，為所有圖表類型（包括單詞樹圖表）以相同的方式配置了許多設置（例如，圖例和交互設置）。

特殊設定

數據

單詞樹圖表需要樹數據模型，該模型將數據表示為分層的樹狀結構，其數據項通過父子關系連接。

您可以通過將樹數據傳遞到圖表構造函數來顯式建立單詞之間的層次結構。另外，單詞之間的關系可以隱式建立：當您傳遞短語列表或文本時，AnyChart引擎會自動分析數據。

注意1：一棵單詞樹只能有一個根詞。
注意2：當您的數據是列表或文本時，它被解析為單個單詞，但是在樹形數據中，您可以將項目設置為單詞和單詞組合。

樹

對于樹狀數據，使用以下數據字段：

• id 設置唯一標識符
• parent 設置父母
• children 安置孩子
• value 設置單詞/單詞組合
• weight 設定體重

重量（子女數）被自動計算。它顯示在工具提示中，并影響字體大小。如果由于某種原因您沒有在數據中包括項目的子項，則可以手動指定該項目的權重。

在此示例中，"South"元素的子代未包含在數據中，但將其"weight"設置為5以表明有5種南斯拉夫語言：

// create data
var data = [
  {value:     "Slavic Languages",
   children: [
    {value:   "East", children: [
      {value: "Russian"},
      {value: "Ukrainian"},
      {value: "Belarusian"}
    ]},
    {value:   "West", children: [
      {value: "Polish"},
      {value: "Czech"},
      {value: "Slovak"}
    ]},
    {value:   "South", weight: 5}  
  ]} 
];

// create a chart and set the data
var chart = anychart.wordtree(data, "as-tree");

當您將數據設置為短語列表時，AnyChart會自動分析它并構建一棵樹。例如，在下面的示例中，一組關于氧氣的短語被傳遞到了圖表構造函數，并且它創建了一個以root為根的樹"oxygen"。

// create data
var data = [
  ["oxygen is a chemical element"],
  ["in nature, oxygen is a gas with no color or smell"],
  ["oxygen is a very important element"],
  ["oxygen was initially discovered in 1772"],
  ["oxygen is what makes burning possible"],
  ["oxygen can be used in smelting metal from ore"],
  ["oxygen is used in hospitals for killing bacteria"],
  ["oxygen is used to purify the water"],
  ["in nature, oxygen is produced by plants"]
];
    
// create a chart and set the data
var chart = anychart.wordtree(data);

將數據設置為文本需要使用word（）方法手動設置根詞根詞。然后，AnyChart會自動使用指定的根來構建樹。在以下示例中，它是單詞："He"

// create data
var data = "Here come old flat top, " +
           "He come groovin' up slowly. " +
           "He got joo joo eyeballs. " +
           "He one holy roller. " +
           "He got hair down to his knee. " +
           "He wear no shoeshine. " +
           "He got toe jam football. " +
           "He got monkey finger. " +
           "He shoot Coca-Cola. " +
           "He say I know you, you know me. " +
           "One thing I can tell you is " +
           "You got to be free. " +
           "Come together, right now" +
           "Over me. ";

// create a chart and set the data
var chart = anychart.wordtree(data);

// set the root word
chart.word("He");

一棵詞樹只能有一個根詞。它總是在樹數據中明確指定。對于列表和文本，使用word（）方法：

chart.word("word");

請記住word（）是情況靈敏和你傳遞給它的字符串必須是一個字。

注意：在樹數據中，根可以是單詞，也可以是單詞組合。但是，短語和文本都被解析為單詞，因此詞根也就是單個單詞。即使您手動設置它，它也只需一個字就可以正常工作。

在此示例中，有一個基于氧氣短語列表的圖表。根詞"liquid"明確設置-默認根是"oxygen"因為它是第一個字符串中的第一個詞。您可以切換到"oxygen"或"pure"查看根的選擇如何影響圖表。

// create data
var data = [
  ["oxygen is a chemical element"],
  ["in nature, oxygen is a gas with no color or smell"],
  ["oxygen is a very important element"],
  ["oxygen was initially discovered in 1772"],
  ["oxygen is what makes burning possible"],
  ["oxygen can be used in smelting metal from ore"],
  ["oxygen is used in hospitals for killing bacteria"],
  ["oxygen is used to purify the water"],
  ["in nature, oxygen is produced by plants"],
  ["pure oxygen helps people with certain illnesses"],
  ["pure oxygen can be breathed during decompression"],
  ["pure oxygen is toxic"],
  ["exposure to pure oxygen can cause lung collapse"],
  ["liquid oxygen is a pale blue cryogenic liquid"],
  ["liquid oxygen is used for industrial purposes"],
  ["liquid oxygen is a powerful oxidizing agent"],
  ["liquid oxygen is used in rocket fuel"],
  ["liquid oxygen is supplied to hospitals"]
];

// create a chart and set the data
chart = anychart.wordtree(data);

//set the root word
chart.word("liquid")

所有積分

您可以配置單詞樹的字體。使用以下方法：

• fontColor（）設置字體顏色
• fontDecoration（）設置字體修飾-上劃線，下劃線等。
• fontFamily（）設置字體系列-Verdana，Helvetica，Arial等。
• fontOpacity（）設置字體不透明度
• fontStyle（）設置字體樣式-正常，斜體，斜
• fontWeight（）設置字體粗細

• maxFontSize（）設置最大字體大小
• minFontSize（）設置最小字體

// configure the font
chart.fontColor("#1976d2");
chart.fontWeight(600);
chart.maxFontSize(20);

對于樹數據，您可以配置單個項目的字體-使用與上述方法相對應的額外數據字段。

不能通過這種方式設置最大和最小字體大小。另外，請注意：元素的各個設置也會應用到其子元素，除非它們具有自己的設置。它是這樣工作的：

// create data
var data = [
  {value:     "Slavic Languages",
   children: [
    {value:   "East", children: [
      {value: "Russian"},
      {value: "Ukrainian"},
      {value: "Belarusian"}
    ]},
    {value:   "West", children: [
      {value: "Polish"},
      {value: "Czech"},
      {value: "Slovak"}
    ]},
    {value:   "South", fontColor: "#1976d2", children: [
      {value: "Bulgarian"},
      {value: "Serbian"},
      {value: "Croatian"},
      {value: "Slovene"},
      {value: "Macedonian", fontColor: "#dd2c00"}
    ]}  
  ]} 
];

// create a chart and set the data
var chart = anychart.wordtree(data, "as-tree");

連接器是連接單詞的線。使用以下方法來配置連接器：

• curveFactor（）設置曲率
• length（）設置長度
• offset（）設置偏移量
• stroke（）設置筆劃

注2：長度設置為0時，無論曲率如何，連接器看起來都像垂直的垂直線。

// configure the connectors
var connectors = chart.connectors();
connectors.curveFactor(0);
connectors.length(100);
connectors.offset(20);
connectors.stroke("0.5 #1976d2");

如果樹不適合圖表的高度，則將隱藏某些或所有項目的子級。在每個此類項目之后，將顯示其權重（頻率/孩子數量），然后顯示文本元素-后綴。

默認的后綴為"more"，但是您可以通過將自定義字符串傳遞給postfix（）方法來設置自己的文本。傳遞空字符串時，僅顯示重量。

在以下示例中，調整了字體大小，以便隱藏一些子單詞。后綴是自定義的：

// set the postfix
chart.postfix("lines");

甲工具提示是文本時的曲線圖上的點懸停在顯示框。有許多可視設置和其他設置：例如，您可以使用字體設置和文本格式設置器來編輯文本，更改背景樣式，調整工具提示的位置等等。

互動性

單詞樹圖表默認情況下是交互式的。它具有內置的向下鉆取功能：如果單擊包含子元素的元素，則向下鉆取該元素及其子元素，如果單擊當前元素的父元素，則會向上鉆取一個級別。可以修改此行為-使用以下方法：

• drillTo（）鉆取一個項目
• drillUp（）向上鉆取

/* locate an item in the data tree
and get it as an object */
var item = chart.data().search("value", "a");

// drill down to the item
chart.drillTo(item);

// drill up
chart.drillUp();

APS是慧都科技15年行業經驗以及技術沉淀之作，通過連接企業接單、采購、制造、倉儲物流等整個供應鏈流程，幫助提升企業生產效率。