Cómo utilizar Chart.js con Vue.js

Introducción

Chart.js es una forma eficaz de crear gráficos limpios con el canvaselemento HTML5. Con data()el objeto de Vue, es posible almacenar datos y manipularlos para cambiar los gráficos cuando sea necesario.

En este artículo, utilizará Chart.js en un proyecto de Vue de muestra para mostrar información sobre los planetas del sistema solar.

Prerrequisitos

Para completar este tutorial, necesitarás:

• Node.js instalado localmente, lo cual puedes hacer siguiendo Cómo instalar Node.js y crear un entorno de desarrollo local .
• Puede resultar beneficioso tener cierta familiaridad con la configuración de un proyecto Vue.js y el uso de componentes Vue.js.

Este tutorial fue verificado con Node v15.11.0, npmv7.6.1, vuev2.6.11 y Chart.js v2.9.4.

Paso 1: Configuración del proyecto

Para configurar rápidamente el proyecto, este artículo recomendará utilizar @vue/cli.

Nota: Este artículo adoptará el enfoque de npxevitar una instalación global de @vue/cli;

npx @vue/cli create vue-chartjs-example  --default

Navegue hasta el directorio del proyecto recién creado;

cd vue-async-computed-example

Chart.js se puede instalar npmcon el siguiente comando:

npm install chart.js@2.9.4

En este punto, tendrás un nuevo proyecto Vue que admite Chart.js.

Paso 2: creación del componente gráfico

Este gráfico constará de dos conjuntos de datos:

1. El número de lunas que tiene cada planeta del sistema solar.
2. La masa de cada planeta del sistema solar.

Con estos dos conjuntos de datos, podemos tener diferentes tipos de gráficos para mostrar correlaciones en los datos.

Abra su editor de código y en srcel directorio y componentssubdirectorio, cree un nuevo PlanetChart.vuearchivo.

Cada gráfico de Chart.js debe tener un canvasen el código HTML. El iddel gráfico se utiliza como selector para vincular el JavaScript a él.

PlanetChart.vue

template  div    canvas/canvas  /div/templatescriptimport Chart from 'chart.js'export default {  name: 'PlanetChart'}/script

A continuación, modificará el App.vuearchivo para utilizar el nuevo PlanetChart:

origen/App.vue

template  div    PlanetChart/  /div/templatescriptimport PlanetChart from './components/PlanetChart.vue'export default {  name: 'App',  components: {    PlanetChart  }}/script

Guarde los cambios en su archivo.

Para mantener separados el componente y la configuración, a continuación creará un nuevo archivo para los datos del gráfico.

Paso 3: Creación de los datos del gráfico

La creación de un gráfico con Chart.js se parece a lo siguiente:

const ctx = document.getElementById('example');const exampleChart = new Chart(ctx, {  type: '',  data: [],  options: {},});

Se pasa un canvaselemento junto con un type, data, y options.

Creará un nuevo archivo que define estos valores. Abra el editor de código y, en srcel directorio, cree un nuevo planet-data.jsarchivo. Tenga en cuenta que deberá darle un nombre único y descriptivo en función de los datos. Puede tener varios objetos de datos en este archivo para diferentes gráficos.

Agregue las siguientes líneas de código a planet-data.js:

fuente/planet-data.js

export const planetChartData = {  type: "line",  data: {    labels: ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"],    datasets: [      {        label: "Number of Moons",        data: [0, 0, 1, 2, 79, 82, 27, 14],        backgroundColor: "rgba(54,73,93,.5)",        borderColor: "#36495d",        borderWidth: 3      },      {        label: "Planetary Mass (relative to the Sun x 10^-6)",        data: [0.166, 2.081, 3.003, 0.323, 954.792, 285.886, 43.662, 51.514],        backgroundColor: "rgba(71, 183,132,.5)",        borderColor: "#47b784",        borderWidth: 3      }    ]  },  options: {    responsive: true,    lineTension: 1,    scales: {      yAxes: [        {          ticks: {            beginAtZero: true,            padding: 25          }        }      ]    }  }};export default planetChartData;

El typese establecerá en line. El dataconstará de dos datasets, backgroundColor, borderColor, y borderWidth. El optionsconstará de responsive, lineTension, y scales.

Nota: Puede consultar la documentación de Chart.js para obtener más información sobre gráficos de líneas, así como otros como bar, polarArea, radar, pie, y doughnut.

Al exportar planetChartData, permite que constse importen en otro archivo JavaScript. Y lo que es más importante, separa los datos del componente. Esta práctica recomendada le permite aplicar cambios solo al archivo relevante y ofrece un mayor mantenimiento a lo largo del tiempo.

Revise el PlanetChartcomponente y agregue planetChartData:

origen/componentes/PlanetChart.vue

scriptimport Chart from 'chart.js'import planetChartData from '../planet-data.js'export default {  name: 'PlanetChart'}/script

A continuación, almacene los datos del gráfico en la data()función.

origen/componentes/PlanetChart.vue

scriptimport Chart from 'chart.js'import planetChartData from '../planet-data.js'export default {  name: 'PlanetChart',  data() {    return {      planetChartData: planetChartData    }  }}/script

Nota: También puedes usar la abreviatura ES6. Dado que la propiedad de datos y el valor tienen el mismo nombre, puedes usar planetChartDataen lugar de planetChartData: planetChartData.

En este punto, se debe instalar Chart.js y se deben importar los datos del gráfico al PlanetChartcomponente.

Ya deberías tener un canvaselemento creado en la plantilla del componente. En este punto, es momento de inicializar el gráfico y escribir en el archivo canvas.

Revise el PlanetChartcomponente y agregue la creación del gráfico en el mounted()método de ciclo de vida:

origen/componentes/PlanetChart.vue

scriptimport Chart from 'chart.js'import planetChartData from '../planet-data.js'export default {  name: 'PlanetChart',  data() {    return {      planetChartData: planetChartData    }  },  mounted() {    const ctx = document.getElementById('planet-chart');    new Chart(ctx, this.planetChartData);  }}/script

Guarde los cambios en su archivo.

Ahora, puedes ejecutar tu aplicación con tu terminal:

npm run serve

Abra la aplicación en su navegador web:

Habrá dos gráficos de líneas. Un gráfico muestra la cantidad de lunas de cada planeta. El otro gráfico muestra la masa de cada planeta. Los valores backgroundColor, borderColory borderWidthhan afectado la apariencia de los gráficos. Al interactuar con los puntos de la línea se mostrarán los valores labels.

Paso 4: Visualización de gráficos mixtos

Chart.js también admite gráficos mixtos. En esta sección, cambiará la configuración de los gráficos de gráficos lineales a una combinación de un gráfico lineal para el conjunto de datos lunares y un gráfico de barras para el conjunto de datos de masas.

Vuelve a consultarlo planet-data.jscon el editor de código. Modifica la typepropiedad de los datos de tu gráfico y cámbiala a bar.

fuente/planet-data.js

export const planetChartData = {  type: "bar",  data: { ... },  options: { ... }};export default planetChartData;

En este punto, ambos gráficos serán gráficos de barras.

Sin embargo, desea mostrar una combinación de gráficos de barras y de líneas. Para cambiar esto, en cada datasetobjeto, agregue una typepropiedad debajo de la labelpropiedad. Para el primer datasetobjeto, asígnele una typepropiedad con un valor de liney para el segundo, asígnele una typepropiedad con un valor de bar:

fuente/planet-data.js

export const planetChartData = {  type: "bar",  data: {    labels: ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"],    datasets: [      {        label: "Number of Moons",        type: "line',        data: [0, 0, 1, 2, 79, 82, 27, 14],        backgroundColor: "rgba(54,73,93,.5)",        borderColor: "#36495d",        borderWidth: 3      },      {        label: "Planetary Mass (relative to the Sun x 10^-6)",        type: "bar",        data: [0.166, 2.081, 3.003, 0.323, 954.792, 285.886, 43.662, 51.514],        backgroundColor: "rgba(71, 183,132,.5)",        borderColor: "#47b784",        borderWidth: 3      }    ]  },  options: { ... }};export default planetChartData;

Guarde los cambios en su archivo.

Ahora, puedes ejecutar tu aplicación con tu terminal:

npm run serve

Abra la aplicación en su navegador web:

La cantidad de lunas de cada planeta se muestra en un gráfico de líneas y la masa de cada planeta en un gráfico de barras.

Conclusión

En este artículo, utilizó Chart.js en un proyecto de Vue de muestra para mostrar información sobre los planetas del sistema solar.

Chart.js se puede utilizar para otras visualizaciones de datos. Explore los ejemplos para inspirarse en cómo incorporarlo a sus proyectos.