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

點(diǎn)擊下載AnyGantt正式版

總覽

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

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

模組

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

<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>

快速開始

要?jiǎng)?chuàng)建單詞樹，請(qǐng)使用anychart.wordtree（）圖表構(gòu)造函數(shù)。

下面的示例演示如何創(chuàng)建基本的單詞樹：

// 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中，為所有圖表類型（包括單詞樹圖表）以相同的方式配置了許多設(shè)置（例如，圖例和交互設(shè)置）。

特殊設(shè)定

數(shù)據(jù)

單詞樹圖表需要樹數(shù)據(jù)模型，該模型將數(shù)據(jù)表示為分層的樹狀結(jié)構(gòu)，其數(shù)據(jù)項(xiàng)通過父子關(guān)系連接。

您可以通過將樹數(shù)據(jù)傳遞到圖表構(gòu)造函數(shù)來顯式建立單詞之間的層次結(jié)構(gòu)。另外，單詞之間的關(guān)系可以隱式建立：當(dāng)您傳遞短語列表或文本時(shí)，AnyChart引擎會(huì)自動(dòng)分析數(shù)據(jù)。

注意1：一棵單詞樹只能有一個(gè)根詞。
注意2：當(dāng)您的數(shù)據(jù)是列表或文本時(shí)，它被解析為單個(gè)單詞，但是在樹形數(shù)據(jù)中，您可以將項(xiàng)目設(shè)置為單詞和單詞組合。

樹

對(duì)于樹狀數(shù)據(jù)，使用以下數(shù)據(jù)字段：

• id 設(shè)置唯一標(biāo)識(shí)符
• parent 設(shè)置父母
• children 安置孩子
• value 設(shè)置單詞/單詞組合
• weight 設(shè)定體重

重量（子女?dāng)?shù)）被自動(dòng)計(jì)算。它顯示在工具提示中，并影響字體大小。如果由于某種原因您沒有在數(shù)據(jù)中包括項(xiàng)目的子項(xiàng)，則可以手動(dòng)指定該項(xiàng)目的權(quán)重。

在此示例中，"South"元素的子代未包含在數(shù)據(jù)中，但將其"weight"設(shè)置為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");

當(dāng)您將數(shù)據(jù)設(shè)置為短語列表時(shí)，AnyChart會(huì)自動(dòng)分析它并構(gòu)建一棵樹。例如，在下面的示例中，一組關(guān)于氧氣的短語被傳遞到了圖表構(gòu)造函數(shù)，并且它創(chuàng)建了一個(gè)以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);

將數(shù)據(jù)設(shè)置為文本需要使用word（）方法手動(dòng)設(shè)置根詞根詞。然后，AnyChart會(huì)自動(dòng)使用指定的根來構(gòu)建樹。在以下示例中，它是單詞："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");

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

chart.word("word");

請(qǐng)記住word（）是情況靈敏和你傳遞給它的字符串必須是一個(gè)字。

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

在此示例中，有一個(gè)基于氧氣短語列表的圖表。根詞"liquid"明確設(shè)置-默認(rèn)根是"oxygen"因?yàn)樗堑谝粋€(gè)字符串中的第一個(gè)詞。您可以切換到"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（）設(shè)置字體顏色
• fontDecoration（）設(shè)置字體修飾-上劃線，下劃線等。
• fontFamily（）設(shè)置字體系列-Verdana，Helvetica，Arial等。
• fontOpacity（）設(shè)置字體不透明度
• fontStyle（）設(shè)置字體樣式-正常，斜體，斜
• fontWeight（）設(shè)置字體粗細(xì)

• maxFontSize（）設(shè)置最大字體大小
• minFontSize（）設(shè)置最小字體

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

對(duì)于樹數(shù)據(jù)，您可以配置單個(gè)項(xiàng)目的字體-使用與上述方法相對(duì)應(yīng)的額外數(shù)據(jù)字段。

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

// 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（）設(shè)置曲率
• length（）設(shè)置長度
• offset（）設(shè)置偏移量
• stroke（）設(shè)置筆劃

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

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

如果樹不適合圖表的高度，則將隱藏某些或所有項(xiàng)目的子級(jí)。在每個(gè)此類項(xiàng)目之后，將顯示其權(quán)重（頻率/孩子數(shù)量），然后顯示文本元素-后綴。

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

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

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

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

互動(dòng)性

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

• drillTo（）鉆取一個(gè)項(xiàng)目
• 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年行業(yè)經(jīng)驗(yàn)以及技術(shù)沉淀之作，通過連接企業(yè)接單、采購、制造、倉儲(chǔ)物流等整個(gè)供應(yīng)鏈流程，幫助提升企業(yè)生產(chǎn)效率。