AnyGantt是基于JavaScript的高級(jí)解決方案，用于構(gòu)建復(fù)雜且信息豐富的甘特圖。它完全跨瀏覽器和跨平臺(tái)，可用于ASP.NET、ASP、PHP、JSP、ColdFusion、Ruby on Rails或簡(jiǎn)單的HTML頁(yè)面。

點(diǎn)擊下載AnyGantt正式版

總覽

樹形圖是一種可視化視圖，它以分層的一組矩形顯示分層組織的數(shù)據(jù)，父元素與其子元素平鋪。矩形的大小和顏色與它們表示的數(shù)據(jù)點(diǎn)的值成比例。

本文介紹了如何在AnyChart中創(chuàng)建基本的Treemap圖表以及配置特定于該類型的設(shè)置。您還可以查看下表以簡(jiǎn)要了解樹圖圖表的特征：

樹狀圖需要添加Core和Treemap模塊：

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

快速開始

要?jiǎng)?chuàng)建Treemap圖表，請(qǐng)使用anychart.treeMap（）圖表構(gòu)造函數(shù)。

在下面的示例中，有一個(gè)基本的樹形圖，按人口數(shù)對(duì)前10個(gè)人口最多的歐盟國(guó)家進(jìn)行了比較：

// create data
var 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 data
chart = anychart.treeMap(data, "as-tree");

// set the container id
chart.container("container");

// initiate drawing the chart
chart.draw();

在AnyChart中，為所有圖表類型（包括樹形圖）以相同的方式配置了許多設(shè)置（例如，圖例和交互設(shè)置）。

數(shù)據(jù)

樹狀圖需要樹數(shù)據(jù)模型。使用以下字段：

• id 設(shè)置唯一標(biāo)識(shí)符
• parent 設(shè)置父母
• children 安置孩子
• name 設(shè)置名稱
• size 設(shè)定尺寸
• value 設(shè)定值

瓷磚的顏色和大小代表該value領(lǐng)域。另外，大小可以表示一個(gè)可選size字段，因此將其添加到數(shù)據(jù)中可以顯示兩個(gè)不同的參數(shù)，而不是一個(gè)。

請(qǐng)注意：您無需指定父元素的值和大小-它們是自動(dòng)計(jì)算的。還要注意，圖塊按值排序，但是如果添加該size字段，則它們按大小排序。

在下面的樹形圖圖表上，每個(gè)圖塊的大小代表一個(gè)國(guó)家的人口（size），顏色代表人口密度（value）：

// create data
var 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 data
chart = anychart.treeMap(data, "as-tree");

您可以指定在圖表上同時(shí)顯示多少層次結(jié)構(gòu)：使用maxDepth（）方法。

用此方法顯示的所有元素都是交互式的，并且它們的父級(jí)可視為headers。默認(rèn)值為1，這意味著用戶一次只能看到其父級(jí)的一個(gè)級(jí)別，而較低的級(jí)別則被隱藏。

所述hintDepth（）方法設(shè)置提示的深度-指示隱藏水平的元素線。用這種方法顯示的元素不是交互的；默認(rèn)值為0，表示禁用提示。

要設(shè)置提示的不透明度，請(qǐng)使用hintOpacity（）。

以下示例演示了如何配置所顯示級(jí)別的深度以及提示的深度和不透明度：

// set the maximum depth of levels shown
chart.maxDepth(2);

// set the depth of hints
chart.hintDepth(1);

// set the opacity of hints
chart.hintOpacity(0.7);  

默認(rèn)情況下，Treemap的圖塊將根據(jù)其值以降序排序。您可以按升序?qū)λ鼈冞M(jìn)行排序或禁用排序。

要設(shè)置排序方式，請(qǐng)使用anychart.enums.Sort中列出的參數(shù)之一調(diào)用sort（）方法：

• "desc" （默認(rèn)）
• "asc"
• "none"

下面的示例顯示如何設(shè)置排序模式：

// set the sorting mode
chart.sort("asc");

所有積分
樹狀圖的外觀設(shè)置可以配置為三種狀態(tài)：正常，懸停和選擇。使用normal（），hovered（）和selected（）方法。

將它們與以下方法結(jié)合：

• fill（）設(shè)置填充
• hatchFill（）設(shè)置填充圖案
• stroke（）設(shè)置筆劃

在此示例中，有一個(gè)配置了外觀設(shè)置的樹圖圖表：

// configure the visual settings of the chart
chart.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);

可以單獨(dú)配置每個(gè)圖塊的外觀-使用與上述方法相對(duì)應(yīng)的額外數(shù)據(jù)字段：

// create data
var 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 data
chart = anychart.treeMap(data, "as-tree");

本教程未完待續(xù)，感興趣的朋友可以下載AnyGantt試用版免費(fèi)體驗(yàn)哦~更多產(chǎn)品信息請(qǐng)咨詢

APS是慧都科技15年行業(yè)經(jīng)驗(yàn)以及技術(shù)沉淀之作，通過連接企業(yè)接單、采購(gòu)、制造、倉(cāng)儲(chǔ)物流等整個(gè)供應(yīng)鏈流程，幫助提升企業(yè)生產(chǎn)效率。