pembangunan bahagian belakang
Golang
Cara mudah melukis carta statistik pelbagai menggunakan ECharts dan golang
Cara mudah melukis carta statistik pelbagai menggunakan ECharts dan golang
Dengan peningkatan permintaan untuk analisis data, lukisan carta statistik yang pelbagai telah menjadi keperluan yang sangat biasa. ECharts dan golang ialah dua alatan yang sangat baik yang boleh membantu kami melukis pelbagai carta dengan mudah. Di bawah saya akan memperkenalkan cara menggunakan ECharts dan golang untuk mencapai tujuan ini, sambil memberikan beberapa contoh kod khusus.
- Memasang dan menggunakan ECharts
Sebelum menggunakan ECharts, kita perlu memasangnya terlebih dahulu. Anda boleh memuat turun versi stabil terkini di tapak web rasmi (https://echarts.apache.org) dan ikut arahan untuk memasangnya. Selepas pemasangan selesai, kita boleh mula menggunakan ECharts untuk melukis pelbagai jenis carta.
Apabila menggunakan ECharts, kita perlu menyediakan tatasusunan yang mengandungi semua data dan kemudian menyerahkannya kepada ECharts untuk menjana carta yang sepadan secara automatik. Di bawah ialah contoh kod mudah yang memplot histogram.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>柱状图示例</title>
<script src="echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:600px;height:400px;"></div>
<script>
var data = [5, 20, 36, 10, 10, 20];
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '柱状图示例'
},
tooltip: {},
xAxis: {
data: ['A', 'B', 'C', 'D', 'E', 'F']
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: data
}]
};
myChart.setOption(option);
</script>
</body>
</html>Seperti yang anda lihat, kod contoh ini mengandungi halaman HTML dengan tatasusunan JavaScript yang mengandungi data yang dimasukkan ke dalamnya. ECharts secara automatik akan menukar data menjadi histogram dan menjadikannya kepada elemen dengan ID 'utama'.
Selain itu, ECharts juga menyediakan pelbagai jenis carta, seperti carta garis, carta pai, carta serakan, dll. Kita boleh memilih jenis carta yang berbeza mengikut keperluan sebenar.
- Gunakan golang untuk menyediakan data
golang ialah bahasa pengaturcaraan yang sangat popular Ia menyokong pelbagai struktur data dan pelbagai operasi, dan sangat sesuai untuk memproses data. Sebelum menggunakan ECharts, biasanya kita perlu menyediakan semua data carta untuk dilukis dan menukarnya kepada format yang boleh dikenali oleh ECharts. golang dapat membantu kami menyiapkan kerja ini.
Berikut ialah program golang mudah yang boleh menjana tatasusunan yang mengandungi 100 nombor rawak dan mengeluarkannya ke dalam data format json.
package main
import (
"encoding/json"
"fmt"
"math/rand"
)
type Data struct {
Id int `json:"id"`
Value int `json:"value"`
}
func main() {
data := make([]Data, 0)
for i := 0; i < 100; i++ {
data = append(data, Data{Id: i, Value: rand.Intn(100)})
}
jsonData, err := json.Marshal(data)
if err != nil {
fmt.Println("json encode error")
return
}
fmt.Println(string(jsonData))
}Dalam program ini, kami menggunakan pakej rand untuk menjana tatasusunan yang mengandungi 100 nombor rawak, dan kemudian menukarnya kepada data format json. Data json ini boleh dikenali secara langsung oleh ECharts dan digunakan untuk melukis pelbagai jenis carta.
- Sepadukan ECharts dan golang
Dengan ECharts dan golang, kita boleh mula mengintegrasikan kedua-duanya dan melukis pelbagai jenis carta. Di bawah ialah program golang mudah yang menjana tatasusunan json yang mengandungi data rawak dan menghantarnya ke halaman HTML. Dalam halaman HTML, kita boleh menggunakan ECharts untuk menarik data ini ke dalam histogram.
Kod golang:
package main
import (
"encoding/json"
"fmt"
"math/rand"
"net/http"
)
type Data struct {
Id int `json:"id"`
Value int `json:"value"`
}
func main() {
http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
data := make([]Data, 0)
for i := 0; i < 10; i++ {
data = append(data, Data{Id: i, Value: rand.Intn(100)})
}
jsonData, err := json.Marshal(data)
if err != nil {
fmt.Println("json encode error")
return
}
w.Header().Set("Content-Type", "text/html; charset=utf-8")
fmt.Fprintf(w, `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>柱状图示例</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.0/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:600px;height:400px;"></div>
<script>
var data = %s;
var xAxisData = [];
var seriesData = [];
for (var i = 0; i < data.length; i++) {
xAxisData.push(data[i].id);
seriesData.push(data[i].value);
}
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '柱状图示例'
},
tooltip: {},
xAxis: {
data: xAxisData
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: seriesData
}]
};
myChart.setOption(option);
</script>
</body>
</html>
`, jsonData)
})
http.ListenAndServe(":8080", nil)
}Dalam kod ini, kami menggunakan pakej net/http untuk mencipta pelayan web ringkas dan mengeluarkan tatasusunan json yang mengandungi data rawak apabila mengakses direktori akar. Tatasusunan json ini boleh digunakan secara langsung oleh halaman HTML.
Halaman HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>柱状图示例</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.0/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:600px;height:400px;"></div>
<script>
var data = [{"id":0,"value":36},{"id":1,"value":52},{"id":2,"value":64},{"id":3,"value":89},{"id":4,"value":48},{"id":5,"value":52},{"id":6,"value":10},{"id":7,"value":75},{"id":8,"value":86},{"id":9,"value":58}];
var xAxisData = [];
var seriesData = [];
for (var i = 0; i < data.length; i++) {
xAxisData.push(data[i].id);
seriesData.push(data[i].value);
}
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '柱状图示例'
},
tooltip: {},
xAxis: {
data: xAxisData
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: seriesData
}]
};
myChart.setOption(option);
</script>
</body>
</html>Dalam halaman HTML ini, kami menggunakan kaedah JSON.parse() untuk menghuraikan data json yang dijana oleh golang ke dalam tatasusunan javascript, dan kemudian menyerahkannya kepada ECharts. Akhirnya, kami mendapat histogram yang bagus.
Atas ialah kandungan terperinci Cara mudah melukis carta statistik pelbagai 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
Bagaimana untuk membaca dan menulis fail dengan selamat menggunakan Golang?
Jun 06, 2024 pm 05:14 PM
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 kolam sambungan untuk sambungan pangkalan data Golang?
Jun 06, 2024 am 11:21 AM
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;
Persamaan dan Perbezaan antara Golang dan C++
Jun 05, 2024 pm 06:12 PM
Golang dan C++ masing-masing adalah sampah yang dikumpul dan bahasa pengaturcaraan pengurusan memori manual, dengan sistem sintaks dan jenis yang berbeza. Golang melaksanakan pengaturcaraan serentak melalui Goroutine, dan C++ melaksanakannya melalui benang. Pengurusan memori Golang adalah mudah, dan C++ mempunyai prestasi yang lebih kukuh. Dalam kes praktikal, kod Golang adalah lebih ringkas dan C++ mempunyai kelebihan prestasi yang jelas.
Seberapa curam keluk pembelajaran seni bina rangka kerja golang?
Jun 05, 2024 pm 06:59 PM
Keluk pembelajaran seni bina rangka kerja Go bergantung pada kebiasaan dengan bahasa Go dan pembangunan bahagian belakang serta kerumitan rangka kerja yang dipilih: pemahaman yang baik tentang asas bahasa Go. Ia membantu untuk mempunyai pengalaman pembangunan bahagian belakang. Rangka kerja yang berbeza dalam kerumitan membawa kepada perbezaan dalam keluk pembelajaran.
Bagaimana untuk menjana elemen rawak dari senarai di Golang?
Jun 05, 2024 pm 04:28 PM
Cara menjana unsur rawak senarai dalam Golang: gunakan rand.Intn(len(senarai)) untuk menjana integer rawak dalam julat panjang senarai gunakan integer sebagai indeks untuk mendapatkan elemen yang sepadan daripada senarai.
Perbandingan kebaikan dan keburukan rangka kerja golang
Jun 05, 2024 pm 09:32 PM
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.
Apakah amalan terbaik untuk pengendalian ralat dalam rangka kerja Golang?
Jun 05, 2024 pm 10:39 PM
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
arahan penggunaan dokumen rangka kerja golang
Jun 05, 2024 pm 06:04 PM
Bagaimana untuk menggunakan dokumentasi rangka kerja Go? Tentukan jenis dokumen: tapak web rasmi, repositori GitHub, sumber pihak ketiga. Fahami struktur dokumentasi: permulaan, tutorial mendalam, manual rujukan. Cari maklumat seperti yang diperlukan: Gunakan struktur organisasi atau fungsi carian. Fahami istilah dan konsep: Baca dengan teliti dan fahami istilah dan konsep baharu. Kes praktikal: Gunakan Beego untuk mencipta pelayan web mudah. Dokumentasi rangka kerja Go yang lain: Gin, Echo, Buffalo, Fiber.
