Panduan praktikal ECharts dan golang: tutorial membuat carta statistik yang pelbagai

ECharts dan panduan praktikal golang: Tutorial membuat carta statistik yang pelbagai, memerlukan contoh kod khusus

Sebagai peneraju dalam bidang visualisasi data, ECharts tidak boleh digantikan dalam banyak senario. Sebagai bahasa pengaturcaraan dengan prestasi yang berkuasa, golang juga mempunyai kelebihan tertentu dalam senario data besar. Artikel ini akan memperkenalkan cara menggunakan ECharts dan golang untuk mencipta carta statistik yang pelbagai dan memberikan contoh kod khusus.

1. Persediaan

Sebelum anda bermula, anda perlu menguasai kemahiran asas berikut:

• Sintaks asas golang dan penggunaan beberapa perpustakaan asas
• Penggunaan asas dan konfigurasi ECharts
CSS Familiar
• JS, dsb. Asas bahagian hadapan

2. Pilih sumber data

Sebelum membuat carta statistik, kita perlu menentukan sumber data untuk digunakan. Di sini, kami mengambil membaca pangkalan data MySQL sebagai contoh, dan menggunakan perpustakaan pihak ketiga "pangkalan data/sql" dan "go-sql-driver/mysql" untuk mencapai bacaan. Kod sampel adalah seperti berikut:

import (
    "database/sql"
    "fmt"
    _ "github.com/go-sql-driver/mysql"
)

func main() {
    // connect to database server
    db, err := sql.Open("mysql", "user:password@tcp(127.0.0.1:3306)/database_name")
    if err != nil {
        fmt.Println("Failed to connect to database: ", err)
        return
    }
    defer db.Close()

    // execute query
    rows, err := db.Query("SELECT * FROM table_name")
    if err != nil {
        fmt.Println("Failed to execute query: ", err)
        return
    }
    defer rows.Close()

    // process query result
    for rows.Next() {
        var field1 int
        var field2 string
        // read fields from row
        err = rows.Scan(&field1, &field2)
        if err != nil {
            fmt.Println("Failed to read row: ", err)
            continue
        }
        // do something with fields
        fmt.Println(field1, field2)
    }
}

3. Jana carta statistik

Selepas mendapatkan data, anda boleh menggunakan ECharts untuk menjana carta statistik. ECharts menyediakan pelbagai jenis carta, termasuk carta bar, carta garis, carta pai dan banyak lagi. Di sini kita mengambil histogram sebagai contoh untuk melihat cara menjana histogram mudah. Kod sampel adalah seperti berikut:

import (
    "github.com/chenjiandongx/go-echarts/charts"
    "github.com/chenjiandongx/go-echarts/opts"
)

func main() {
    // create a bar chart
    bar := charts.NewBar()

    // set chart title and axes labels
    bar.SetGlobalOptions(
        charts.WithTitleOpts(opts.Title{
            Title: "Bar Chart Example",
        }),
        charts.WithXAxisOpts(opts.XAxis{
            Name: "X Axis",
        }),
        charts.WithYAxisOpts(opts.YAxis{
            Name: "Y Axis",
        }),
    )

    // add data series to chart
    bar.AddSeries("Series 1", []opts.BarData{
        {Name: "A", Value: 10},
        {Name: "B", Value: 20},
        {Name: "C", Value: 30},
        {Name: "D", Value: 40},
        {Name: "E", Value: 50},
    })

    // render chart to HTML page
    page := charts.NewPage()
    page.Add(bar)
    page.Render("bar.html")
}

Dalam contoh ini, kami menggunakan go-echarts perpustakaan pihak ketiga untuk menjana histogram. Mula-mula buat objek Bar, tetapkan label tajuk dan paksi, kemudian tambahkan siri data, dan jadikan carta ke halaman HTML.

4. Penggambaran data

Akhir sekali, buka halaman HTML yang dijana dalam penyemak imbas untuk melihat kesan histogram. Dalam pembangunan sebenar, kami mungkin perlu menggabungkan berbilang carta untuk paparan, atau menggunakan sumber data yang berbeza untuk menjana carta yang berbeza. Di sini, kita boleh menggunakan enjin templat untuk menjana halaman HTML yang berbeza secara dinamik. Kod sampel adalah seperti berikut:

import (
    "database/sql"
    "fmt"
    _ "github.com/go-sql-driver/mysql"
    "github.com/gin-gonic/gin"
    "github.com/pkg/errors"
    "net/http"
)

func main() {
    r := gin.Default()
    r.LoadHTMLGlob("templates/*")

    // define route handler
    r.GET("/bar/:table/:x/:y", func(c *gin.Context) {
        table := c.Param("table")
        x := c.Param("x")
        y := c.Param("y")
        data, err := queryData(table, x, y)
        if err != nil {
            c.String(http.StatusInternalServerError, "Failed to query data: "+err.Error())
            return
        }
        bar := charts.NewBar()
        bar.SetGlobalOptions(
            charts.WithTitleOpts(opts.Title{
                Title: fmt.Sprintf("Bar Chart (%s vs %s)", x, y),
            }),
            charts.WithXAxisOpts(opts.XAxis{
                Name: x,
            }),
            charts.WithYAxisOpts(opts.YAxis{
                Name: y,
            }),
        )
        bar.AddSeries(table, data)
        c.HTML(http.StatusOK, "bar.html", gin.H{
            "graph": bar.JSChart(),
        })
    })

    // listen on port 8080
    r.Run(":8080")
}

// query data from MySQL database
func queryData(table, x, y string) ([]opts.BarData, error) {
    db, err := sql.Open("mysql", "user:password@tcp(127.0.0.1:3306)/database_name")
    if err != nil {
        return nil, errors.Wrap(err, "Failed to connect to database")
    }
    defer db.Close()
    rows, err := db.Query(fmt.Sprintf("SELECT %s, %s FROM %s", x, y, table))
    if err != nil {
        return nil, errors.Wrap(err, "Failed to execute query")
    }
    defer rows.Close()
    var result []opts.BarData
    for rows.Next() {
        var field1 string
        var field2 float64
        err = rows.Scan(&field1, &field2)
        if err != nil {
            return nil, errors.Wrap(err, "Failed to read row")
        }
        result = append(result, opts.BarData{Name: field1, Value: field2})
    }
    return result, nil
}

Dalam contoh ini, kami menggunakan rangka kerja web gin untuk mentakrifkan penghalaan HTTP dan fungsi pemprosesan. Laluan "/bar/:table/:x/:y" ditakrifkan dan parameter berbeza boleh dihantar masuk untuk menjana halaman HTML berbeza secara dinamik. Dalam fungsi pemprosesan, data dibaca terlebih dahulu daripada pangkalan data MySQL, kemudian ECharts digunakan untuk menjana histogram, dan akhirnya carta dibenamkan dalam templat HTML dan dikembalikan kepada pelayar klien.

5. Ringkasan

Melalui kajian artikel ini, kami mempelajari cara menggunakan ECharts dan golang untuk menjana carta statistik yang pelbagai. Sama ada jenis carta biasa seperti carta bar, carta garisan atau carta pai, kami boleh melakukannya dengan cara ini. Selain itu, kami juga boleh menggunakan enjin templat untuk menjana halaman HTML yang berbeza secara dinamik untuk meningkatkan fleksibiliti dan kebolehgunaan visualisasi data. Sudah tentu, terdapat lebih banyak butiran dan teknik yang perlu diberi perhatian dalam pembangunan sebenar, dan lebih banyak latihan dan penerokaan diperlukan.

Atas ialah kandungan terperinci Panduan praktikal ECharts dan golang: tutorial membuat carta statistik yang pelbagai. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!