彩票走势图

跨平台图表控件AnyChart快速入门教程(十二):树形图数据模型(下)

翻译|使用教程|编辑:吴园园|2019-12-24 10:06:16.627|阅读 224 次

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

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

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

跨平台图表控件AnyChart快速入门教程(十二):树形图数据模型(下)

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

以下示例显示如何使用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);

跨平台图表控件AnyChart快速入门教程(十二):树形图数据模型(下)

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快速入门教程(十二):树形图数据模型(下)

指标

对索引数据执行某些操作的速度更快。要在数据字段上创建索引,请在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);}

跨平台图表控件AnyChart快速入门教程(十二):树形图数据模型(下)

在下一个示例中,将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();
  }}

跨平台图表控件AnyChart快速入门教程(十二):树形图数据模型(下)

大事记

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

描述

treeItemMove

数据项已移动。

treeItemUpdate

数据项已更新。

treeItemCreate

数据项已创建。

treeItemRemove

数据项已被删除。

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

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

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

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

跨平台图表控件AnyChart快速入门教程(十二):树形图数据模型(下)

/* 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正版授权的朋友可以

跨平台图表控件AnyChart快速入门教程(十二):树形图数据模型(下)


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP