


Comment dessiner facilement de superbes graphiques statistiques à l'aide d'ECharts 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.
- 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
La bibliothèque ECharts peut être installée via la commande suivante :
npm install echarts --save
- 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" }
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>
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.
- 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" }
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>
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.
- 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!

Outils d'IA chauds

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

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

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

AI Hentai Generator
Générez AI Hentai gratuitement.

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

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

Sujets chauds

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 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 ;

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.

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

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.

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.

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.

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.
