Comment créer des composants graphiques à l'aide du langage Go et de Vue.js

Avec l'avènement de l'ère Internet, l'analyse des données et l'affichage visuel sont devenus un élément nécessaire de diverses applications. Avec le développement d'applications Web modernes, la manière d'utiliser des outils faciles à utiliser et efficaces pour traiter les données et créer de superbes composants graphiques est devenue un sujet important. Dans cet article, nous présenterons comment créer des composants graphiques à l'aide du langage Go et de Vue.js.

Go Language et Vue.js sont deux outils open source populaires, qui ont tous deux reçu une attention et une utilisation généralisées. Le langage Go est un langage de programmation émergent qui vise à offrir efficacité, fiabilité et simplicité, et est devenu un langage de programmation côté serveur populaire. Vue.js est un framework JavaScript populaire particulièrement utile pour créer des composants d'interface utilisateur interactifs tels que des graphiques. Le langage Go et Vue.js sont tous deux faciles à apprendre et à utiliser, et faciles à étendre.

Dans cet article, nous utiliserons le langage Go pour écrire du code backend, traiter les données et fournir une API de données graphiques. Nous utiliserons ensuite le framework front-end Vue.js pour créer des composants graphiques et obtenir des données du back-end, puis visualiser les données. Nous utiliserons deux bibliothèques de graphiques populaires : Chart.js et Plotly.js. Ces bibliothèques utilisent la technologie HTML5 Canvas et D3.js pour créer des graphiques réactifs.

Tout d’abord, commençons par créer une API de traitement de données. Dans notre exemple, nous utiliserons le langage Go pour écrire le code backend. Pour simplifier le processus, nous utiliserons le framework Echo pour créer nos routes et contrôleurs API. Dans le fichier data.go, nous définirons une structure appelée data qui contient les cinq champs que nous transmettrons à l'API depuis le frontend :

type data struct {
        Month    int     `json:"month"`
        Year     int     `json:"year"`
        Revenue  int     `json:"revenue"`
        Expenses int     `json:"expenses"`
        Profit   int     `json:"profit"`
}

L'étape suivante consiste à créer la route API dans notre fichier main.go et notre contrôleur. . Nous définirons une fonction de traitement de route nommée getDataHandler, qui acceptera la requête GET envoyée par le composant Vue.js, analysera les données, effectuera le traitement des données et renverra les données. Voici le code spécifique :

func getDataHandler(c echo.Context) error {
    // 解析数据
    year, _ := strconv.Atoi(c.QueryParam("year"))
    month, _ := strconv.Atoi(c.QueryParam("month"))

    // 处理数据，此处我们省略了数据查询和处理代码

    // 返回数据
    response := []data{
        {Month: 1, Year: 2022, Revenue: 100000, Expenses: 50000, Profit: 50000},
        {Month: 2, Year: 2022, Revenue: 75000, Expenses: 40000, Profit: 35000},
        {Month: 3, Year: 2022, Revenue: 120000, Expenses: 80000, Profit: 40000},
        {Month: 4, Year: 2022, Revenue: 85000, Expenses: 60000, Profit: 25000},
        {Month: 5, Year: 2022, Revenue: 105000, Expenses: 75000, Profit: 30000},
        {Month: 6, Year: 2022, Revenue: 95000, Expenses: 55000, Profit: 40000},
        {Month: 7, Year: 2022, Revenue: 140000, Expenses: 65000, Profit: 75000},
        {Month: 8, Year: 2022, Revenue: 120000, Expenses: 45000, Profit: 75000},
        {Month: 9, Year: 2022, Revenue: 115000, Expenses: 50000, Profit: 65000},
        {Month: 10, Year: 2022, Revenue: 95000, Expenses: 60000, Profit: 35000},
        {Month: 11, Year: 2022, Revenue: 80000, Expenses: 40000, Profit: 40000},
        {Month: 12, Year: 2022, Revenue: 125000, Expenses: 80000, Profit: 45000},
    }
    return c.JSON(http.StatusOK, response)
}

Maintenant, nous avons créé une API qui peut accepter les requêtes GET envoyées par les composants Vue.js et renvoyer des données. L'étape suivante consiste à créer un composant Vue.js qui récupérera les données de l'API et créera le graphique. Nous utiliserons Chart.js et Plotly.js pour montrer comment créer deux types différents de graphiques.

Tout d’abord, nous allons créer un composant de graphique à barres pour afficher les revenus et dépenses mensuels des ventes. Nous définissons un composant nommé "BarChart" dans Vue.js. Dans Vue.js, nous utiliserons la bibliothèque axios pour gérer les requêtes HTTP et obtenir les données d'une API écrite en langage Go. Dans la fonction hook montée, nous utiliserons la bibliothèque axios pour obtenir les données de l'API et la bibliothèque Chart.js pour créer le graphique à barres. Voici le code de notre composant :

<template>
    <div>
        <canvas ref="bar"></canvas>
    </div>
</template>

<script>
    import axios from 'axios';
    import Chart from 'chart.js';

    export default {
        name: 'BarChart',
        mounted() {
            axios.get('/api/data?year=2022').then(response => {
                let data = response.data;

                let ctx = this.$refs.bar.getContext('2d');
                let myChart = new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: data.map(d => d.Month),
                        datasets: [{
                            label: 'Revenue',
                            data: data.map(d => d.Revenue),
                            backgroundColor: 'rgba(75, 192, 192, 0.2)',
                            borderColor: 'rgba(75, 192, 192, 1)',
                            borderWidth: 1
                        }, {
                            label: 'Expenses',
                            data: data.map(d => d.Expenses),
                            backgroundColor: 'rgba(255, 99, 132, 0.2)',
                            borderColor: 'rgba(255, 99, 132, 1)',
                            borderWidth: 1
                        }]
                    },
                    options: {
                        responsive: true,
                        scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero: true
                                }
                            }]
                        }
                    }
                });
            });
        }
    }
</script>

Dans ce composant, nous récupérons les données de l'API puis utilisons la bibliothèque Chart.js pour créer le graphique à barres. Notez que nous utilisons l'attribut $refs de Vue.js pour définir une référence à l'élément canvas dans le modèle, puis l'utilisons dans la fonction hook montée pour obtenir le contexte du canevas. Nous spécifions le type de graphique à barres et créons deux collections de données pour les revenus et les dépenses, puis utilisons la propriété BeginAtZero pour mettre à l'échelle l'axe Y.

Ensuite, nous allons créer un composant de diagramme de dispersion pour afficher le chiffre d'affaires, les dépenses et les bénéfices. Encore une fois, nous obtenons les données de l'API et traçons un nuage de points par mois. Nous utiliserons les composants Plotly.js et Vue.js pour dessiner le nuage de points. Voici notre code de composant :

<template>
    <div :id="divId"></div>
</template>

<script>
    import axios from 'axios';
    import Plotly from 'plotly.js-basic-dist';

    export default {
        props: ['chartData'],
        data() {
            return {
                divId: `scatter${Math.floor(Math.random() * 1000000)}`,
                layout: {
                    title: 'Revenue, Expenses and profit by Month',
                    xaxis: {
                        title: 'Revenue'
                    },
                    yaxis: {
                        title: 'Expenses'
                    },
                    hovermode: 'closest'
                }
            }
        },
        mounted() {
            axios.get('/api/data?year=2022').then(response => {
                let data = response.data;

                let scatterData = {
                    x: data.map(d => d.Revenue),
                    y: data.map(d => d.Expenses),
                    mode: 'markers',
                    hovertemplate: `Revenue: %{x:$,.2f}<br>Expenses: %{y:$,.2f}<br>Profit: %{text:$,.2f}`,
                    text: data.map(d => d.Profit),
                    marker: {
                        color: data.map(d => d.Profit),
                        size: 20,
                        line: {
                            width: 0.5,
                            color: 'white'
                        }
                    }
                };

                Plotly.newPlot(this.divId, [scatterData], this.layout);
            });
        }
    }
</script>

<style scoped>
    .plot {
        max-width: 100%;
        height: 500px;
    }
</style>

Dans ce fichier de composant Vue.js, nous utiliserons l'attribut Vue.js props pour transmettre des données à notre composant. Encore une fois, nous utilisons la bibliothèque axios pour obtenir des données de l'API. Pour chaque mois, nous créons un point et précisons les revenus sur l'axe horizontal et les dépenses sur l'axe vertical. Nous demandons également à Plotly.js d'utiliser Profit comme texte à afficher sur chaque point et de définir la taille et la couleur de chaque point.

En utilisant le langage Vue.js et Go, nous avons créé deux composants graphiques. Grâce à ces composants, nous pouvons obtenir des données et afficher les données de ventes de manière interactive. De plus, en utilisant Chart.js et Plotly.js, nous pouvons créer de magnifiques graphiques et les personnaliser hautement. Ces méthodes peuvent être appliquées à d’autres projets de visualisation de données et rendre la création de sites Web et d’applications de visualisation de données rapide, facile et évolutive.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!