Hace tiempo que no publico ninguna entrada relacionada con VueJS, a pesar de que ha sido el último framework web que se ha destripado en la web, y es el framework con el que actualmente trabajo y me siento más a gusto.
Sinceramente, VueJS está muy bien pensado, tanto si trabajas con proyectos pequeños, como si son de mayor tamaño. En mi caso, uso pequeños ejemplos que voy integrando en proyectos más grandes y a día de hoy, no contemplo otra opción, incluso con proyectos muy grandes, eso si, siempre con Vuex, librería de la que aún no he hablado.
La entrada de hoy va dedicada a incluir la libreria HighCharts.Js en los proyectos de VueJs, usando Highcharts-vue.js, que es Official Highcharts wrapper for Vue framework.
El código HTML
Para el ejemplo que vamos a realizar, el objetivo es utilizar HighCharts.JS en proyectos VueJS, lo que requiere del uso de HighCharts-Vue.js, así que serán dichas librerias las que tengamos que añadir. En la sección de instalación se detalla cómo se instala, aunque la opción que utilizaremos se basa en el ejemplo que se propone, una vez resuelto algunos problemillas que hicieron que a primera vista, el ejemplo no funcionase.
Como extra, vamos a incluir la libreria vue-select, que es una pequeña extensión de VueJS que permite tener selectores. el uso de esta librería permite hacer uso de nuevas herramientas VueJS a utilizar en nuestros futuros desarrollos. En mi caso, me he decantado por usar Vuetify, que incluye muchas opciones y a la que dedicaré nuevas entradas.
Y el código HTML de nuestro ejemplo es:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<title>Manejando Datos - Usando vue-select y Highcharts-vue</title>
<link rel="stylesheet" href="https://unpkg.com/vue-select@latest/dist/vue-select.css">
<style>
.title-row {
display: flex;
flex-direction: column;
align-items: center;
background: #eee;
padding: 20px;
}
</style>
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vue-select@latest"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/highcharts-vue@1.3.5/dist/highcharts-vue.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
Se ha incluido el estilo personalizado inline, es decir, en el propio HTML porque el objetivo es utilizar la librería, no el tener un aspecto excelente, aunque sin duda, un poco sí que mejora.
El codigo de app.js
App.js es donde está el código Javascript, empleando al sintaxis particular requerida por VueJs.
Vue.use(HighchartsVue.default)
Vue.component('v-select', VueSelect.VueSelect);
var app = new Vue({
el: "#app",
data() {
return {
title: '',
options: ['spline', 'line', 'bar', 'pie'],
modo: 'spline',
series: [
{
data: [15, 3, 6, 2, 6, 4, 5, 5]
},
{
data: [12, 1, 4, 3, 8, 1, 3, 7]
},
],
}
},
computed: {
chartOptions() {
return {
chart: { type: this.modo},
title: { text: this.title },
series: this.series,
}
},
},
template:
`
<div>
<div class="title-row">
<span>Chart title:</span>
<input type="text" v-model="title">
<span>Estilo:</span>
<v-select :options="options" v-model="modo" crearable=False></v-select>
</div>
<highcharts :options="chartOptions" ></highcharts>
</div>
`
})
Quizás, si ya leiste las entradas de este blog sobre VueJS, la novedad está en las dos primeras líneas: la primera permite el uso de highcharts, y la segunda de v-select mediante la creación de un nuevo componente.
La variable app contiene la sección el para localizar el DIV con el que trabajará VueJS, que se llama #app, y se ha incluido la sección de data, computed y template (donde está el código HTML del componente).
El resultado es el ya sabido: poder seleccionar el título de la gráfica, así como el tipo de gráfica haciendo uso del selector de opciones.
Espero que os resulte de utilidad para potenciar vuestras aplicaciones.
Happy coding!