永利最大(官方)网站

AnyChart是基于JavaScript (HTML5) 的图表控件。使用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 tree
and get it as an object */var item = treeData.search("name", "Item 3-4");
// drill down to the item
chart.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 tree
treeData = anychart.data.tree(data, "as-tree");
// create a gantt chart
chart = anychart.ganttProject();
// set the data
chart.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 index
treeData.createIndexOn("value");

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

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

// remove the index
treeData.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 tree
traverser = treeData.getTraverser();
// skip the root node
traverser.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 event
and 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 event
and 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 event
and update the chart title */
treeData.listen("treeItemCreate", function (e) {
  var itemName = e.item.get("name");
  chart.title("Tree Data Model: Events

< " +
              ": treeItemCreate >");});

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

想要购买Anychart正版授权的朋友可以