Highcharts Tutorial en Español(1/3)

Diseño web

 

tuto (1)

Como dije en la entrada Para que sirve Highcharts?, hoy  empieza la serie de tutoriales de higchart, para esto tenemos a su estrella los chart que llevan sus mismo nombre:

Esto es lo que haremos:

chart (4)

aunque parece muy simple cubrirá varios aspecto de estilos,para que puedas jugar y adaptarlo.

Para hacer uso de esta librería primero se debe descargar el fichero zip o si prefieres los CDN, todo esto lo conseguimos en la web oficial. A continuación debemos enlazar este script a la cabecera del archivo html.

si se hace uso del fichero:

<script src="path/highcharts.js"></script>
<script src="path/modules/exporting.js"></script>

Con CDN:

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

luego debemos declarar un div contenedor donde se visualizara nuestro gráfico

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Nota: tengamos muy en cuenta en id que le ponemos al div, lo usaremos mas adelante

Ahora si podemos empezar con la gráfica primero copia el código base que te brinda la página vamos a demos para este ejemplo se usara “base line”  y luego en edit in jsfiddle, como veras este link te abre los códigos que se usaran en los diferentes lenguajes lo que vamos a copiar es:

$(function () {
 $('#container').highcharts({
 title: {
 text: 'Monthly Average Temperature',
 x: -20 //center
 },
 subtitle: {
 text: 'Source: WorldClimate.com',
 x: -20
 },
 xAxis: {
 categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
 },
 yAxis: {
 title: {
 text: 'Temperature (°C)'
 },
 plotLines: [{
 value: 0,
 width: 1,
 color: '#808080'
 }]
 },
 tooltip: {
 valueSuffix: '°C'
 },
 legend: {
 layout: 'vertical',
 align: 'right',
 verticalAlign: 'middle',
 borderWidth: 0
 },
 series: [{
 name: 'Tokyo',
 data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
 }, {
 name: 'New York',
 data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
 }, {
 name: 'Berlin',
 data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
 }, {
 name: 'London',
 data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
 }]
 });
});

donde  dice container es el nombre que le dimos al div

$('#container').highcharts({

 

para cambiar el color de fondo

chart: {
 backgroundColor: '#FCF9F9',
 type: 'line'
 }

Cambiando el titulo y subtitulo,solo tenemos que encontrar la parte del código que se llama title y la otra subtitle y cambiar donde dice text:

title: {
 text: 'Temperatura promedio Mensual',
 x: -20 //center
 },
 subtitle: {
 text: 'Fuente: WorldClimate.com',
 x: -20
 }

para cambiar color de una serie especifica agreguemos el atributo que nos da higchart llamado color luego de los valores, ejemplo:

data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6], 
color: '#EE2222'

Por ultimo deshabilitaremos los créditos de higchart y el botón que permite imprimir la gráfica (todo esto es opcional)

credits: {
 //quitando los creditos
 enabled: false
 }, 
exporting: {
 //deshabilitando el boton de print
 enabled: false
 }

y listo con esto cubrimos varios aspectos importantes sobre la personalización de los gráficos con higchart.

**Para acceder al proyecto complete ve aquí **

Si tienes otra duda no dudes en dejar tu comentario, estos atributos y muchos más lo puedes con seguir en la documentación oficial.