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 propiedad legendPosition se usa para configurar u obtener la posición de la leyenda para el jqxTreeMap especificado. En esta propiedad, x es para el desplazamiento X de la Leyenda desde el lado izquierdo del jqxTreeMap especificado e y es para el desplazamiento Y de la Leyenda desde el lado inferior del jqxTreeMap especificado.
Sintaxis:
Para configurar la propiedad legendPosition :
$("#jqxTreeMap").jqxTreeMap({legendPosition: {x: 25, y: 25}});
Para obtener la propiedad legendPosition :
var baseColor = $('#jqxTreeMap').jqxTreeMap('legendPosition');
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>
<script type=”text /javascript” src=”scripts/jqx-all.js”></script>
Ejemplo: El siguiente ejemplo ilustra la propiedad jQWidgets jqxTreeMap legendPosition . En el siguiente ejemplo, el valor de la propiedad legendPosition se ha establecido en {x: 25, y: 25}.
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>
<script type="text/javascript"
src="scripts/jqx-all.js">
</script>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
jQWidgets jqxTreeMap legendPosition 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,
colorMode: 'autoColors',
legendLabel: "TreeMap",
legendPosition: {x: 25, y: 25}
});
});
</script>
</center>
</body>
</html>
Producción:
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