Praktischer Leitfaden zu ECharts und Golang: Tutorial zum Erstellen verschiedener statistischer Diagramme

ECharts und Golang-Praxisleitfaden: Tutorial zum Erstellen verschiedener statistischer Diagramme, die spezifische Codebeispiele erfordern

Als führendes Unternehmen im Bereich der Datenvisualisierung ist ECharts in vielen Szenarien unersetzlich. Als leistungsstarke Programmiersprache bietet Golang auch in Big-Data-Szenarien gewisse Vorteile. In diesem Artikel wird erläutert, wie Sie mit ECharts und Golang verschiedene statistische Diagramme erstellen, und es werden spezifische Codebeispiele bereitgestellt.

1. Vorbereitung

Bevor Sie beginnen, müssen Sie die folgenden Grundkenntnisse beherrschen:

• Grundlegende Syntax von Golang und die Verwendung einiger grundlegender Bibliotheken
• Grundlegende Verwendung und Konfiguration von ECharts
• Vertraut mit HTML, CSS, JS usw. Front-End-Grundlagen

2. Datenquelle auswählen

Bevor wir statistische Diagramme erstellen, müssen wir die zu verwendende Datenquelle bestimmen. Hier nehmen wir das Lesen der MySQL-Datenbank als Beispiel und verwenden die Drittanbieterbibliotheken „database/sql“ und „go-sql-driver/mysql“, um das Lesen zu erreichen. Der Beispielcode lautet wie folgt:

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. Statistische Diagramme generieren

Nachdem Sie die Daten erhalten haben, können Sie ECharts verwenden, um statistische Diagramme zu erstellen. ECharts bietet eine Vielzahl von Diagrammtypen, darunter Balkendiagramme, Liniendiagramme, Kreisdiagramme und mehr. Hier nehmen wir ein Histogramm als Beispiel, um zu sehen, wie ein einfaches Histogramm erstellt wird. Der Beispielcode lautet wie folgt:

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")
}

In diesem Beispiel verwenden wir die Drittanbieterbibliothek go-echarts, um Histogramme zu generieren. Erstellen Sie zunächst ein Bar-Objekt, legen Sie die Titel- und Achsenbeschriftungen fest, fügen Sie dann die Datenreihe hinzu und rendern Sie das Diagramm auf der HTML-Seite.

4. Datenvisualisierung

Öffnen Sie abschließend die generierte HTML-Seite im Browser, um die Wirkung des Histogramms zu sehen. In der tatsächlichen Entwicklung müssen wir möglicherweise mehrere Diagramme zur Anzeige kombinieren oder unterschiedliche Datenquellen verwenden, um unterschiedliche Diagramme zu generieren. Hier können wir die Template-Engine verwenden, um verschiedene HTML-Seiten dynamisch zu generieren. Der Beispielcode lautet wie folgt:

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
}

In diesem Beispiel verwenden wir das Gin-Webframework, um HTTP-Routing- und -Verarbeitungsfunktionen zu definieren. Die Route „/bar/:table/:x/:y“ ist definiert und es können verschiedene Parameter übergeben werden, um dynamisch verschiedene HTML-Seiten zu generieren. In der Verarbeitungsfunktion werden die Daten zunächst aus der MySQL-Datenbank gelesen, dann mit ECharts ein Histogramm generiert und schließlich das Diagramm in die HTML-Vorlage eingebettet und an den Client-Browser zurückgegeben.

5. Zusammenfassung

Durch das Studium dieses Artikels haben wir gelernt, wie man mit ECharts und Golang verschiedene statistische Diagramme erstellt. Ob es sich um gängige Diagrammtypen wie Balkendiagramme, Liniendiagramme oder Kreisdiagramme handelt, wir können es auf diese Weise tun. Darüber hinaus können wir mithilfe von Template-Engines dynamisch verschiedene HTML-Seiten generieren, um die Flexibilität und Anwendbarkeit der Datenvisualisierung zu verbessern. Natürlich müssen bei der tatsächlichen Entwicklung noch mehr Details und Techniken beachtet werden, und es sind mehr Übung und Erkundung erforderlich.

Das obige ist der detaillierte Inhalt vonPraktischer Leitfaden zu ECharts und Golang: Tutorial zum Erstellen verschiedener statistischer Diagramme. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!