📅 最后修改于: 2023-12-03 14:43:28.321000 🧑 作者: Mango
jqxTreeMap是一种可视化的层次结构数据结构，将数据按照层次结构进行展示，更易于用户查看和理解。source属性是该组件中的一个重要属性，本篇介绍该属性的作用、使用方法以及示例代码。
source属性是数据源，用于指定数据的来源。通过source属性，用户可以将自己的数据结构转化成层次结构展示。source属性的格式如下：
source:
{
datafields: [],
hierarchy:
{
keyDataField: "",
parentDataField: ""
},
localdata: []
}
其中，datafields定义数据域，hierarchy定义层次结构，localdata定义数据集。
假设我们有如下数据：
property type rent
- education 200
- tourism 500
- transportation 150
- culture 100
-education university 50
-education primary school 40
-tourism park 200
-tourism resort 300
-transportation highway 100
-transportation airport 50
-culture theater 50
-culture museum 50
我们可以将其转化为层次结构数据，然后通过jqxTreeMap进行展示。具体方法如下：
source.datafields = [
{ name: 'property', type: 'string' },
{ name: 'type', type: 'string' },
{ name: 'rent', type: 'number' }
];
source.hierarchy = {
keyDataField: { name: 'property' },
parentDataField: { name: 'parent' }
};
source.localdata = [
{ property: "-", type: "education", rent: 200 },
{ property: "-", type: "tourism", rent: 500 },
{ property: "-", type: "transportation", rent: 150 },
{ property: "-", type: "culture", rent: 100 },
{ property: "education", type: "university", rent: 50 },
{ property: "education", type: "primary school", rent: 40 },
{ property: "tourism", type: "park", rent: 200 },
{ property: "tourism", type: "resort", rent: 300 },
{ property: "transportation", type: "highway", rent: 100 },
{ property: "transportation", type: "airport", rent: 50 },
{ property: "culture", type: "theater", rent: 50 },
{ property: "culture", type: "museum", rent: 50 }
];
$("#jqxTreeMap").jqxTreeMap({
source: source,
width: 600,
height: 400,
baseColorScheme: 'scheme05',
showLegend: true,
legendLabel: 'Type',
legendPosition: 'bottom'
});
完整代码片段如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqxtreemap.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var source = {
datafields: [
{ name: 'property', type: 'string' },
{ name: 'type', type: 'string' },
{ name: 'rent', type: 'number' }
],
hierarchy: {
keyDataField: { name: 'property' },
parentDataField: { name: 'parent' }
},
localdata: [
{ property: "-", type: "education", rent: 200 },
{ property: "-", type: "tourism", rent: 500 },
{ property: "-", type: "transportation", rent: 150 },
{ property: "-", type: "culture", rent: 100 },
{ property: "education", type: "university", rent: 50 },
{ property: "education", type: "primary school", rent: 40 },
{ property: "tourism", type: "park", rent: 200 },
{ property: "tourism", type: "resort", rent: 300 },
{ property: "transportation", type: "highway", rent: 100 },
{ property: "transportation", type: "airport", rent: 50 },
{ property: "culture", type: "theater", rent: 50 },
{ property: "culture", type: "museum", rent: 50 }
]
};
$("#jqxTreeMap").jqxTreeMap({
source: source,
width: 600,
height: 400,
baseColorScheme: 'scheme05',
showLegend: true,
legendLabel: 'Type',
legendPosition: 'bottom'
});
});
</script>
</head>
<body>
<div id="jqxTreeMap"></div>
</body>
</html>
完整的示例代码包含HTML、CSS和JavaScript代码。其中，HTML文件包含一个jqxTreeMap的容器；CSS文件定义了jqxTreeMap容器的样式；JavaScript代码通过source属性将数据源传递给jqxTreeMap，实现数据展示。
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqxtreemap.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var source = {
datafields: [
{ name: 'property', type: 'string' },
{ name: 'type', type: 'string' },
{ name: 'rent', type: 'number' }
],
hierarchy: {
keyDataField: { name: 'property' },
parentDataField: { name: 'parent' }
},
localdata: [
{ property: "-", type: "education", rent: 200 },
{ property: "-", type: "tourism", rent: 500 },
{ property: "-", type: "transportation", rent: 150 },
{ property: "-", type: "culture", rent: 100 },
{ property: "education", type: "university", rent: 50 },
{ property: "education", type: "primary school", rent: 40 },
{ property: "tourism", type: "park", rent: 200 },
{ property: "tourism", type: "resort", rent: 300 },
{ property: "transportation", type: "highway", rent: 100 },
{ property: "transportation", type: "airport", rent: 50 },
{ property: "culture", type: "theater", rent: 50 },
{ property: "culture", type: "museum", rent: 50 }
]
};
$("#jqxTreeMap").jqxTreeMap({
source: source,
width: 600,
height: 400,
baseColorScheme: 'scheme05',
showLegend: true,
legendLabel: 'Type',
legendPosition: 'bottom'
});
});
</script>
</head>
<body>
<div id="jqxTreeMap"></div>
</body>
</html>
CSS代码：
#jqxTreeMap {
margin: 30px;
border: 1px solid #ccc;
}
JavaScript代码：
var source = {
datafields: [
{ name: 'property', type: 'string' },
{ name: 'type', type: 'string' },
{ name: 'rent', type: 'number' }
],
hierarchy: {
keyDataField: { name: 'property' },
parentDataField: { name: 'parent' }
},
localdata: [
{ property: "-", type: "education", rent: 200 },
{ property: "-", type: "tourism", rent: 500 },
{ property: "-", type: "transportation", rent: 150 },
{ property: "-", type: "culture", rent: 100 },
{ property: "education", type: "university", rent: 50 },
{ property: "education", type: "primary school", rent: 40 },
{ property: "tourism", type: "park", rent: 200 },
{ property: "tourism", type: "resort", rent: 300 },
{ property: "transportation", type: "highway", rent: 100 },
{ property: "transportation", type: "airport", rent: 50 },
{ property: "culture", type: "theater", rent: 50 },
{ property: "culture", type: "museum", rent: 50 }
]
};
$("#jqxTreeMap").jqxTreeMap({
source: source,
width: 600,
height: 400,
baseColorScheme: 'scheme05',
showLegend: true,
legendLabel: 'Type',
legendPosition: 'bottom'
});
以上是关于jQWidgets jqxTreeMap的source属性的介绍，更多详细内容请参考官方文档。