jQWidgets jqxTreeMap源属性

jQWidgets是一个JavaScript框架，用于为PC和移动设备制作基于网络的应用程序。它是一个非常强大的、优化的、与平台无关的、被广泛支持的框架。_jqxTreeMap 是用来显示嵌套矩形的分层数据集的。在这里，树的每一个分支都被表示为一个矩形，然后用代表子分支的更小的矩形来堆砌。这里，叶子节点的矩形的面积与数据的指定维度成正比。

source属性用于为指定的jqxTreeMap设置数据源。

语法:

用指定的源属性初始化一个jqxTreeMap。

var Data_of_TreeMap = [{
    label: 'GeeksforGeeks',
    value: 70,
    color: '#ff0300'
}, {
    label: 'is a',
    value: 10,
    parent: 'GeeksforGeeks',
    color: '#ff5400'
 }, {
     label: 'Computer Science',
     value: 30,
     parent: 'GeeksforGeeks',
     color: '#008000'
}, {
    label: 'Portal.',
    value: 15,
    parent: 'GeeksforGeeks',
    color: '#7fbf00'
}];

Linked Files: 从给定的链接中下载jQWidgets。在HTML文件中，找到下载文件夹中的脚本文件。

<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxtooltip.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxtreemap.js”></script>
<script type=”text/javascript” src=”scripts/gettheme.js”></script>
<script type=”text/javascript” src=”scripts/jqx-all.js”></script>

示例:

<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet" href="
jqwidgets/styles/jqx.base.css" type="text/css"/>
    <script type="text/javascript" 
            src="scripts/jquery.js">
    </script>
    <script type="text/javascript" 
            src="jqwidgets/jqxcore.js">
    </script>
    <script type="text/javascript" 
            src="jqwidgets/jqxtooltip.js">
    </script>
    <script type="text/javascript" 
            src="jqwidgets/jqxtreemap.js">
    </script>
    <script type="text/javascript" 
            src="scripts/gettheme.js">
    </script>
    <script type="text/javascript" 
            src="scripts/jqx-all.js">
    </script>
</head>
  
<body>
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <h3>
            jQWidgets jqxTreeMap source Property
        </h3>
        <div id="Tree_Map"></div>
        <script type="text/javascript">
             $(document).ready(function () {                 var Data_of_TreeMap = [{                     label: 'GeeksforGeeks',                     value: 70,                     color: '#ff0300'                 }, {                     label: 'is a',                     value: 10,                     parent: 'GeeksforGeeks',                     color: '#ff5400'                 }, {                     label: 'Computer Science',                     value: 30,                     parent: 'GeeksforGeeks',                     color: '#008000'                 }, {                     label: 'Portal.',                     value: 15,                     parent: 'GeeksforGeeks',                     color: '#7fbf00'                 }                 ];$ ('#Tree_Map').jqxTreeMap({
                    width: 390,
                    height: 200,
                    source: Data_of_TreeMap
                });
            });
        </script>
    </center>
</body>
  
</html>

输出:

jQWidgets jqxTreeMap源属性