如何使用AnyGantt创建树状图（一）

本文介绍了如何在AnyChart中创建基本的Treemap图表以及配置特定于该类型的设置。

AnyGantt是基于JavaScript的高级解决方案，用于构建复杂且信息丰富的甘特图。它完全跨浏览器和跨平台，可用于ASP.NET、ASP、PHP、JSP、ColdFusion、Ruby on Rails或简单的HTML页面。

AnyGantt正式版

总览

树形图是一种可视化视图，它以分层的一组矩形显示分层组织的数据，父元素与其子元素平铺。矩形的大小和颜色与它们表示的数据点的值成比例。

本文介绍了如何在AnyChart中创建基本的Treemap图表以及配置特定于该类型的设置。您还可以查看下表以简要了解树图图表的特征：

树状图需要添加Core和Treemap模块：

<script src=”https://cdn.anychart.com/releases/8.7.1/js/anychart-core.min.js”></script>
<script src=”https://cdn.anychart.com/releases/8.7.1/js/anychart-treemap.min.js”></script>

快速开始

要创建Treemap图表，请使用anychart.treeMap（）图表构造函数。

在下面的示例中，有一个基本的树形图，按人口数对前10个人口最多的欧盟国家进行了比较：

// create datavar data = [  {name:   "European Union - Top 10 Most Populated Countries", children: [    {name: "Belgium",        value: 11443830},    {name: "France",         value: 64938716},    {name: "Germany",        value: 80636124},    {name: "Greece",         value: 10892931},    {name: "Italy",          value: 59797978},    {name: "Netherlands",    value: 17032845},    {name: "Poland",         value: 38563573},    {name: "Romania",        value: 19237513},    {name: "Spain",          value: 46070146},    {name: "United Kingdom", value: 65511098}   ]}];// create a chart and set the datachart = anychart.treeMap(data, "as-tree");// set the container idchart.container("container");// initiate drawing the chartchart.draw();

常规设置

在AnyChart中，为所有图表类型（包括树形图）以相同的方式配置了许多设置（例如，图例和交互设置）。

数据

树状图需要树数据模型。使用以下字段：

• id 设置唯一标识符
• parent 设置父母
• children 安置孩子
• name 设置名称
• size 设定尺寸
• value 设定值

注意1：可以向数据中添加自定义字段-请参见本文的“ 标签和工具提示”部分。
注意2：树形图图表只能有一个根元素。

瓷砖的颜色和大小代表该value领域。另外，大小可以表示一个可选size字段，因此将其添加到数据中可以显示两个不同的参数，而不是一个。

请注意：您无需指定父元素的值和大小-它们是自动计算的。还要注意，图块按值排序，但是如果添加该size字段，则它们按大小排序。

在下面的树形图图表上，每个图块的大小代表一个国家的人口（size），颜色代表人口密度（value）：

// create datavar data = [  {name:   "EU - Population Density in Top 10 Most Populated Countries", children: [    {name: "Belgium",        size: 11443830, value: 378},    {name: "France",         size: 64938716, value: 119},    {name: "Germany",        size: 80636124, value: 231},    {name: "Greece",         size: 10892931, value:  85},    {name: "Italy",          size: 59797978, value: 203},    {name: "Netherlands",    size: 17032845, value: 505},    {name: "Poland",         size: 38563573, value: 126},    {name: "Romania",        size: 19237513, value:  84},    {name: "Spain",          size: 46070146, value:  92},    {name: "United Kingdom", size: 65511098, value: 271}   ]}];// create a chart and set the datachart = anychart.treeMap(data, "as-tree");

深度和提示

您可以指定在图表上同时显示多少层次结构：使用maxDepth（）方法。

用此方法显示的所有元素都是交互式的，并且它们的父级可视为headers。默认值为1，这意味着用户一次只能看到其父级的一个级别，而较低的级别则被隐藏。

所述hintDepth（）方法设置提示的深度-指示隐藏水平的元素线。用这种方法显示的元素不是交互的；默认值为0，表示禁用提示。

要设置提示的不透明度，请使用hintOpacity（）。

以下示例演示了如何配置所显示级别的深度以及提示的深度和不透明度：

// set the maximum depth of levels shownchart.maxDepth(2);// set the depth of hintschart.hintDepth(1);// set the opacity of hintschart.hintOpacity(0.7);  

排序顺序

默认情况下，Treemap的图块将根据其值以降序排序。您可以按升序对它们进行排序或禁用排序。

要设置排序方式，请使用anychart.enums.Sort中列出的参数之一调用sort（）方法：

• “desc” （默认）
• “asc”
• “none”

注意：如果将size字段添加到数据中，则图块将按大小而不是值进行排序。如果禁用排序，则切片将根据它们在数据中出现的顺序进行排列。

下面的示例显示如何设置排序模式：

// set the sorting modechart.sort("asc");

出现

所有积分
树状图的外观设置可以配置为三种状态：正常，悬停和选择。使用normal（），hovered（）和selected（）方法。

将它们与以下方法结合：

• fill（）设置填充
• hatchFill（）设置填充图案
• stroke（）设置笔划

另外，您可以使用anychart.core.StateSettings中的其他方法。

在此示例中，有一个配置了外观设置的树图图表：

// configure the visual settings of the chartchart.hovered().fill("gray", 0.4);chart.selected().fill("gray", 0.6);chart.selected().hatchFill("forward-diagonal", "gray", 2, 20);chart.normal().stroke("gray");chart.hovered().stroke("gray");chart.selected().stroke("gray", 2);

个人积分

可以单独配置每个图块的外观-使用与上述方法相对应的额外数据字段：

// create datavar data = [  {name:   "European Union", children: [    {name: "Belgium",        value: 11443830, fill: "#ffcc00"},    {name: "France",         value: 64938716, fill: "#ff6600"},    {name: "Greece",         value: 10892931, fill: "#ffcc00"},    {name: "Italy",          value: 59797978, fill: "#ff6600"},    {name: "Netherlands",    value: 17032845, fill: "#ffcc00"},    {name: "Poland",         value: 38563573, fill: "#ff9933"},    {name: "Romania",        value: 19237513, fill: "#ffcc00"},    {name: "Spain",          value: 46070146, fill: "#ff9933"},    {name: "United Kingdom", value: 65511098, fill: "#ff6600"},    {name: "Germany",        value: 80636124,     normal:   {fill: "#ff0000", stroke: "4 #b30059"},     hovered:  {fill: "#ff0000", stroke: "5 white"},     selected: {fill: "#b30059", stroke: "5 white"}    }  ]}];// create a chart and set the datachart = anychart.treeMap(data, "as-tree");

本教程未完待续，感兴趣的朋友可以下载AnyGantt试用版免费体验哦~更多产品信息请咨询【在线客服】>>>

APS是科技15年行业经验以及技术沉淀之作，通过连接企业接单、采购、制造、仓储物流等整个供应链流程，帮助提升企业生产效率。

想要购买AnyGantt正版授权，或了解更多产品信息请点击【咨询在线客服】
标签：

来源：慧都