Tutoriel MySQL - Highcharts

El gráfico

¿ Comenzamos nuestro famoso gráfico ? Sí, empezamos instalando las llamadas a las librerías, que son java script. También en el mismo archivo se añade:

<script type="text/javascript" src="../jquery.min.js"></script> <script type="text/javascript" src="../highcharts3/js/highcharts.js"></script> <script type="text/javascript" src="../highcharts3/themes/grid.js"></script> <script type="text/javascript" src="../highcharts3/js/modules/exporting.js"></script>

Cambiar el acceso en función de la configuración de su sitio y el nombre que ha configurado para el archivo de caminos Highcharts El script jquerry.min.js es obligatorio. El script highcharts.js es obligatorio, éste es el script principal de la biblioteca Highcharts. El script grid.js es optativo, es lo que define los gráficos globales de su gráfico, hay cinco temas predefinidos por defecto Exemple

Para cambiar un tema, reemplace en la línea el nombre del fichero js <script type="text/javascript" src="../highcharts3/themes/grid.js"></script> <script type="text/javascript" src="../highcharts3/themes/dark-blue.js"></script> <script type="text/javascript" src="../highcharts3/themes/dark-green.js"></script> <script type="text/javascript" src="../highcharts3/themes/gray.js"></script> <script type="text/javascript" src="../highcharts3/themes/skies.js"></script> OBVIAMENTE NO HAY QUE PONER NADA MAS QUE UN TEMA Si opta por establecer un tema, todavía puede cambiar la apariencia de la gráfica con API Highcharts.

Ejemplo: usted pone <script type="text/javascript" src="../highcharts3/themes/dark-blue.js"></script> y se obtiene la

Ejemplo: usted pone <script type="text/javascript" src="../highcharts3/themes/dark-green.js"></script> y se obtiene la

Ejemplo: usted pone vous mettez <script type="text/javascript" src="../highcharts3/themes/gray.js"></script> y se obtiene la

El script Exporting.js es sólo para el icono de exportación situado en los gráficos en la parte superior derecha

Empezamos con el código del propio gráfico, todas estas funciones están disponibles Highcharts utilizando ( API ) http://www.highcharts.com/docs documentación general http://api.highcharts.com/highcharts códigos API Más adelante explicaré cómo hacer algunos cambios con APIs
También en el mismo archivo, insertamos despues el código Highcharts, ya que al ser escritura de Java, se empieza con la etiqueta js.
<script type="text/javascript">
A continuación, se define la función de ( tiempo) para el eje x
<script type="text/javascript"> function comArr(unitsArray) { var outarr = []; for (var i = 0; i < time.length; i++) { outarr[i] = [time[i], unitsArray[i]]; } return outarr; }
Definimos las opciones generales y las opciones de traducción
<script type="text/javascript"> function comArr(unitsArray) { var outarr = []; for (var i = 0; i < time.length; i++) { outarr[i] = [time[i], unitsArray[i]]; } return outarr; } $(function () { var chart; $(document).ready(function() { var highchartsOptions = Highcharts.setOptions(Highcharts.theme); Highcharts.setOptions({ lang: { months: ["Enero "," Febrero "," Marzo "," Abril "," Mayo "," Junio "," Julio "," Agosto "," Septiembre "," Octubre "," Noviembre "," Diciembre"], weekdays: ["Dom "," Lun "," Mar "," Mie "," Jue "," Vie "," Sab"], shortMonths: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul','Ago', 'Sept', 'Oct ', 'Nov', 'Dic'], decimalPoint: ',', resetZoom: 'Reset zoom', resetZoomTitle: 'Reset zoom à 1:1', downloadPNG: "Descargar en formato imágen PNG", downloadJPEG: "Descargar en formato imágen JPEG", downloadPDF: "Descargar en formato documento PDF", downloadSVG: "Descargar en formato vector imágen SVG", exportButtonTitle: "Exportar imágen o documento", printChart: "Imprimir el gráfico", loading: "Cargando..." } });
	Usted puede cambiar el texto (traducción) en verde, no toque el resto del código, será la base de todos los gráficos.
Definimos las caraterísticas generales del gráfico
chart = new Highcharts.Chart({ chart: { renderTo: 'container', zoomType: 'x', type: 'spline', marginRight: 10, marginBottom: 60, plotBorderColor: '#346691', plotBorderWidth: 1, },
renderTo: 'container', = es el nombre de su gráfico, debe asignar un nombre único a cada gráfico
zoomType: 'x', = indica el tipo de zoom que permite que su gráfico de x, y o yx. Si no ponen nada, no será posible hacer zoom
type: 'spline', = el tipo de trazado en Y, línea, spline, columna , área, pastel , bar, etc ...
marginRight: 10, = El márgen derecho en pixels (pxs)
marginBottom: 60, = el márgen inferior en pxs
plotBorderColor: '#346691', = color del borde exterior
plotBorderWidth: 1, = anchura del borde exterior
Un título se añade a la gráfica. Puede ser colocado en x e y es en pxs o por ejemplo, centro, izquierda, derecha, etc ...
title: { text: 'Temperaturas de las últimas 48 horas', x: -20 },
También puede agregar un subtítulo
subtitle: { text: 'Fuente: Météo Villarzel', x: -20 },
El crédito es el texto que aparece en la parte inferior derecha de la gráfica , por defecto es: "highcharts.com" pero se puede cambiar
credits: { text: '© Météo Villarzel', href: 'http://www.boock.ch/meteo-villarzel.php' },
	En lo que se refiere al tiempo empleado para hacer este tutorial, le agradecería nó modificar este código. si utiliza estos scripts, no se atribuya directamente la autoría (poniendo su nombre) o indirectamente (sin indicar la procedencia).
Definimos el eje x
xAxis: { type: 'datetime', startOnTick: false, },
startOnTick = false ou true
defimos el eje y Opción: plotlines establece una línea en el eje y "valor" 0 °C en éste ejemplo,con una anchura "width" de 1pxs y de color rojo
yAxis: { title: { text: 'Temperature (°C)' }, plotLines: [{ value: 0, width: 1, color: '#FF0000' }] },
Se define la "Herramienta de información" es la leyenda que aparece cuando ponemos el puntero del ratón sobre una curva
tooltip: { crosshairs:[true], borderColor: '#4b85b7', shared: true, backgroundColor: '#edf1c8', formatter: function() { var s = '<b>'+ Highcharts.dateFormat('%e %B à %H:%M', this.x) +'</b>'; $.each(this.points, function(i, point) { var unit = { 'Punto de rocío': ' °C', 'Temperatura': ' °C', 'Factor viento' : '', 'Humidex' : '' }[this.point.series.name]; s = s + '<br>' + '<span style="color:'+ point.series.color +'">' + point.series.name + ' </span> : ' +Highcharts.numberFormat(point.y,1,","," ") + unit; }); return s; }, },
El "crosshairs" es una línea que muestra la posición xy del ratón sobre el gráfico.. [true], = Sólo el eje x [true, true], = eje x e y [false], = sin línea borderColor: '#4b85b7', = la couleur de la bordure du tooltip shared: true, = tooltip visible shared: false, = tooltip invisible backgroundColor: '#edf1c8', = El color del borde del tooltip Highcharts.dateFormat('%e %B à %H:%M', this.x) = el formato de la fecha (axe x) var unit = { 'Punto de rocío': ' °C', 'Temperatura': ' °C', 'Factor viento' : '', 'Humidex' : '' Var unit permite tener unidades diferentes para cada curva (axe y) el nombre debe ser idéntico que el nombre de la serie.
Se supprimen los marcadores sobre las curvas, pues hay muchos y éso dificulta la visibilidad.
plotOptions: { series: { marker: { enabled: false } } },
Bueno, casi hemos terminado, nos queda definir los datos "data" del eje y
series: [ { name: 'Temperatura', zIndex: 1, color: '#ff0000', data: comArr(outdoortemperature) }, { name: 'Punto de rocío', color: '#3399FF', data: comArr(dewpoint) }, { name: 'Factor viento', color: '#40e0d0', dashStyle: 'LongDash', data: comArr(windchill), }, { name: 'Humidex', color: '#bd005c', dashStyle: 'ShortDash', data: comArr(outdoorheatindex), } ]
name: 'Temperatura',= es el nombre que quiera dar a su curva zIndex: 1, = aquí yo he puesto un zIndex para indicar que ésta curva está en primer plano color: '#ff0000', = el color de su curva data: comArr(outdoortemperature) = y por fín el nombre de los datos a trazar Hacemos lo mismo para los otros 3 datos.
Ya no queda más que cerrar las llaves y los paréntesis. Cerramos la etiqueta script y head
}); }); }); </script> </head>
Ahora no queda mas que mostrar el gráfico en el cuerpo "body" de la página y cerrar la etiqueta html
<body> <div id="container" style="width: 550px; height: 300px; margin: 0 auto"></div> </body> </html>
id="container" = Es el nombre que usted definió al comienzo en "renderTo: 'container', " style="width: 550px; height: 300px; = La longitud y anchura que usted quiera dar a su gráfico.
Su gráfico está terminado.

 

página01 Carga de la base de datos. página02 Acceder a la base de datos. página03 Recuperación y formateo de los datos. página04 Highcharts, mi primer gráfico. página05 Highcharts, mi primer gráfico, recapitulación.. página06 Mi segundo gráfico, la pluviometría.. página07 Un gráfico con múltiples ejes Y página08 Personalización con la API Highcharts página09 Highstock ¿Qué es? página 10 Le forum Highcharts Ce tutoriel est disponible en français This tutorial is also available in in English ¿Le ha gustado este tutorial, le ha servido? Cuentenmelo. O ayudeme a mantener este sitio funcionando .