jQWidgets es un marco de JavaScript para crear aplicaciones basadas en web para PC y dispositivos móviles. Es un marco muy potente y optimizado, independiente de la plataforma y ampliamente compatible. El jqxHeatMap representa un widget de jQuery que muestra una representación gráfica de datos que utiliza códigos de colores para representar diferentes valores.
La propiedad paletteSettings se utiliza para establecer o devolver la propiedad paletteSettings. es decir, esta propiedad se utiliza para establecer o devolver la configuración de la paleta HeatMap. Acepta valores de tipo de objeto y el valor predeterminado es nulo.
Sintaxis:
- Se utiliza para establecer la propiedad paletteSettings.
$('Selector').jqxHeatMap({ paletteSettings : object }); - Se utiliza para devolver la propiedad paletteSettings.
var paletteSettings = $('Selector').jqxHeatMap('paletteSettings');
- paleta : se utiliza para establecer la colección de colores para la celda del mapa de calor. Contiene los siguientes valores:
- value : valor del color de la paleta.
- color : paleta de colores.
- etiqueta : La etiqueta para el color de la paleta. Esta propiedad es opcional.
- type : Se utiliza para establecer el estilo de color. Las opciones posibles son ‘Gradiente’ (usado para mostrar las celdas con color de degradado lineal), ‘Fijo’ (usado para mostrar las celdas con color fijo). El valor predeterminado es ‘Gradiente’.
- emptyPointColor : se utiliza para establecer el color de los puntos vacíos. El valor predeterminado es ‘#eee’.
Archivos vinculados: descargue jQWidgets desde el enlace. 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-1.11.1.min .js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxheatmap.js”> </script>
Ejemplo: El siguiente ejemplo ilustra la propiedad jqxHeatMap paletteSettings en jQWidgets.
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-1.11.1.min.js">
</script>
<script type="text/javascript"
src="jqwidgets/jqxcore.js">
</script>
<script type="text/javascript"
src="jqwidgets/jqxheatmap.js">
</script>
</head>
<body>
<center>
<h1 style="color: green">
GeeksforGeeks
</h1>
<h3>jQWidgets jqxHeatMap paletteSettings property</h3>
<body class='default'>
<div id="heatmap"></div>
</body>
</center>
<script type="text/javascript">
$(document).ready(function () {
var x = {
labels: ['Ram', 'Rahul', 'Krishna']
};
var y = {
labels: ['1st oct', '2nd oct',
'3rd oct', '4th oct']
};
var arr = [
[1, 3, 9, 5],
[5, 3, 2, 3],
[2, 0, 6, 8]
];
$("#heatmap").jqxHeatMap({
xAxis: x,
yAxis: y,
source: arr,
title: 'Coding Questions Solved:',
paletteSettings: {
palette: [
{ value: 0, color: '#fcba03' },
{ value: 5, color: '#0373fc' },
{ value: 10, color: '#fc0331' }],
type: 'Gradient'}
});
});
</script>
</body>
</html>
Producción:
