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

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

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

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

AnyChart最新试用版

树形图数据模型

总览

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

在以下图表类型中使用它：

• Gantt

• Treemap

• Sunburst

• Word Tree

类

这是允许您在AnyChart中使用树数据的类的列表：

• tree – anychart.data.Tree

• item – anychart.data.Tree.DataItem

• traverser – anychart.data.Traverser

快速开始

要使用树状数据创建图表，请通过将数据作为第二个参数传递给anychart.data.tree（）方法来创建数据树”as-tree”。然后将树传递给图表构造函数：

// create datavar data = [  {name:   "Root", children: [    {name:   "Child 1", value: 65511098},    {name:   "Child 2", value: 64938716},    {name:   "Child 3", value: 59797978},    {name:   "Child 4", value: 46070146}  ]}];// create a data treevar treeData = anychart.data.tree(data, "as-tree");// create a chart and set the datavar chart = anychart.treeMap(treeData);// set the container idtreemap.container("container");// initiate drawing the charttreemap.draw();

下面的示例演示如何使用相同的树状数据创建不同的图表类型：

设定数据

Anychart中的树数据结构定义为anychart.data.Tree类的实例，数据项定义为anychart.data.Tree.DataItem的实例。

要基于树状数据创建图表，您应该将数据组织为树状或表状。另外，您可以使用CSV字符串（另请参见：CSV中的数据）。然后，该数据由组件处理，并创建anychart.data.Tree的实例。

1、创建数据树。第一步是使用或作为第二个参数将数据传递到anychart.data.tree（）方法：”as-tree””as-table”

var treeData = anychart.data.tree(data, "as-tree");var treeData = anychart.data.tree(data, "as-table");

如果您的数据是CSV字符串，则应传递CSV映射对象作为第二个参数。在CSV字符串部分中了解更多信息。

2、创建图表。然后将此方法创建的anychart.data.Tree类的实例传递给图表构造函数：

var chart = anychart.treeMap(treeData);

您也可以跳过第一步，也可以使用or 参数将数据传递到图表的data（）方法或直接传递到图表构造函数。在这种情况下，anychart.data.tree（）的实例是隐式创建的（要获取它，请使用图表的data（）方法）。”as-tree””as-table”

3、数据字段。数据字段的选择取决于图表类型以及数据的结构方式。如果数据以树的形式组织，children则始终需要该字段。如果组织为表或CSV字符串，id并且parent是必需的-它们被用于指定元素的层次结构。

注1：要了解如何重新命名树的数据模型（默认的领域children，parent，id）或地图自定义字段，请参阅映射部分。

注2：甘特图id始终需要该字段。

作为树形图

如果将数据组织为一棵树，则每个父项都应具有一个children数据字段，在其中指定子项数组。

// create datavar data = [  {name:     "Root", children: [    {name:   "Parent 1", children: [      {name: "Child 1-1", value: 150000000},      {name: "Child 1-2", value:  45000000},      {name: "Child 1-3", value:   3200000}    ]},    {name:   "Parent 2", children: [      {name: "Child 2-1", value:  55000000},      {name: "Child 2-2", value:  10600000},      {name: "Child 2-3", value:   5200000}    ]},    {name:   "Parent 3", children: [      {name: "Child 3-1", value:  21000000},      {name: "Child 3-2", value:   9000000}    ]}    ]} ];// create a data treetreeData = anychart.data.tree(data, "as-tree");// create a chart and set the datavar chart = anychart.treeMap(treeData);

表格

如果将数据组织为表格，则在parent每个项目的字段中，应指定id其父项的值。根项目的父项应设置为null或不指定。

// create datavar data = [  {id:  1, parent: null, name: "Root"},  {id:  2, parent:    1, name: "Parent 1"},  {id:  3, parent:    2, name: "Child 1-1", value: 150000000},  {id:  4, parent:    2, name: "Child 1-2", value:  45000000},  {id:  5, parent:    2, name: "Child 1-3", value:   3200000},  {id:  6, parent:    1, name: "Parent 2"},  {id:  7, parent:    6, name: "Child 2-1", value:  55000000},  {id:  8, parent:    6, name: "Child 2-2", value:  10600000},  {id:  9, parent:    6, name: "Child 2-3", value:   5200000},  {id: 10, parent:    1, name: "Parent 3"},  {id: 11, parent:   10, name: "Child 3-1", value:  21000000},  {id: 12, parent:   10, name: "Child 3-2", value:   9000000}];// create a data treetreeData = anychart.data.tree(data, "as-table");// create a chart and set the datavar chart = anychart.treeMap(treeData);

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

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

标签：