跨平台图表控件AnyChart快速入门教程（十二）：树形图数据模型（下）

树形图数据模型将数据表示为分层的树状结构，数据项通过父子关系连接。

AnyChart是基于JavaScript (HTML5) 的图表控件。使用AnyChart控件，可创建跨浏览器和跨平台的交互式图表和仪表。AnyChart 图表目前已被很多知名大公司所使用，可用于仪表盘、报表、数据分析、统计学、金融等领域。重要推荐：AnyChart已加入在线订购，超值特惠限时抢购！咨询详情>>

AnyChart现已更新至最新版本8.7.0，九大数据可视化新功能上线，改进了功能并修复了一些bug。新版本，新功能，赶快下载体验吧~（点击查看更新详情）

AnyChart最新试用版

正在搜寻

要搜索项目，请使用anychart.data.Tree类的以下方法：

search()
searchItems()
filter()

search()

search()方法返回的任一数据项或一个项目的阵列，而searchItems（）总是返回一个数组。两种方法都使用三个参数来调用：数据字段的名称，值和比较函数。

在下一个示例search（）中，结合使用Treemap的drillTo方法，用于查找具有特定名称的项目并将其向下钻取：

/* locate an item in the data treeand get it as an object */var item = treeData.search("name", "Item 3-4");// drill down to the itemchart.drillTo(item);

比较函数接受数据字段的名称和值，并返回负数，零或正数。

以下示例显示如何使用searchItems（）方法和比较函数执行搜索，该函数用于访问自定义数据字段中对象的属性employee：

// create datavar data = [  {    id: "1",    name: "Root",    actualStart: "2018-01-15",    actualEnd: "2018-03-10",    actual: {},    employee: {firstName: null, lastName: null},    children: [      {        id: "1_1",        name: "Child 1",        actualStart: "2018-01-15",        actualEnd: "2018-01-25",        employee: {firstName: "John", lastName: "Doe"}      },      {        id: "1_2",        name: "Child 2",        actualStart: "2018-01-20",        actualEnd: "2018-02-04",        employee: {firstName: "Frank", lastName: "Foe"}      },      {        id: "1_3",        name: "Child 3",        actualStart: "2018-02-05",        actualEnd: "2018-02-05",        employee: {firstName: "Marta", lastName: "Moe"}      },      {        id: "1_4",        name: "Child 4",        actualStart: "2018-02-05",        actualEnd: "2018-02-24",        employee: {firstName: "John", lastName: "Doe"}      },      {        id: "1_5",        name: "Child 5",        actualStart: "2018-02-25",        actualEnd: "2018-03-10",        employee: {firstName: "Jane", lastName: "Poe"}      }  ]}];// create a data treetreeData = anychart.data.tree(data, "as-tree");// create a gantt chartchart = anychart.ganttProject();// set the datachart.data(treeData);// a comparison functionfunction comparisonFunction(fieldValue, comparisonValue) {  if (comparisonValue == fieldValue.firstName + fieldValue.lastName) {    return 0;  } else {    return 1;  }}// search for itemsvar items = treeData.searchItems("employee", "JohnDoe", comparisonFunction);

filter()

所述filter()方法返回的数据项的数组。始终使用过滤器函数作为参数来调用它，该函数接受数据项并返回true或false。

使用此方法可以设置高级搜索条件-例如，查找大于或小于给定值的所有元素或比较两个数据字段，如下面的示例中所示。

在此示例中，使用过滤器功能查找持续时间大于给定持续时间的项目，持续时间是根据两个数据字段计算得出的（这些项目的名称显示在图表标题中，并且其节点为彩色）：

// search for items with duration equal or greater than a given onevar input = (document.getElementById("valueInput").value) * 1000 * 3600 * 24;var items = treeData.filter(function(item) {  return item.get("actualEnd") - item.get("actualStart") >= input;});

指标

对索引数据执行某些操作的速度更快。要在数据字段上创建索引，请在anychart.data.Tree实例上调用createIndexOn（）并将字段名称指定为参数：

// create an indextreeData.createIndexOn("value");

注意：您不能在parent或child字段上创建索引。

要删除字段的索引，请使用带有字段名称作为参数的removeIndexOn（）：

// remove the indextreeData.removeIndexOn("value");

遍历

遍历是遍历树中所有项目的过程。您可以直接访问它们，但是AnyChart提供了更简便，更快速的即用型解决方案。

要执行遍历，请使用getTraverser（）方法获取anychart.data.Traverser对象。然后调用其方法：

• advance（） -将遍历器移至下一个项目

• current（） -返回当前项目

• get（） -返回给定字段中当前项目的值

• getDepth（） -返回当前项目的深度

• meta（） -设置/获取给定字段中当前项目的元值

• nodeYieldCondition（） -设置/获取一个确定是否返回项目的函数

• set（） -在给定字段中设置当前项目的值

• reset（） -将遍历器重置为第一项之前的默认位置

• toArray（） -以项目数组的形式返回当前遍历器

• traverseChildrenCondition（） -设置/获取一个函数，该函数确定遍历器是否遍历项的子项

在下面的示例中，advance（）和get（）方法用于显示所有数据项的名称：

// get the traverser of a treevar traverser = treeData.getTraverser();/* get the element displaying information about the tree */var treeInfo = document.getElementById("treeInfo");// display the names of all data items in the treewhile (traverser.advance()) {  var newElement = document.createElement("li");  newElement.innerText = traverser.get("name");  treeInfo.appendChild(newElement);}

在下一个示例中，将progress （）和current（）与Treemap的drillTo方法结合使用，以向下钻取图表的所有节点。的复位（）当它完成方法允许再次启动遍历。

// get the traverser of a treetraverser = treeData.getTraverser();// skip the root nodetraverser.advance();// get the next data item and drill to itfunction nextItem() {  // try to go to the next item  if (traverser.advance()) {    /* get the current item    as an instance of the dataItem class */    var dataItem = traverser.current();    // drill down to the item    chart.drillTo(dataItem);  }  else {    //reset the traverser    traverser.reset();  }}

大事记

这是与树数据模型一起使用的事件的完整列表：

您可以通过调用带有或作为参数的dispatchEvents（）方法来监听事件以及停止或开始调度事件。falsetrue

在下面的示例中，有一个启用了实时编辑模式的甘特图。当您可以拖放行时，将”treeItemMove”被触发。编辑元素和数据网格文本时，将”treeItemUpdate”触发。要了解更多信息，请参阅实时编辑：默认行为。

此外，还有一个用于添加项目的自定义按钮，它会触发”treeItemCreate”。

事件侦听器用于更新图表标题：

/* listen to the treeItemMove eventand update the chart title */treeData.listen("treeItemMove", function (e) {  var itemName = e.item.get("name");  chart.title("Tree Data Model: Events< " +              " treeItemMove >");});/* listen to the treeItemUpdate eventand update the chart title */treeData.listen("treeItemUpdate", function (e) {  var itemName = e.item.get("name");  chart.title("Tree Data Model: Events< " +              " treeItemUpdate >");});/* listen to the treeItemCreate eventand update the chart title */treeData.listen("treeItemCreate", function (e) {  var itemName = e.item.get("name");  chart.title("Tree Data Model: Events< " +              ": treeItemCreate >");});

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

想要购买Anychart正版授权的朋友可以咨询官方客服

标签：

来源：慧都