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 colorRange se usa para establecer u obtener el rango en el que los colores base pueden variar para el jqxTreeMap especificado. El valor de esta propiedad oscila entre 0 y 255.
Sintaxis:
-
Para configurar la propiedad colorRange :
$("#jqxTreeMap").jqxTreeMap({colorRange: 125}); -
Para obtener la propiedad colorRange :
var colorRange = $('#jqxTreeMap').jqxTreeMap('colorRange');
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 colorRange . En el siguiente ejemplo, el valor de la propiedad colorRange se ha establecido en 125.
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 colorRange Property
</h3>
<div id="Tree_Map"></div>
<input type="button" style="margin: 28px;"
id="button_for_colorRange"
value="Value of the colorRange 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,
colorRange: 125,
colorMode: 'autoColors',
baseColor: '#000000'
});
$("#button_for_colorRange").
jqxButton({
width: 300
});
$("#button_for_colorRange").click(
function () {
var colorRange_Value =
$('#Tree_Map').
jqxTreeMap('colorRange');
$("#log").html((
colorRange_Value));
});
});
</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