Sådan integreres ApexCharts med Vue.js - en detaljeret guide

Diagrammer og grafer er en fantastisk måde at vise information / data til dine apps brugere. I denne artikel vil jeg vise dig nøjagtigt, hvordan du gør det med vue-apexcharts.

Kom godt i gang

Ved hjælp af Vue CLI kan vi nemt oprette en startapplikation. Først skal vi installere Vue CLI med nedenstående kommando. Du kan springe dette over, hvis du allerede har det installeret.

Bemærk: For at kunne bruge CLI skal du have Node.js version 8 eller nyere installeret (8.10.0+ anbefales).

For at installere CLI skal du køre denne kommando i din terminal:

npm install @vue/cli

Nu kan vi bruge det til at oprette vores projekt. Vi opretter projektet ved hjælp af denne kommando:

vue create vue-apexcharts-demo

Vi bliver derefter bedt om muligheden for at vælge en standardindstilling eller til manuelt at vælge funktioner. Vælg default.

Der oprettes en ny projektmappe, og du kan navigere ind i den ved hjælp af denne kommando:

cd vue-apexcharts-demo

Installation af Apexcharts

Inden vi fortsætter, undrer du dig måske ...

Hvad er apexcharts ?!

ApexCharts er et moderne kortbibliotek, der hjælper udviklere med at skabe smukke og interaktive visualiseringer til websider. Du kan se deres demo her.

Vi kan nemt bruge ApexCharts med vores Vue-applikation ved at integrere dens indpakningskomponent til Vue kaldet vue-apexcharts .

For at installere vue-apexcharts-komponenten i vores applikation skal du bruge denne kommando:

npm install --save apexcharts npm install --save vue-apexcharts

Konfiguration af vue-apexcharts

Nu hvor vi har installeret vue-apexcharts, skal vi installere det i vores applikation. Åbn srcbiblioteket, og opret en ny mappe, der hedder plugins. Inde i det nye plugins-bibliotek skal du oprette en fil, der hedder apexcharts.js.

Dernæst opretter vi en Vue-komponent til apexcharts i vores apexcharts.js. Dette gør komponenten globalt tilgængelig i vores applikation.

For at gøre dette importerer vi både Vue og vue-apexcharts. Dernæst opretter vi en global komponent kaldet apexchart. Sådan ser din apexcharts.jsfil ud:

import Vue from 'vue' import VueApexCharts from 'vue-apexcharts' Vue.component('apexchart', VueApexCharts)

Importerer vores plugin-fil

Vi er nødt til at gøre Vue opmærksom på den fil, vi lige har oprettet. For at gøre det importerer vi det i main.jsfilen. Åbn main.js-filen, og tilføj følgende linje efter den sidste importerklæring:

import '@/plugins/apexcharts'

Nu er vi klar til at oprette vores første diagram.

Oprettelse af vores første diagram

Vi opretter vores diagrammer i HelloWorld-komponenten. Denne komponent blev oprettet automatisk, da vi brugte Vue CLI til at oprette vores applikation.

Åbn filen HelloWorld.vueog slet al demokoden der.

Din fil skal se sådan ud:

   export default { name: 'HelloWorld' }   

Husk i vores plugin kaldte vi vores komponent apexchart.

Vue-Apexcharts bygger diagrammer ved hjælp af de data, du sender til det ved hjælp af rekvisitter, som det ses i koden nedenfor. Vi bruger det til at oprette HTML til vores første diagram. I det første eksempel starter vi med et meget grundlæggende søjlediagram.

Som du kan se i ovenstående skabelon, indeholder apexchartkomponenten 4 rekvisitter. Lad os nu springe til script-delen.

 export default { name: 'HelloWorld', data: () => ({ options: { chart: { id: 'vuechart-example' }, xaxis: { categories: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ] } }, series: [{ name: 'series-1', data: [55, 62, 89, 66, 98, 72, 101, 75, 94, 120, 117, 139] }] }) } 

Forklaring af diagramdata

Vores søjlediagram indeholder månedlige aktiepriser for en fiktiv organisation. Vi har 12 datapunkter i vores søjlediagram. Hver måned vises på diagrammets x-akse. Deres prissætning vises på diagrammets y-akse.

For at give de data, der vises i vores søjlediagram, vil vi tilføje et seriearray. En serie er en række objekter. Hvert objekt definerer typen af ​​diagram, der skal oprettes, og vil have et dataarray af værdier, der skal plottes på grafen.

Du kan starte din server med kommandoen:

npm run serve

Åbn nu din browser til localhost: 8080, og du skal se dit diagram:

Styling af vores diagrammer

Vi kan placere vores diagram midt på siden. For at gøre dette skal jeg tilføje en klasse chart-wrapperinde i vores div. Jeg vil også øge diagrammets bredde til 800 px. Min skabelon ser nu sådan ud:

Lad os derefter tilføje nogle styling til den nye chart-wrapperklasse, der placerer vores diagram midt på siden. Her er den stil, jeg har tilføjet:

 div.chart-wrapper { display: flex; align-items: center; justify-content: center } 

While we are adding styles I want to replace the Vue logo with a title. Open up the App.vue file. Delete the tag and replace it with:

Vue Apexcharts Demo

Our charts now looks like this:

Adding a Title and Changing Chart Color

We can add a title to our bar chart to add further context and an explanation of what the chart is all about.

To add a title to our bar chart, go back to your HelloWorld.vue component and add a title to the options object.

options: { chart: { id: 'vuechart-example' }, xaxis: { categories: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ] }, title: { text: 'Monthly Stock Pricing' } }, series: [{ name: 'series-1', data: [55, 62, 89, 66, 98, 72, 101, 75, 94, 120, 117, 139] }]

By default, the title is placed on the left side of the bar chart. Here is what our chart looks like now:

Let’s change the default behaviour by adding our own custom style. I want the title to have a bigger font size and to be centered. The title object has a property called align which represents the horizontal plane. I want the title centered on this. To make the title have a bigger font size we need to add a style option.

Also, we can set the bar chart to have a different color. Here is what options look like now:

options: { chart: { id: 'vuechart-example' }, xaxis: { categories: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ] }, title: { text: 'Monthly Stock Pricing', align: 'center', style: { fontSize: '20px', }, }, colors: ['#00897b'] }, series: [{ name: 'series-1', data: [55, 62, 89, 66, 98, 72, 101, 75, 94, 120, 117, 139] }]

This is what the bar chart looks like now:

Creating a Line Chart

First, we need to create a new chart-wrapper div and a new apexchart element. The new apexchart element will hold props like the previous example. But the interesting thing here is all you need to do is to change the prop type in the template to line.

Here is what my HTML code looks like now:

Vi har nu denne linjediagram:

Apexcharts-dokumentation

Apexcharts har forskellige diagrammer, du kan vælge imellem bortset fra bar og linje. De har også forskellige muligheder, som du kan tilføje til dit diagram. Du kan tilføje forklaringer eller markører og f.eks. Værktøjstip.

Hvis du vil finde ud af om de andre diagramtyper og muligheder, der er tilgængelige, kan du læse deres dokumentation her

Repo

Du kan finde koden til denne artikel på min github-konto.

Konklusion

Diagrammer hjælper os med at visualisere data og hjælpe brugerne med at se og interagere med dem. Integrering af ApexCharts til din Vue-applikation er lige så let som du har set ovenfor.

Feedback er velkommen! Og del denne artikel, hvis du fandt det nyttigt.

Tak for læsningen!