AnyGantt是基于JavaScript的高級解決方案，用于構建復雜且信息豐富的甘特圖。它完全跨瀏覽器和跨平臺，可用于ASP.NET、ASP、PHP、JSP、ColdFusion、Ruby on Rails或簡單的HTML頁面。

點擊下載AnyGantt正式版

總覽

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

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

樹狀圖需要添加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>

快速開始

要創建Treemap圖表，請使用anychart.treeMap（）圖表構造函數。

在下面的示例中，有一個基本的樹形圖，按人口數對前10個人口最多的歐盟國家進行了比較：

// 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中，為所有圖表類型（包括樹形圖）以相同的方式配置了許多設置（例如，圖例和交互設置）。

數據

樹狀圖需要樹數據模型。使用以下字段：

• id 設置唯一標識符
• parent 設置父母
• children 安置孩子
• name 設置名稱
• size 設定尺寸
• value 設定值

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

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

在下面的樹形圖圖表上，每個圖塊的大小代表一個國家的人口（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");

您可以指定在圖表上同時顯示多少層次結構：使用maxDepth（）方法。

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

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

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

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

// 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);  

默認情況下，Treemap的圖塊將根據其值以降序排序。您可以按升序對它們進行排序或禁用排序。

要設置排序方式，請使用anychart.enums.Sort中列出的參數之一調用sort（）方法：

• "desc" （默認）
• "asc"
• "none"

下面的示例顯示如何設置排序模式：

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

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

將它們與以下方法結合：

• fill（）設置填充
• hatchFill（）設置填充圖案
• stroke（）設置筆劃

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

// 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);

可以單獨配置每個圖塊的外觀-使用與上述方法相對應的額外數據字段：

// 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");

本教程未完待續，感興趣的朋友可以下載AnyGantt試用版免費體驗哦~更多產品信息請咨詢

APS是慧都科技15年行業經驗以及技術沉淀之作，通過連接企業接單、采購、制造、倉儲物流等整個供應鏈流程，幫助提升企業生產效率。