


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

Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

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)

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 ;

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.

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 fonction FindStringSubmatch recherche la première sous-chaîne correspondant à une expression régulière : la fonction renvoie une tranche contenant la sous-chaîne correspondante, le premier élément étant la chaîne entière correspondante et les éléments suivants étant des sous-chaînes individuelles. Exemple de code : regexp.FindStringSubmatch(text,pattern) renvoie une tranche de sous-chaînes correspondantes. Cas pratique : Il peut être utilisé pour faire correspondre le nom de domaine dans l'adresse email, par exemple : email:="user@example.com", pattern:=@([^\s]+)$ pour obtenir la correspondance du nom de domaine [1].

Chemin d'apprentissage du backend: le parcours d'exploration du front-end à l'arrière-end en tant que débutant back-end qui se transforme du développement frontal, vous avez déjà la base de Nodejs, ...

L'utilisation de fuseaux horaires prédéfinis dans Go comprend les étapes suivantes : Importez le package « time ». Chargez un fuseau horaire spécifique via la fonction LoadLocation. Utilisez le fuseau horaire chargé dans des opérations telles que la création d'objets Time, l'analyse de chaînes horaires et l'exécution de conversions de date et d'heure. Comparez les dates en utilisant différents fuseaux horaires pour illustrer l'application de la fonctionnalité de fuseau horaire prédéfini.

FAQ sur le développement du framework Go : Sélection du framework : Dépend des exigences de l'application et des préférences du développeur, telles que Gin (API), Echo (extensible), Beego (ORM), Iris (performance). Installation et utilisation : Utilisez la commande gomod pour installer, importer le framework et l'utiliser. Interaction avec la base de données : utilisez les bibliothèques ORM, telles que gorm, pour établir des connexions et des opérations avec la base de données. Authentification et autorisation : utilisez un middleware de gestion de session et d'authentification tel que gin-contrib/sessions. Cas pratique : utilisez le framework Gin pour créer une API de blog simple qui fournit des fonctions POST, GET et autres.
