Comment utiliser Golang pour implémenter la visualisation de données Web

Avec le développement d'Internet, les données sont de plus en plus au centre de l'attention des gens. En pratique, nous devons visualiser les données pour une meilleure analyse et un meilleur apprentissage. Cet article expliquera comment utiliser Golang pour écrire des applications Web et utiliser des bibliothèques de visualisation pour réaliser la visualisation des données.

1. Introduction à Golang

Golang est un langage de programmation développé par Google. Son objectif de conception est d'améliorer l'efficacité du développement et la maintenabilité des programmes. Golang est un langage fortement typé, compilé statiquement avec concurrence et garbage collection. Il est largement utilisé dans la programmation côté serveur, le cloud computing et le développement d'applications Web.

2. Développement d'applications Web

Lors de l'écriture d'applications Web à l'aide de Golang, nous devons utiliser un framework Web. Les frameworks Web couramment utilisés incluent : Gin, Echo, Beego, etc. Dans cet article, nous utiliserons le framework Gin comme exemple pour démontrer. Tout d’abord, nous devons installer le framework Gin et les autres dépendances nécessaires. Entrez simplement la commande suivante dans la console :

go get -u github.com/gin-gonic/gin

Ensuite, nous devons écrire une application Web simple. Créez un fichier nommé "main.go" en utilisant la commande suivante dans la console :

touch main.go

Ouvrez le fichier "main.go" créé et entrez le code suivant :

package main

import "github. com/gin-gonic/gin"

func main() {

r := gin.Default()
r.GET("/", func(c *gin.Context) {
    c.JSON(200, gin.H{
        "message": "Hello World!",
    })
})
r.Run()

}

Dans le code, nous utilisons la méthode par défaut du package gin pour créer un moteur gin r. Ensuite, nous utilisons la méthode GET pour définir une route Lorsque nous accédons au chemin racine "/", un message JSON de "Hello World!" Enfin, nous démarrons l'application Web en utilisant la méthode Run. Entrez la commande suivante dans la console pour exécuter l'application Web :

go run main.go

Ensuite, nous pouvons accéder à "http://localhost:8080/" dans le navigateur et voir les informations de sortie.

3. Visualisation des données

Avec la connaissance de base des applications Web, nous pouvons commencer à visualiser des données à l'aide de bibliothèques de visualisation. Les bibliothèques de visualisation couramment utilisées incluent : Chart.js, D3.js, Echarts, etc. Dans cet article, nous utiliserons Chart.js comme exemple pour démontrer. Tout d’abord, nous devons installer la bibliothèque Chart.js. Entrez simplement la commande suivante dans la console :

npm install chart.js --save

Ensuite, nous devons modifier le programme précédent pour introduire la bibliothèque Chart.js. Ouvrez le fichier "main.go" et modifiez le code comme suit :

package main

import (

"github.com/gin-gonic/gin"
"net/http"

)

func main() {

r := gin.Default()
r.LoadHTMLGlob("templates/*")
r.GET("/", func(c *gin.Context) {
    c.HTML(http.StatusOK, "index.tmpl", gin.H{})
})
r.Run(":8080")

}

Dans le code, nous spécifions d'abord le modèle en utilisant la méthode LoadHTMLGlob Le chemin d'accès au fichier. Nous avons ensuite rendu un modèle HTML appelé "index.tmpl" à l'aide de méthodes HTML et transmis les données dans le modèle. Dans le modèle, nous pouvons utiliser la bibliothèque Chart.js pour la visualisation des données. Créez un fichier nommé "index.tmpl" à l'aide de la commande suivante dans la console :

touch templates/index.tmpl

Ouvrez le fichier "index.tmpl" créé et entrez le code suivant :

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

<title>Chart.js Example</title>
<script src="/js/chart.min.js"></script>

9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

<canvas id="myChart"></canvas>
<script>
    var ctx = document.getElementById("myChart").getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
            datasets: [{
                label: '# of Votes',
                data: [12, 19, 3, 5, 2, 3],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });
</script>

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

Dans le code, nous utilisons la bibliothèque Chart.js afin que vous puissiez dessiner des graphiques sur toile. Dans cet exemple, nous dessinons un histogramme. Nous pouvons obtenir des données dans le programme backend et les transmettre au frontend. Nous pouvons ensuite utiliser ces données dans des modèles HTML pour des opérations visuelles.

4. Conclusion

Dans cet article, nous avons présenté comment écrire une application Web à l'aide de Golang et implémenter la visualisation de données à l'aide de la bibliothèque Chart.js. Bien que les exemples de code présentés dans cet article soient relativement simples, ils peuvent nous aider à comprendre comment commencer à utiliser Golang pour le développement Web et à apprendre à combiner des bibliothèques de visualisation pour réaliser la visualisation de données.

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!