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 xAxis se usa para establecer o devolver la propiedad xAxis. es decir, esta propiedad se utiliza para establecer o devolver la configuración del eje x de HeatMap. Acepta valores de tipo de objeto y el valor predeterminado es nulo.
Sintaxis:
- Se utiliza para establecer la propiedad xAxis.
$('Selector').jqxHeatMap({ xAxis : array}); - Se utiliza para devolver la propiedad xAxis.
var xAxis = $('Selector').jqxHeatMap('xAxis');
- etiquetas : Se utiliza para establecer las etiquetas del eje x cuando no se utilizan propiedades mínimas y máximas .
- opuestaPosición : Se utiliza para establecer si el eje se mostrará en el lado opuesto con respecto a la posición predeterminada. El valor predeterminado es falso .
- isInversed : Se utiliza para establecer si el eje debe mostrarse en posición invertida o no. El valor predeterminado es falso .
- mínimo : Se utiliza para establecer el rango mínimo del eje x.
- máximo : Se utiliza para establecer el rango máximo del eje x.
- labelFormat : se utiliza para dar formato a la etiqueta del eje al configurar las propiedades para mínimo y máximo . Las posibles opciones de formato de etiqueta son corto, numérico, de 2 dígitos, estrecho, corto o largo, entre los cuales el valor predeterminado es corto.
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 xAxis 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 xAxis 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:',
});
});
</script>
</body>
</html>
Producción:
