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 colorMode se usa para establecer u obtener el comportamiento de representación del sector del jqxTreeMap especificado. Esta propiedad acepta tres posibles valores que se ilustran a continuación:
- padre: este modo se usa para que un sector hijo herede el color de su sector padre. Aquí el color varía según el valor del niño y la propiedad colorRange.
- autoColors: este modo es para la generación automática de colores según el color base, la propiedad colorRange y el valor.
- rangeColors: para este modo, el usuario puede establecer una array de gamas de colores. Aquí cada rango de color tiene propiedades como mínimo, máximo y color.
Sintaxis:
-
Para configurar la propiedad colorMode :
$("#jqxTreeMap").jqxTreeMap({colorMode: 'autoColors'}); -
Para obtener la propiedad colorMode :
var colorMode = $('#jqxTreeMap').jqxTreeMap('colorMode');
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 colorMode . En el siguiente ejemplo, el valor de la propiedad colorMode se ha establecido en ‘colorMode’.
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 colorMode Property
</h3>
<div id="Tree_Map"></div>
<input type="button" style="margin: 28px;"
id="button_for_colorMode"
value="Value of the colorMode 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: 200,
source: Data_of_TreeMap,
colorMode: "autoColors"
});
$("#button_for_colorMode").jqxButton({
width: 250
});
$("#button_for_colorMode").click(
function () {
var colorMode_Value =
$('#Tree_Map').
jqxTreeMap('colorMode');
$("#log").html((
colorMode_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