


Cara mudah melukis carta statistik yang cantik menggunakan ECharts dan golang
Cara menggunakan ECharts dan golang untuk melukis carta statistik yang cantik dengan mudah
Dengan pengumpulan dan penggunaan data yang berterusan, carta statistik telah menjadi cara penting untuk memaparkan data. Dalam bidang ini, ECharts ialah perpustakaan carta JavaScript sumber terbuka yang popular Ia berkuasa, mudah digunakan dan menyokong sejumlah besar gaya dan jenis carta, jadi ia telah digunakan secara meluas dalam pembangunan. Pada masa yang sama, sebagai bahasa pengaturcaraan yang cekap, golang menjadi semakin popular dalam pembangunan back-end Web.
Artikel ini terutamanya memperkenalkan cara menggunakan ECharts dan golang untuk melukis carta statistik yang cantik, dan memberikan contoh kod khusus.
- Persediaan
Sebelum membangunkan carta statistik, kita perlu menyediakan alatan dan persekitaran berikut:
- Persekitaran Golang
- Rangka kerja Beego
- ECharts library
laman web rasmi , rangka kerja Beego boleh dipasang melalui arahan berikut:
go get github.com/astaxie/beego
Pustaka ECharts boleh dipasang melalui arahan berikut:
npm install echarts --save
- Melukis histogram
Mula-mula, kita cuba melukis histogram mudah. Kodnya adalah seperti berikut:
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" }
Dalam kod, kami mentakrifkan pengawal bernama MainController dan melaksanakan kaedah Dapatkan. Antaranya, kami mentakrifkan tatasusunan bernama data, yang mengandungi data histogram. Kami kemudian menghantar data ini kepada pembolehubah "chart_data" dalam templat, serta pembolehubah "chart_type" jenis carta. Khususnya, kami menggunakan "bar" sebagai jenis histogram.
Seterusnya, kita perlu menyusun templat dan menggunakan perpustakaan ECharts untuk memaparkan carta. Kodnya adalah seperti berikut:
{{.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>
Dalam kod, kami mula-mula menggunakan {{.chart_data}} dan {{.chart_type}} untuk mengeluarkan data dan jenis carta supaya kami boleh menyemak ketepatan data semasa menyahpepijat. Kemudian, kami menggunakan pernyataan bersyarat untuk menentukan sama ada data telah diluluskan dan kawasan carta akan dipaparkan hanya selepas data diluluskan.
Seterusnya, kami memperkenalkan perpustakaan ECharts dan menggunakan kaedah echarts.init untuk memulakan elemen DOM dengan ID yang ditentukan. Dalam contoh ini, kami menambahkan beberapa item konfigurasi asas, seperti tajuk, petua alat, legenda, xAxis, yAxis, siri, dsb. Antaranya, xAxis dan yAxis masing-masing mentakrifkan data bagi paksi mendatar dan paksi menegak, dan siri digunakan untuk menentukan data carta.
- Melukis carta pai
Selain carta bar, kita juga boleh menggunakan ECharts dan golang untuk melukis jenis carta yang lain. Seterusnya kita cuba melukis carta pai. Kodnya adalah seperti berikut:
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" }
Dalam kod, kami mentakrifkan peta bernama data, yang mengandungi data carta pai. Sama seperti bahagian sebelumnya, kami menghantar data ini kepada pembolehubah "chart_data" dalam templat, serta pembolehubah "chart_type" jenis carta. Walau bagaimanapun, kali ini kita menggunakan "pai" sebagai jenis carta pai.
Seterusnya, kami menyusun templat dan menggunakan perpustakaan ECharts untuk memaparkan carta. Kodnya adalah seperti berikut:
{{.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>
Dalam kod, kami mula-mula menggunakan {{.chart_data}} dan {{.chart_type}} untuk mengeluarkan data dan jenis carta. Kemudian, kami juga menggunakan pernyataan bersyarat untuk mengawal sama ada kawasan carta dipaparkan.
Dalam item konfigurasi carta, kami menggunakan tatasusunan "data" dengan format khusus untuk menentukan data carta. Antaranya, nilai digunakan untuk mewakili saiz data, dan nama digunakan untuk mewakili nama data. Pada masa yang sama, kami juga boleh menggunakan atribut seperti "label" dan "labelLine" untuk menetapkan label.
- Ringkasan
Artikel ini memperkenalkan cara menggunakan ECharts dan golang untuk melukis carta statistik yang cantik dengan mudah. Kami mula-mula melaksanakan carta bar ringkas dan carta pai, dan memberikan contoh kod khusus. Melalui contoh ini, kita boleh belajar cara menggunakan ECharts dan menggabungkannya dengan rangka kerja golang untuk mencapai keperluan visualisasi data.
Atas ialah kandungan terperinci Cara mudah melukis carta statistik yang cantik menggunakan ECharts dan golang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Membaca dan menulis fail dengan selamat dalam Go adalah penting. Garis panduan termasuk: Menyemak kebenaran fail Menutup fail menggunakan tangguh Mengesahkan laluan fail Menggunakan tamat masa konteks Mengikuti garis panduan ini memastikan keselamatan data anda dan keteguhan aplikasi anda.

Bagaimana untuk mengkonfigurasi pengumpulan sambungan untuk sambungan pangkalan data Go? Gunakan jenis DB dalam pakej pangkalan data/sql untuk membuat sambungan pangkalan data untuk mengawal bilangan maksimum sambungan serentak;

Rangka kerja Go menyerlah kerana kelebihan prestasi tinggi dan konkurensinya, tetapi ia juga mempunyai beberapa kelemahan, seperti agak baharu, mempunyai ekosistem pembangun yang kecil dan kekurangan beberapa ciri. Selain itu, perubahan pantas dan keluk pembelajaran boleh berbeza dari rangka kerja ke rangka kerja. Rangka kerja Gin ialah pilihan popular untuk membina API RESTful kerana penghalaan yang cekap, sokongan JSON terbina dalam dan pengendalian ralat yang berkuasa.

Amalan terbaik: Cipta ralat tersuai menggunakan jenis ralat yang ditakrifkan dengan baik (pakej ralat) Sediakan lebih banyak butiran Log ralat dengan sewajarnya Sebarkan ralat dengan betul dan elakkan menyembunyikan atau menyekat ralat Balut seperti yang diperlukan untuk menambah konteks

Dalam pembangunan rangka kerja Go, cabaran biasa dan penyelesaiannya ialah: Pengendalian ralat: Gunakan pakej ralat untuk pengurusan dan gunakan perisian tengah untuk mengendalikan ralat secara berpusat. Pengesahan dan kebenaran: Sepadukan perpustakaan pihak ketiga dan cipta perisian tengah tersuai untuk menyemak bukti kelayakan. Pemprosesan serentak: Gunakan goroutine, mutex dan saluran untuk mengawal akses sumber. Ujian unit: Gunakan pakej, olok-olok dan stub untuk pengasingan dan alat liputan kod untuk memastikan kecukupan. Penerapan dan pemantauan: Gunakan bekas Docker untuk membungkus penggunaan, menyediakan sandaran data dan menjejak prestasi dan ralat dengan alat pengelogan dan pemantauan.

Masalah dan penyelesaian biasa dalam pengurusan pergantungan rangka kerja Go: Konflik pergantungan: Gunakan alatan pengurusan pergantungan, nyatakan julat versi yang diterima dan semak konflik pergantungan. Kunci masuk vendor: Diselesaikan dengan pertindihan kod, penguncian fail GoModulesV2 atau pembersihan direktori vendor secara tetap. Kerentanan keselamatan: Gunakan alat pengauditan keselamatan, pilih pembekal yang bereputasi, pantau buletin keselamatan dan pastikan kebergantungan dikemas kini.

Data JSON boleh disimpan ke dalam pangkalan data MySQL dengan menggunakan perpustakaan gjson atau fungsi json.Unmarshal. Pustaka gjson menyediakan kaedah kemudahan untuk menghuraikan medan JSON dan fungsi json.Unmarshal memerlukan penuding jenis sasaran kepada data JSON unmarshal. Kedua-dua kaedah memerlukan penyediaan pernyataan SQL dan melaksanakan operasi sisipan untuk mengekalkan data ke dalam pangkalan data.

Perbezaan antara rangka kerja GoLang dan rangka kerja Go ditunjukkan dalam seni bina dalaman dan ciri luaran. Rangka kerja GoLang adalah berdasarkan perpustakaan standard Go dan meluaskan fungsinya, manakala rangka kerja Go terdiri daripada perpustakaan bebas untuk mencapai tujuan tertentu. Rangka kerja GoLang lebih fleksibel dan rangka kerja Go lebih mudah digunakan. Rangka kerja GoLang mempunyai sedikit kelebihan dalam prestasi dan rangka kerja Go lebih berskala. Kes: gin-gonic (rangka Go) digunakan untuk membina REST API, manakala Echo (rangka kerja GoLang) digunakan untuk membina aplikasi web.
