提供3000多款全球软件/控件产品
针对软件研发的各个阶段提供专业培训与技术咨询
根据客户需求提供定制化的软件开发服务
全球知名设计软件,显著提升设计质量
打造以经营为中心,实现生产过程透明化管理
帮助企业合理产能分配,提高资源利用率
快速打造数字化生产线,实现全流程追溯
生产过程精准追溯,满足企业合规要求
以六西格玛为理论基础,实现产品质量全数字化管理
通过大屏电子看板,实现车间透明化管理
对设备进行全生命周期管理,提高设备综合利用率
实现设备数据的实时采集与监控
利用数字化技术提升油气勘探的效率和成功率
钻井计划优化、实时监控和风险评估
提供业务洞察与决策支持实现数据驱动决策
翻译|使用教程|编辑:吴园园|2019-12-24 10:06:16.627|阅读 224 次
概述:树形图数据模型将数据表示为分层的树状结构,数据项通过父子关系连接。
# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>
相关链接:
AnyChart是基于JavaScript (HTML5) 的图表控件。使用AnyChart控件,可创建跨浏览器和跨平台的交互式图表和仪表。AnyChart 图表目前已被很多知名大公司所使用,可用于仪表盘、报表、数据分析、统计学、金融等领域。重要推荐:
AnyChart现已更新至最新版本8.7.0,九大数据可视化新功能上线,改进了功能并修复了一些bug。新版本,新功能,赶快下载体验吧~(点击查看更新详情)
正在搜寻
要搜索项目,请使用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(); }}
大事记
这是与树数据模型一起使用的事件的完整列表:
值 | 描述 |
treeItemMove | 数据项已移动。 |
treeItemUpdate | 数据项已更新。 |
treeItemCreate | 数据项已创建。 |
treeItemRemove | 数据项已被删除。 |
您可以通过调用带有或作为参数的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正版授权的朋友可以
本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn
文章转载自:本文探讨 SQL Server 中 NULL 和空值之间的区别,并讨论如何有效地处理它们。
Unity 是一款功能极其丰富的游戏引擎,允许开发人员将各种媒体集成到他们的项目中。但是,它缺少最令人兴奋的功能之一 - 将 Web 内容(例如 HTML、CSS 和 JavaScript)直接渲染到 3D 场景中的纹理上的能力。在本文中,我们将介绍如何使用 DotNetBrowser 在 Unity3D 中将 Web 内容渲染为纹理。
DevExpress v24.2帮助文档正式发布上线了,请按版本按需下载~
本教程将向您展示如何用MyEclipse构建一个Web项目,欢迎下载最新版IDE体验!
服务电话
重庆/ 023-68661681
华东/ 13452821722
华南/ 18100878085
华北/ 17347785263
客户支持
技术支持咨询服务
服务热线:400-700-1020
邮箱:sales@pclwef.cn
关注我们
地址 : 重庆市九龙坡区火炬大道69号6幢