jQWidgets jqxTreeMap theme属性

jQWidgets是一个jQuery插件库，其中包含了各种UI组件和数据可视化组件。其中的jqxTreeMap组件是一个矩形树状图，可以用于展示有层次结构的数据，并根据数据大小自动分配矩形大小及颜色。

在jqxTreeMap中，可以通过theme属性来设置矩形树状图的样式主题。theme属性有以下取值：

• classic：经典主题，使用黑色背景及白色字体，矩形以蓝色为主色调。
• default：默认主题，使用灰色背景及黑色字体，矩形以深蓝色为主色调。
• energyblue：蓝色能量主题，使用蓝色背景及白色字体，矩形以蓝色为主色调。
• darkblue：暗蓝主题，使用深蓝色背景及白色字体，矩形以深蓝色为主色调。

使用theme属性只需要在创建jqxTreeMap实例时传入相应的值即可。下面是两个示例说明：

示例一：

在html文件中添加以下代码：

<div id="jqxTreeMapContainer"></div>

在js文件中添加以下代码：

$(function () {
    var data = [
        { "ID": "1", "ParentID": null, "Value": 20, "Color": "#F1C232", "Name": "Products for Sale" },
        { "ID": "2", "ParentID": "1", "Value": 10, "Color": "#F1C232", "Name": "Vehicles" },
        { "ID": "3", "ParentID": "1", "Value": 10, "Color": "#F1C232", "Name": "Other Products" },
        { "ID": "4", "ParentID": "2", "Value": 8, "Color": "#FFD700", "Name": "Cars" },
        { "ID": "5", "ParentID": "2", "Value": 2, "Color": "#FFD700", "Name": "Bikes" },
        { "ID": "6", "ParentID": "3", "Value": 7, "Color": "#9FC5E8", "Name": "Books" },
        { "ID": "7", "ParentID": "3", "Value": 2, "Color": "#9FC5E8", "Name": "Electronics" },
        { "ID": "8", "ParentID": "3", "Value": 1, "Color": "#9FC5E8", "Name": "Accessories" }
    ];
    $("#jqxTreeMapContainer").jqxTreeMap({
        width: 800,
        height: 600,
        source: data,
        theme: "classic"
    });
});

说明：

上述代码中，定义了一个id为jqxTreeMapContainer的div元素。在js代码中，首先定义了一个数据data，表示矩形树图中的各个节点及其数据。然后在div元素上创建了一个jqxTreeMap实例，并传入相应的参数，其中设置了宽度、高度、数据源及样式主题为classic。

示例二：

在html文件中添加以下代码：

<div id="jqxTreeMapContainer"></div>

在js文件中添加以下代码：

$(function () {
    var data = [
        { "ID": "1", "ParentID": null, "Value": 20, "Color": "#F1C232", "Name": "Products for Sale" },
        { "ID": "2", "ParentID": "1", "Value": 10, "Color": "#F1C232", "Name": "Vehicles" },
        { "ID": "3", "ParentID": "1", "Value": 10, "Color": "#F1C232", "Name": "Other Products" },
        { "ID": "4", "ParentID": "2", "Value": 8, "Color": "#FFD700", "Name": "Cars" },
        { "ID": "5", "ParentID": "2", "Value": 2, "Color": "#FFD700", "Name": "Bikes" },
        { "ID": "6", "ParentID": "3", "Value": 7, "Color": "#9FC5E8", "Name": "Books" },
        { "ID": "7", "ParentID": "3", "Value": 2, "Color": "#9FC5E8", "Name": "Electronics" },
        { "ID": "8", "ParentID": "3", "Value": 1, "Color": "#9FC5E8", "Name": "Accessories" }
    ];
    $("#jqxTreeMapContainer").jqxTreeMap({
        width: 800,
        height: 600,
        source: data,
        theme: "energyblue"
    });
});

说明：

上述代码与示例一类似，唯一不同的地方是设置了样式主题为energyblue。此时的矩形树状图颜色变为了蓝色，并且背景变成了蓝色。