彩票走势图

AnyGantt是基于JavaScript的高级解决方案，用于构建复杂且信息丰富的甘特图。它完全跨浏览器和跨平台，可用于ASP.NET、ASP、PHP、JSP、ColdFusion、Ruby on Rails或简单的HTML页面。

点击下载AnyGantt正式版

总览

词树是一种以层次结构方式显示文本数据的可视化：作为元素树，通常是单个单词，由线连接。字的字体大小代表其权重-频率/孩子的数量。此类型可用于显示出现词根或术语层次结构的典型上下文。

本文介绍了如何创建基本的单词树图表以及配置特定于该类型的设置。您还可以查看下表以简要了解字树的特征：

模组

词树需要添加核心和词树模块：

<script src="//cdn.anychart.com/releases/8.9.0/js/anychart-core.min.js"></script>
<script src="//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年行业经验以及技术沉淀之作，通过连接企业接单、采购、制造、仓储物流等整个供应链流程，帮助提升企业生产效率。