Maison développement back-end Golang Comment dessiner facilement de superbes graphiques statistiques à l'aide d'ECharts et de Golang

Comment dessiner facilement de superbes graphiques statistiques à l'aide d'ECharts et de Golang

Dec 18, 2023 pm 02:39 PM
golang echarts 统计图表

Comment dessiner facilement de superbes graphiques statistiques à laide dECharts et de Golang

Comment utiliser ECharts et Golang pour dessiner facilement de superbes graphiques statistiques

Avec l'accumulation et l'application continues de données, les graphiques statistiques sont devenus un moyen important d'afficher des données. Dans ce domaine, ECharts est une bibliothèque de graphiques JavaScript open source populaire. Elle est puissante, facile à utiliser et prend en charge un grand nombre de styles et de types de graphiques, elle a donc été largement utilisée dans le développement. Dans le même temps, en tant que langage de programmation efficace, Golang devient de plus en plus populaire dans le développement back-end Web.

Cet article présente principalement comment utiliser ECharts et Golang pour dessiner de superbes graphiques statistiques, et donne des exemples de code spécifiques.

  1. Préparation

Avant de développer des graphiques statistiques, nous devons préparer les outils et environnements suivants :

  • Environnement Golang
  • Framework Beego
  • Bibliothèque ECharts

Parmi eux, l'environnement Golang peut être téléchargé et installé via Sur le site officiel, le framework Beego peut être installé via la commande suivante :

go get github.com/astaxie/beego
Copier après la connexion

La bibliothèque ECharts peut être installée via la commande suivante :

npm install echarts --save
Copier après la connexion
  1. Dessiner un histogramme

Tout d'abord, nous essayons de dessiner un histogramme simple. Le code est le suivant :

package controllers

import (
    "github.com/astaxie/beego"
)

type MainController struct {
    beego.Controller
}

func (this *MainController) Get() {
    this.Data["Website"] = "beego.me"
    this.Data["Email"] = "astaxie@gmail.com"
    this.TplName = "index.tpl"

    data := []int{10, 52, 200, 334, 390, 330, 220}
    this.Data["chart_data"] = data
    this.Data["chart_type"] = "bar"
}
Copier après la connexion

Dans le code, nous définissons un contrôleur nommé MainController et implémentons la méthode Get. Parmi eux, nous définissons un tableau nommé data, qui contient les données de l'histogramme. Nous transmettons ensuite ces données à la variable "chart_data" du modèle, ainsi qu'à la variable "chart_type" du type de graphique. Plus précisément, nous avons utilisé « barre » comme type d’histogramme.

Ensuite, nous devons présenter le modèle et utiliser la bibliothèque ECharts pour restituer le graphique. Le code est le suivant :

{{.chart_data}}
{{.chart_type}}

{{if .chart_data}}
    <div id="myChart" style="width: 600px;height:400px;"></div>
{{end}}
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/3.5.4/echarts.min.js"></script>
<script>
$(document).ready(function(){
    var myChart = echarts.init(document.getElementById('myChart'));
    var option = {
        title: {
            text: '柱状图'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: '{{.chart_type}}',
            data: {{.chart_data}},
            label: {
                normal: {
                    show: true,
                    position: 'top'
                }
            }
        }]
    };
    myChart.setOption(option);
});
</script>
Copier après la connexion

Dans le code, nous utilisons d'abord {{.chart_data}} et {{.chart_type}} pour afficher les données et le type de graphique afin que nous puissions vérifier l'exactitude des données lors du débogage. Ensuite, nous utilisons des instructions conditionnelles pour déterminer si les données ont été transmises, et la zone du graphique ne sera affichée qu'une fois les données transmises.

Ensuite, nous avons présenté la bibliothèque ECharts et utilisé la méthode echarts.init pour initialiser un élément DOM avec un ID spécifié. Dans cet exemple, nous avons ajouté quelques éléments de configuration de base, tels que le titre, l'info-bulle, la légende, xAxis, yAxis, séries, etc. Parmi eux, xAxis et yAxis définissent respectivement les données de l'axe horizontal et de l'axe vertical, et les séries sont utilisées pour définir les données du graphique.

  1. Dessiner des diagrammes circulaires

En plus des graphiques à barres, nous pouvons également utiliser ECharts et Golang pour dessiner d'autres types de graphiques. Ensuite, nous essayons de dessiner un diagramme circulaire. Le code est le suivant :

package controllers

import (
    "github.com/astaxie/beego"
)

type MainController struct {
    beego.Controller
}

func (this *MainController) Get() {
    this.Data["Website"] = "beego.me"
    this.Data["Email"] = "astaxie@gmail.com"
    this.TplName = "index.tpl"

    data := map[string]int{"直接访问":335, "邮件营销":310, "联盟广告":234, "视频广告":135, "搜索引擎":1548}
    this.Data["chart_data"] = data
    this.Data["chart_type"] = "pie"
}
Copier après la connexion

Dans le code, on définit une carte nommée data, qui contient les données du camembert. Semblable à la section précédente, nous transmettons ces données à la variable « chart_data » dans le modèle, ainsi qu'à la variable « chart_type » de type de graphique. Cependant, cette fois, nous utilisons « camembert » comme type de diagramme circulaire.

Ensuite, nous présentons le modèle et utilisons la bibliothèque ECharts pour restituer le graphique. Le code est le suivant :

{{.chart_data}}
{{.chart_type}}

{{if .chart_data}}
    <div id="myChart" style="width: 600px;height:400px;"></div>
{{end}}
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/3.5.4/echarts.min.js"></script>
<script>
$(document).ready(function(){
    var myChart = echarts.init(document.getElementById('myChart'));
    var option = {
        title: {
            text: '饼图'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: 10,
            data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
        },
        series: [
            {
                name: '访问来源',
                type: '{{.chart_type}}',
                radius: '45%',
                center: ['50%', '60%'],
                data: [
                    {value: 335, name: '直接访问'},
                    {value: 310, name: '邮件营销'},
                    {value: 234, name: '联盟广告'},
                    {value: 135, name: '视频广告'},
                    {value: 1548, name: '搜索引擎'}
                ],
                label: {
                    normal: {
                        show: false,
                        position: 'inside'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '20',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                }
            }
        ]
    };
    myChart.setOption(option);
});
</script>
Copier après la connexion

Dans le code, nous utilisons d'abord {{.chart_data}} et {{.chart_type}} pour afficher les données et le type de graphique. Ensuite, nous utilisons également des instructions conditionnelles pour contrôler si la zone du graphique est affichée.

Dans les éléments de configuration du graphique, nous utilisons le tableau "data" avec un format spécifique pour définir les données du graphique. Parmi eux, la valeur est utilisée pour représenter la taille des données et le nom est utilisé pour représenter le nom des données. Dans le même temps, nous pouvons également utiliser des attributs tels que "label" et "labelLine" pour définir des étiquettes.

  1. Résumé

Cet article explique comment utiliser ECharts et Golang pour dessiner facilement de superbes graphiques statistiques. Nous avons d’abord implémenté un simple graphique à barres et un diagramme circulaire, et avons donné des exemples de code spécifiques. Grâce à ces exemples, nous pouvons apprendre à utiliser ECharts et à le combiner avec le framework golang pour répondre aux besoins de 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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment lire et écrire des fichiers en toute sécurité avec Golang ? Comment lire et écrire des fichiers en toute sécurité avec Golang ? Jun 06, 2024 pm 05:14 PM

Lire et écrire des fichiers en toute sécurité dans Go est crucial. Les directives incluent : Vérification des autorisations de fichiers Fermeture de fichiers à l'aide de reports Validation des chemins de fichiers Utilisation de délais d'attente contextuels Le respect de ces directives garantit la sécurité de vos données et la robustesse de vos applications.

Comment configurer le pool de connexions pour la connexion à la base de données Golang ? Comment configurer le pool de connexions pour la connexion à la base de données Golang ? Jun 06, 2024 am 11:21 AM

Comment configurer le pool de connexions pour les connexions à la base de données Go ? Utilisez le type DB dans le package base de données/sql pour créer une connexion à la base de données ; définissez MaxOpenConns pour contrôler le nombre maximum de connexions simultanées ; définissez MaxIdleConns pour définir le nombre maximum de connexions inactives ; définissez ConnMaxLifetime pour contrôler le cycle de vie maximum de la connexion ;

Comparaison des avantages et des inconvénients du framework Golang Comparaison des avantages et des inconvénients du framework Golang Jun 05, 2024 pm 09:32 PM

Le framework Go se distingue par ses hautes performances et ses avantages en matière de concurrence, mais il présente également certains inconvénients, tels qu'être relativement nouveau, avoir un petit écosystème de développeurs et manquer de certaines fonctionnalités. De plus, les changements rapides et les courbes d’apprentissage peuvent varier d’un cadre à l’autre. Le framework Gin est un choix populaire pour créer des API RESTful en raison de son routage efficace, de sa prise en charge JSON intégrée et de sa puissante gestion des erreurs.

Quelles sont les meilleures pratiques pour la gestion des erreurs dans le framework Golang ? Quelles sont les meilleures pratiques pour la gestion des erreurs dans le framework Golang ? Jun 05, 2024 pm 10:39 PM

Meilleures pratiques : créer des erreurs personnalisées à l'aide de types d'erreurs bien définis (package d'erreurs) fournir plus de détails consigner les erreurs de manière appropriée propager correctement les erreurs et éviter de masquer ou de supprimer les erreurs Wrap si nécessaire pour ajouter du contexte

Explication pratique détaillée du développement du framework Golang : questions et réponses Explication pratique détaillée du développement du framework Golang : questions et réponses Jun 06, 2024 am 10:57 AM

Dans le développement du framework Go, les défis courants et leurs solutions sont les suivants : Gestion des erreurs : utilisez le package d'erreurs pour la gestion et utilisez un middleware pour gérer les erreurs de manière centralisée. Authentification et autorisation : intégrez des bibliothèques tierces et créez un middleware personnalisé pour vérifier les informations d'identification. Traitement simultané : utilisez des goroutines, des mutex et des canaux pour contrôler l'accès aux ressources. Tests unitaires : utilisez les packages, les simulations et les stubs gotest pour l'isolation, ainsi que les outils de couverture de code pour garantir la suffisance. Déploiement et surveillance : utilisez les conteneurs Docker pour regrouper les déploiements, configurer les sauvegardes de données et suivre les performances et les erreurs avec des outils de journalisation et de surveillance.

Quels sont les problèmes courants de gestion des dépendances dans le framework Golang ? Quels sont les problèmes courants de gestion des dépendances dans le framework Golang ? Jun 05, 2024 pm 07:27 PM

Problèmes courants et solutions dans la gestion des dépendances du framework Go : Conflits de dépendances : utilisez les outils de gestion des dépendances, spécifiez la plage de versions acceptée et recherchez les conflits de dépendances. Verrouillage du fournisseur : résolu par la duplication de code, le verrouillage des fichiers GoModulesV2 ou le nettoyage régulier du répertoire du fournisseur. Failles de sécurité : utilisez des outils d'audit de sécurité, choisissez des fournisseurs réputés, surveillez les bulletins de sécurité et maintenez les dépendances à jour.

Comment enregistrer les données JSON dans la base de données dans Golang ? Comment enregistrer les données JSON dans la base de données dans Golang ? Jun 06, 2024 am 11:24 AM

Les données JSON peuvent être enregistrées dans une base de données MySQL à l'aide de la bibliothèque gjson ou de la fonction json.Unmarshal. La bibliothèque gjson fournit des méthodes pratiques pour analyser les champs JSON, et la fonction json.Unmarshal nécessite un pointeur de type cible pour désorganiser les données JSON. Les deux méthodes nécessitent la préparation d'instructions SQL et l'exécution d'opérations d'insertion pour conserver les données dans la base de données.

Golang Framework vs Go Framework : comparaison de l'architecture interne et des fonctionnalités externes Golang Framework vs Go Framework : comparaison de l'architecture interne et des fonctionnalités externes Jun 06, 2024 pm 12:37 PM

La différence entre le framework GoLang et le framework Go se reflète dans l'architecture interne et les fonctionnalités externes. Le framework GoLang est basé sur la bibliothèque standard Go et étend ses fonctionnalités, tandis que le framework Go se compose de bibliothèques indépendantes pour atteindre des objectifs spécifiques. Le framework GoLang est plus flexible et le framework Go est plus facile à utiliser. Le framework GoLang présente un léger avantage en termes de performances et le framework Go est plus évolutif. Cas : gin-gonic (framework Go) est utilisé pour créer l'API REST, tandis qu'Echo (framework GoLang) est utilisé pour créer des applications Web.

See all articles