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

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

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

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

AnyChart最新试用版

CSV字符串

要将数据设置为CSV字符串，请使用以下参数调用anychart.data.tree（）方法：

• CSV字符串

• 具有CSV映射的对象

• 具有CSV设置的对象（可选）

默认情况下，AnyChart会将CSV数据中的逗 视为列分隔符，并将换行符视为行分隔符，但是您可以在对象中指定替代设置并将其作为第三个参数传递。

使用columnsSeparator和rowsSeparator字段设置分隔符，并ignoreFirstRow在需要时忽略数据的第一行。

注意：数据的结构应类似于表中的数据集：通过映射id和parent字段来指定元素的层次结构（其他字段的选择取决于图表类型）。

以下示例显示了如何将数据设置为CSV字符串：

// create datavar data = "id;parent;name;value*" +           "1;null;Root*"+           "2;1;Parent 1*" +           "3;2;Child 1-1;150000000*" +           "4;2;Child 1-2;45000000*" +           "5;2;Child 1-3;3200000*" +           "6;1;Parent 2;*" +           "7;6;Child 2-1;55000000*" +           "8;6;Child 2-2;10600000*" +           "9;6;Child 2-3;5200000*" +           "10;1;Parent 3;*" +           "11;10;Child 3-1;21000000*" +           "12;10;Child 3-2;9000000*";// create an object with a csv mappingcsvMapping = {"id": 0, "parent": 1, "name": 2, "value": 3};// create an object with csv settingscsvSettings = {ignoreFirstRow: true, columnsSeparator: ";", rowsSeparator: "*"};// create a data treevar treeData = anychart.data.tree(data, csvMapping, csvSettings);// create a chart and set the datavar chart = anychart.treeMap(treeData);

制图

1、要重命名的树数据模型所需的字段- ，，children -传递一个映射对象到anychart.data.tree（）当您创建一个数据树的构造。parentid

如果将数据设置为树或表，请将映射作为第四个参数传递。请注意，第三个应设置为null–仅与CSV数据一起使用以指定CSV设置。CSV数据的映射应作为第二个参数传递。

之后，将数据树传递给图表构造函数或图表的data（）方法。

// create a data treevar treeData = anychart.data.tree(data, "as-tree", null, {children: "child_items"});// create a chartchart = anychart.ganttProject();// set the datachart.data(treeData);

2、如果需要重命名其他字段，请通过将映射对象传递到数据树的mapAs方法来创建映射。然后将映射传递给图表构造函数或图表的data（）方法。

// create a data treevar treeData = anychart.data.tree(data, "as-tree");// map the datavar mapping = treeData.mapAs({actualStart: "start_date", actualEnd: "end_date"});// create a chartchart = anychart.ganttProject();// set the datachart.data(mapping);

可以在下面的示例中同时使用这两种映射数据的方式。

在这里，数据被设置为树。该anychart.data.tree（）构造函数的自定义字段映射child_items作为children由树的数据模型所需的字段。该一举成名方法映射start_date和end_date作为actualStart和actualEnd由甘特图必需的：

// create datavar data = [  {    id: "1",    name: "Root",    start_date: "2018-01-15",    end_date: "2018-03-10",    child_items: [      {        id: "1_1",        name: "Child 1",        start_date: "2018-01-15",        end_date: "2018-01-25"      },      {        id: "1_2",        name: "Child 2",        start_date: "2018-01-20",        end_date: "2018-02-04"      },      {        id: "1_3",        name: "Child 3",        start_date: "2018-02-05",        end_date: "2018-02-05"      },      {        id: "1_4",        name: "Child 4",        start_date: "2018-02-05",        end_date: "2018-02-24"      },      {        id: "1_5",        name: "Child 5",        start_date: "2018-02-25",        end_date: "2018-03-10"      }  ]}];// create a data treevar treeData = anychart.data.tree(data, "as-tree", null, {children: "child_items"});// map the datavar mapping = treeData.mapAs({actualStart: "start_date", actualEnd: "end_date"});// create a chartchart = anychart.ganttProject();// set the datachart.data(mapping);

访问项目

AnyChart中的数据项被定义为anychart.data.Tree.DataItem类的实例。如果您需要访问它们，则可以搜索它们或调用特殊方法。

要在根级别访问项目，请使用anychart.data.Tree的以下方法：

• getChildAt（） –返回具有给定索引的根项目

• getChildren（） –返回根项目数组

• numChildren（） –返回根数

• indexOfChild（） –返回给定项目的索引（如果是根则返回-1）

要更深入一点，请使用anychart.data.Tree.DataItem的方法：

• getChildAt（） -返回具有给定索引的项的子项

• getChildren（） -返回包含项的所有子项的数组

• numChildren（） -返回项目的子代数

• getParent（） -返回项目的父项

阅读

您可以使用给定名称读取项目的数据字段的值：访问anychart.data.Tree.DataItem的实例并使用get（）方法。

在下面的示例中，此方法用于显示图表标题中的最后一个子项的名称：

// get the name of the last childvar lastChild = treeData.getChildAt(0).getChildren().length - 1;var lastChildName = treeData.getChildAt(0).getChildAt(lastChild).get("name");

新增中

您可以将根项目添加到数据中：在anychart.data.Tree实例上调用addChild（）或addChildAt（）方法。请注意，第二种方法添加具有给定索引的项目。

要将子元素添加到数据项，请访问anychart.data.Tree.DataItem的实例，并在其上调用addChild（）或addChildAt（）：

// add a new data itemtreeData.getChildAt(0).addChild({"name": "New Child", "value": 10000000});

您还可以使用addData（）方法一次添加多个根项目：

//create new datavar newData = [  {"name": "New Node 1", "value": 10000000},  {"name": "New Node 2", "value": 10000000}];// add new datatreeData.addData(newData, "as-tree");

注意： “树图”图表上只能显示一个根元素，因此尽管仍会更新数据，但是使用此方法不会更改树图的外观。

这是一个森伯斯特图表，其中的按钮一次添加两个根节点：

更新中

要更新项目的数据字段，请访问anychart.data.Tree.DataItem的实例并调用set（）。使用字段名称和新值作为参数：

// update the first childtreeData.getChildAt(0).getChildAt(0).set("name", "New Name");treeData.getChildAt(0).getChildAt(0).set("value", 120000000);treeData.getChildAt(0).getChildAt(0).set("fill", "#00bfa5");

删除

要从数据中删除根项，请在anychart.data.Tree实例上调用以下方法之一：

• removeChild（） -删除根

• removeChildAt（） -删除具有给定索引的根

• removeChildren（） -删除所有根

要删除数据项的子项，请访问anychart.data.Tree.DataItem的实例并调用以下方法之一：

• removeChild（） -删除一个子项

• removeChildAt（） -删除具有给定索引的子级

• removeChildren（） -删除所有子项

在此示例中，每次按下按钮时，都会删除根项目的当前最后一个子项：

var lastChild = treeData.getChildAt(0).getChildren().length - 1;treeData.getChildAt(0).removeChildAt(lastChild);

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

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

标签：