国家  china

Wijmo下的TreeMap

概述

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

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

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

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

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

image

那很多同学很想知道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;
}

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

image

TreeMap最大的好处就是我们得到的是已排好序的结果。TreeMap是含有subMap()方法的唯一一种Map,利用它可以返回树的一部分。

更多信息请参照:

Wijmo产品网站:http://wijmo.gcpowertools.com.cn/products/wijmo-5/

Wijmo中文文档:http://wijmo.gcpowertools.com.cn/5/docs/

Wijmo中文学习教程:http://demo.gcpowertools.com.cn/wijmo5/learningwijmo/

转载声明:
欢迎将本站文章进行转载、演绎或用于商业目的,转载时请注明以下信息
文章转自:葡萄城控件产品博客,http://blog.gcpowertools.com.cn
原文地址:http://blog.gcpowertools.com.cn/post/Wijmo_TreeMap.aspx

不允许评论