TUTORIAL GAUGES

Gauges Highcharts Tutorial en Español(2/3)

Diseño web

Continuando con la serie de tutoriales de higcharts en esta entrega veremos como manipular los famosos gauges.

Esto sera lo que haremos un Activity gauge :

Activity gauge

Aprenderemos a crear un tema, esto se puede aplicar a todas las gráficas disponibles en higcharts, aunque también puedes conseguir temas ya listos como el “dark unica”.

como dije en el primer tutorial 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.

Que necesitas primero?, incluir en tu cabecera los siguientes links

si se hace uso del fichero:

<script src="path/highcharts.js"></script>
<script src="path/highcharts-more.js"></script>
<script src="path/modules/solid-gauge.js"></script>

Con CDN:

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>

e incluir un div que va a contener el gráfico.

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

ahora comenzamos a crear el tema, para esto vamos al aparatado de highcharts que tiene los temas que traen, copiamos y luego a editar:

ubicaremos la parte de las fuentes para cambiarlas, la escogida fue Righteous de las google fonts, copiamos el link, el nombre y estilo

// cambiar las fuentes
Highcharts.createElement('link', {
href: 'https://fonts.googleapis.com/css?family=Righteous',
rel: 'stylesheet',
type: 'text/css'
}, null, document.getElementsByTagName('head')[0]);

luego dentro del tema

style: {
 fontFamily: "'Righteous', cursive" //nombre de la fuente y tipo
 },

para el color de los apartados:

colors: ["#BC4BFD", "#71F79F", "#5C9CFE", "#24CFFB", "#71F79F", "#ff0066", "#eeaaee",
 "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],

para conseguir diferentes colores puedes usar la coolors .

usaremos un background tipo gradiente, otra de las opciones que trae esta librería

chart: {
 backgroundColor: {
 linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1, x3:2, y3:2 },
 stops: [
 [0, '#FFFBFA'],
 [1, '#C8C6D7']
 ]
 },

 

en cuanto a la sección de titulo y subtitulo podemos cambiar el color,tamaño y transformación(elegir si todas son en mayúsculas o minúsculas)

 title: {
 style: {
 color: '#494850',
 fontSize: '30px'
 }
 },
 subtitle: {
 style: {
 color: '#494850',
 textTransform: 'uppercase'
 }
 }

El tootltip(es el que muestra la información de cada serie), se puede cambiar  al color tanto de la fuente como del fondo

tooltip: {
//cambio de la info
backgroundColor: 'rgba(0, 0, 0, 0.85)',
style: {
color: '#000'
}

por último cambiaremos el color y el ancho de los iconos de las series

.attr({
 'stroke': '#F5F5F5', //color
 'stroke-linecap': 'round',
 'stroke-linejoin': 'round',
 'stroke-width': 4, //ancho
 'zIndex': 10
 })

como siempre el código completo te lo dejo en este link o si prefieres descargar el tema ve aquí, solo recuerda que el código del tema tienen que ir antes del de la gráfica.

Anuncios