Los gráficos o cuadros son la mejor manera de representar datos, ya que son más fáciles de usar que ver datos sin procesar. También facilita la realización de análisis de los datos. Hay muchas bibliotecas en JavaScript que facilitan la creación de estas visualizaciones y su uso en aplicaciones móviles o web. Una de esas bibliotecas es Highcharts JS . Es una biblioteca de gráficos de JavaScript multiplataforma basada en SVG que facilita agregar visualizaciones interactivas a las aplicaciones.
Ejemplo: El siguiente ejemplo muestra un gráfico de líneas simple con datos aleatorios y el eje x que tiene el tipo DateTime. El siguiente código se usará para definir el documento HTML donde se dibujará el gráfico.
html
<!DOCTYPE html> <html> <head> <title>Highcharts JS line chart</title> <!-- Include the highcharts library --> <script src="https://code.highcharts.com/highcharts.js"> </script> <!-- Include additional JavaScript here --> </head> <body> <div id="plot-container" style="height: 500px; width: 700px"> </div> </body> </html>
El código JavaScript muestra el gráfico junto con los parámetros requeridos.
javascript
// Define the chart
var chart = new Highcharts.Chart({
chart: {
renderTo: 'plot-container',
type: 'line'
},
title: {
text: 'Daily random data'
},
xAxis: {
title: {
text: 'Date'
},
type: 'datetime'
},
yAxis: {
title: {
text: 'Reading (in units)'
}
},
// Define the data to be represented
series: [{
data: [
12.2, 54.5, 39.1, 29.9, 100,
35.4, 93.7, 106.4, 150, 144.0, 176.0,
135.6, 148.5, 216.4, 194.1, 95.6, 54.4,
84.7, 122.9, 137.4, 135.2, 163.1, 195.2,
195.1, 182.7, 174.3, 201.8, 199.2,
],
pointStart: Date.UTC(2010, 0, 1),
pointInterval: 3600 * 1000 // one hour
}]
});
Producción:
El gráfico anterior tiene algunos valores para cada hora del día. Por ejemplo, a las 4:00 h, el valor en el eje y es 100, a las 8:00 h, el valor es 150, y así sucesivamente. ¿Es posible determinar la fecha a partir del eje x para cada etiqueta de tiempo? Sí, al observar, vemos que hay dos fechas: 1. Ene y 2. Ene y todas las etiquetas de tiempo que se encuentran entre ellas representan la hora del 1. Ene y las que están después del 2. Ene representan la hora de ese día.
Esta observación fue fácil en el caso de este ejemplo ya que el conjunto de datos para el gráfico es pequeño. Pero en los proyectos del mundo real, a menudo los datos representados en los gráficos son enormes y un usuario que mira un gráfico de este tipo puede esperar obtener los datos sobre un día y una hora en particular con solo mirar el gráfico.
Aquí es donde la flexibilidad y el control proporcionados por la biblioteca de Highcharts se vuelven útiles. El comportamiento predeterminado de la biblioteca se puede modificar definiendo explícitamente el formato de etiqueta DateTime para el eje elegido. Por defecto, utiliza los siguientes formatos para las etiquetas DateTime según los intervalos definidos a continuación:
{
millisecond: '%H:%M:%S.%L',
second: '%H:%M:%S',
minute: '%H:%M',
hour: '%H:%M',
day: '%e. %b',
week: '%e. %b',
month: '%b \'%y',
year: '%Y'
}
Las etiquetas utilizadas para representar el tiempo se definen a continuación:
%a: Short weekday, like 'Mon'. %A: Long weekday, like 'Monday'. %d: Two digit day of the month, 01 to 31. %e: Day of the month, 1 through 31. %b: Short month, like 'Jan'. %B: Long month, like 'January'. %m: Two digit month number, 01 through 12. %y: Two digits year, like 09 for 2009. %Y: Four digits year, like 2009. %H: Two digits hours in 24h format, 00 through 23. %I: Two digits hours in 12h format, 00 through 11. %l (Lower case L): Hours in 12h format, 1 through 11. %M: Two digits minutes, 00 through 59. %p: Upper case AM or PM. %P: Lower case AM or PM. %S: Two digits seconds, 00 through 59
En el ejemplo, el tiempo se representa en el eje x con el intervalo de horas. Por lo tanto, la etiqueta predeterminada utilizada es ‘%H:%M’, que representa una hora de dos dígitos y un valor de minutos de dos dígitos para los puntos de datos.
Esto debe cambiarse de manera que, junto con la hora, también muestre el día de dos dígitos, el mes corto y el año de cuatro dígitos. Haciendo referencia a las definiciones de etiqueta anteriores, la nueva etiqueta que se utilizará sería: ‘%H:%M %d %b %Y’
Este cambio debe realizarse en la propiedad de etiquetas definiendo una función de formateador con el formato requerido. Este código se agrega para el eje x:
labels: {
formatter: function() {
return Highcharts.dateFormat('%H:%M %d %b %Y',this.value);
}
}
El código final que incluye los cambios es:
javascript
var chart = new Highcharts.Chart({
chart: {
renderTo: 'plot-container',
type: 'line'
},
title: {
text: 'Daily random data'
},
xAxis: {
title: {
text: 'Date'
},
type: 'datetime',
// Use the date format in the
// labels property of the chart
labels: {
formatter: function() {
return Highcharts.dateFormat('%H:%M %d %b %Y',
this.value);
}
}
},
yAxis: {
title: {
text: 'Reading (in units)'
}
},
series: [{
data: [
12.2, 54.5, 39.1, 29.9, 100,
35.4, 93.7, 106.4, 150, 144.0, 176.0,
135.6, 148.5, 216.4, 194.1, 95.6, 54.4,
84.7, 122.9, 137.4, 135.2, 163.1, 195.2,
195.1, 182.7, 174.3, 201.8, 199.2,
],
pointStart: Date.UTC(2010, 0, 1),
pointInterval: 3600 * 1000 // one hour
}]
});
Producción:
El gráfico anterior ahora muestra las fechas junto con la hora en el eje x.
Referencias:
https://api.highcharts.com/highcharts/xAxis.dateTimeLabelFormats
https://www.highcharts.com/forum/viewtopic.php?t=13389
Publicación traducida automáticamente
Artículo escrito por amarjeet_singh y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA