概述

TreeMap是一个二叉树的数据结构；TreeMap不允许出现相同的键，TreeMap也称为红黑树又称红-黑二叉树，它首先是一颗二叉树，它具体二叉树所有的特性。同时红黑树更是一颗自平衡的排序二叉树。

下面我们粗略讲解下红黑树的原理：

红黑树又称红-黑二叉树，它首先是一颗二叉树，它具体二叉树所有的特性。同时红黑树更是一颗自平衡的排序二叉树。

我们知道一颗基本的二叉树他们都需要满足一个基本性质--即树中的任何节点的值大于它的左子节点，且小于它的右子节点。按照这个基本性质使得树的检索效率大大提高。我们知道在生成二叉树的过程是非常容易失衡的，最坏的情况就是一边倒（只有右/左子树），这样势必会导致二叉树的检索效率大大降低（O(n)），所以为了维持二叉树的平衡，大牛们提出了各种实现的算法，如：AVL，SBT，伸展树，TREAP ，红黑树等等。

平衡二叉树必须具备如下特性：它是一棵空树或它的左右两个子树的高度差的绝对值不超过1，并且左右两个子树都是一棵平衡二叉树。也就是说该二叉树的任何一个等等子节点，其左右子树的高度都相近。

那很多同学很想知道wijmo下的TreeMap是如何实现的。

以下是在JavaScript应用程序中开始使用TreeMap控件的步骤：

       1、添加对AngularJS，Wijmo和Wijmo的AngularJS指令的引用。
       2、在应用模块中包含Wijmo 5指令：
       3、var app = angular.module（'app'，['wj']）;
       4、添加一个控制器来提供数据和逻辑。
       5、将TreeMap添加到页面并将其绑定到数据。
       6、添加适当的CSS来定制树状图的外观。

Html:

<html>
<head>
    <link rel="stylesheet" href="css/bootstrap.css"/>
    <link rel="stylesheet" href="css/wijmo.css"/>
    <link href="css/app.css" rel="stylesheet"/>
    <script src="scripts/angular.js"></script>
    <script src="scripts/wijmo.js"></script>
    <script src="scripts/wijmo.chart.js"></script>
    <script src="scripts/wijmo.chart.hierarchical.js"></script>
    <script src="scripts/wijmo.angular.js"></script>
    <script src="scripts/app.js"></script>
</head>
<body ng-app="app" ng-controller="appCtrl">

<!-- this is the treemap -->
<wj-tree-map items-source="data" label-content="{name}" binding-name="bindingName" binding="sales">
</wj-tree-map>

</body>
</html>

Js:

// declare app module
var app = angular.module('app', ['wj']);
// app controller provides data
app.controller('appCtrl', function appCtrl($scope) {
    function rand() {
        return Math.round(Math.random() * 100);
    }
    // generate some random data
    var categories = ['Beverages', 'Condiments', 'Confections', 'Dairy Products', 'Grains/Cereals', 'Meat/Poultry', 'Produce', 'Seafood'],
        subCategories = [['Soft drinks', 'Coffees', 'Teas', 'Beers', 'Ales'], ['Sweet and Savory sauces', 'Relishes', 'Spreads', 'Seasonings'],
            ['Desserts', 'Candies', 'Sweet breads'], ['Chesses'], ['Breads', 'Crackers', 'Pasta', 'Cereal'], ['Prepared meats'], ['Dried fruit', 'Bean curd'], ['Seaweed', 'Fish']];

    function getData() {
        var data = [];

        categories.forEach(function (c, idx) {
            var sub = subCategories[idx];
            sub.forEach(function (s) {
                data.push({
                    category: c,
                    subCategory: s,
                    sales: rand()
                });
            });
        });
        return data;
    }
    // add data array to scope
    $scope.data = getData();
});

Css：

/* set default chart style */
.wj-treemap {
    height: 400px;
    background-color: white;
    box-shadow: 4px 4px 10px 0px rgba(50, 50, 50, 0.75);
    padding: 8px;
    margin-bottom: 12px;
}

这样我们的代码就完成了。运行程序如图效果，