jQWidgets es un marco de JavaScript para crear aplicaciones basadas en web para PC y dispositivos móviles. Es un marco muy potente, optimizado, independiente de la plataforma y ampliamente compatible. El jqxTreeMap se usa para mostrar el conjunto de datos jerárquicos de rectángulos anidados. Aquí, todas y cada una de las ramas del árbol se representan como un rectángulo, que luego se tesela con rectángulos más pequeños que representan subramas. Aquí, el rectángulo del Node hoja tiene un área proporcional a una dimensión específica de los datos.
La altura del encabezadoLa propiedad se usa para establecer u obtener la altura del encabezado del sector principal del jqxTreeMap especificado . Esta propiedad acepta valores numéricos.
Sintaxis:
-
Para configurar la propiedad headerHeight :
$('#jqxTreeMap').jqxTreeMap({ headerHeight: 23 }); -
Para obtener la propiedad headerHeight :
var headerHeight = $('#jqxTreeMap').jqxTreeMap('headerHeight');
Archivos vinculados: descargue jQWidgets desde el enlace dado. En el archivo HTML, busque los archivos de script en la carpeta descargada.
<link rel=”hoja de estilo” 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>
Ejemplo: El siguiente ejemplo ilustra la propiedad jQWidgets jqxTreeMap headerHeight . En el siguiente ejemplo, el valor de la propiedad headerHeight se ha establecido en 23.
HTML
<!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>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
jQWidgets jqxTreeMap headerHeight Property
</h3>
<div id="Tree_Map"></div>
<input type="button" style="margin: 28px;"
id="button_for_headerHeight"
value="Value of the headerHeight property"/>
<div id="log"></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: 100,
source: Data_of_TreeMap,
headerHeight: 23
});
$("#button_for_headerHeight").jqxButton({
width: 250
});
$("#button_for_headerHeight").click(
function () {
var headerHeight_Value =
$('#Tree_Map').
jqxTreeMap('headerHeight');
$("#log").html((
headerHeight_Value));
});
});
</script>
</center>
</body>
</html>
Producción:
Referencia: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxtreemap/jquery-treemap-api.htm
Publicación traducida automáticamente
Artículo escrito por Kanchan_Ray y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA