So erstellen Sie Diagrammkomponenten mit der Go-Sprache und Vue.js

Mit dem Aufkommen des Internetzeitalters sind Datenanalyse und visuelle Anzeige zu einem notwendigen Bestandteil verschiedener Anwendungen geworden. Mit der Entwicklung moderner Webanwendungen ist die Frage, wie man mit benutzerfreundlichen und effizienten Tools Daten verarbeiten und schöne Diagrammkomponenten erstellen kann, zu einem wichtigen Thema geworden. In diesem Artikel stellen wir vor, wie man Diagrammkomponenten mit der Sprache Go und Vue.js erstellt.

Go Language und Vue.js sind zwei beliebte Open-Source-Tools, die beide große Aufmerksamkeit und Verwendung gefunden haben. Die Go-Sprache ist eine aufstrebende Programmiersprache, die auf Effizienz, Zuverlässigkeit und Einfachheit ausgelegt ist und sich zu einer beliebten serverseitigen Programmiersprache entwickelt hat. Vue.js ist ein beliebtes JavaScript-Framework, das sich besonders für die Erstellung interaktiver Benutzeroberflächenkomponenten wie Diagramme eignet. Sowohl die Go-Sprache als auch Vue.js sind einfach zu erlernen und zu verwenden sowie leicht zu erweitern.

In diesem Artikel verwenden wir die Go-Sprache, um Backend-Code zu schreiben, Daten zu verarbeiten und eine Diagrammdaten-API bereitzustellen. Anschließend verwenden wir das Front-End-Framework Vue.js, um Diagrammkomponenten zu erstellen, Daten vom Back-End abzurufen und die Daten dann zu visualisieren. Wir werden zwei beliebte Diagrammbibliotheken verwenden: Chart.js und Plotly.js. Diese Bibliotheken nutzen HTML5 Canvas und D3.js-Technologie, um responsive Diagramme zu erstellen.

Zunächst beginnen wir mit der Erstellung einer Datenverarbeitungs-API. In unserem Beispiel verwenden wir die Go-Sprache, um den Backend-Code zu schreiben. Um den Prozess zu vereinfachen, verwenden wir das Echo-Framework, um unsere API-Routen und Controller zu erstellen. In der data.go-Datei definieren wir eine Struktur namens data, die die fünf Felder enthält, die wir vom Frontend an die API übergeben:

type data struct {
        Month    int     `json:"month"`
        Year     int     `json:"year"`
        Revenue  int     `json:"revenue"`
        Expenses int     `json:"expenses"`
        Profit   int     `json:"profit"`
}

Der nächste Schritt besteht darin, die API-Route in unserer main.go-Datei und unserem Controller zu erstellen . Wir werden eine Routenverarbeitungsfunktion namens getDataHandler definieren, die die von der Vue.js-Komponente gesendete GET-Anfrage akzeptiert, die Daten analysiert, die Datenverarbeitung durchführt und die Daten zurückgibt. Hier ist der spezifische Code:

func getDataHandler(c echo.Context) error {
    // 解析数据
    year, _ := strconv.Atoi(c.QueryParam("year"))
    month, _ := strconv.Atoi(c.QueryParam("month"))

    // 处理数据，此处我们省略了数据查询和处理代码

    // 返回数据
    response := []data{
        {Month: 1, Year: 2022, Revenue: 100000, Expenses: 50000, Profit: 50000},
        {Month: 2, Year: 2022, Revenue: 75000, Expenses: 40000, Profit: 35000},
        {Month: 3, Year: 2022, Revenue: 120000, Expenses: 80000, Profit: 40000},
        {Month: 4, Year: 2022, Revenue: 85000, Expenses: 60000, Profit: 25000},
        {Month: 5, Year: 2022, Revenue: 105000, Expenses: 75000, Profit: 30000},
        {Month: 6, Year: 2022, Revenue: 95000, Expenses: 55000, Profit: 40000},
        {Month: 7, Year: 2022, Revenue: 140000, Expenses: 65000, Profit: 75000},
        {Month: 8, Year: 2022, Revenue: 120000, Expenses: 45000, Profit: 75000},
        {Month: 9, Year: 2022, Revenue: 115000, Expenses: 50000, Profit: 65000},
        {Month: 10, Year: 2022, Revenue: 95000, Expenses: 60000, Profit: 35000},
        {Month: 11, Year: 2022, Revenue: 80000, Expenses: 40000, Profit: 40000},
        {Month: 12, Year: 2022, Revenue: 125000, Expenses: 80000, Profit: 45000},
    }
    return c.JSON(http.StatusOK, response)
}

Jetzt haben wir eine API erstellt, die von Vue.js-Komponenten gesendete GET-Anfragen akzeptieren und Daten zurückgeben kann. Der nächste Schritt besteht darin, eine Vue.js-Komponente zu erstellen, die die Daten von der API abruft und das Diagramm erstellt. Wir verwenden Chart.js und Plotly.js, um zu demonstrieren, wie man zwei verschiedene Arten von Diagrammen erstellt.

Zunächst erstellen wir eine Balkendiagrammkomponente zur Darstellung der monatlichen Umsatzerlöse und Ausgaben. Wir definieren eine Komponente namens „BarChart“ in Vue.js. In Vue.js verwenden wir die Axios-Bibliothek, um HTTP-Anfragen zu verarbeiten und Daten von einer in der Go-Sprache geschriebenen API abzurufen. In der Funktion „Mounted Hook“ verwenden wir die Axios-Bibliothek, um die Daten von der API abzurufen, und die Chart.js-Bibliothek, um das Balkendiagramm zu erstellen. Hier ist unser Komponentencode:

<template>
    <div>
        <canvas ref="bar"></canvas>
    </div>
</template>

<script>
    import axios from 'axios';
    import Chart from 'chart.js';

    export default {
        name: 'BarChart',
        mounted() {
            axios.get('/api/data?year=2022').then(response => {
                let data = response.data;

                let ctx = this.$refs.bar.getContext('2d');
                let myChart = new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: data.map(d => d.Month),
                        datasets: [{
                            label: 'Revenue',
                            data: data.map(d => d.Revenue),
                            backgroundColor: 'rgba(75, 192, 192, 0.2)',
                            borderColor: 'rgba(75, 192, 192, 1)',
                            borderWidth: 1
                        }, {
                            label: 'Expenses',
                            data: data.map(d => d.Expenses),
                            backgroundColor: 'rgba(255, 99, 132, 0.2)',
                            borderColor: 'rgba(255, 99, 132, 1)',
                            borderWidth: 1
                        }]
                    },
                    options: {
                        responsive: true,
                        scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero: true
                                }
                            }]
                        }
                    }
                });
            });
        }
    }
</script>

In dieser Komponente erhalten wir die Daten von der API und verwenden dann die Chart.js-Bibliothek, um das Balkendiagramm zu erstellen. Beachten Sie, dass wir das $refs-Attribut von Vue.js verwenden, um einen Verweis auf das Canvas-Element in der Vorlage zu definieren, und es dann in der gemounteten Hook-Funktion verwenden, um den Kontext des Canvas abzurufen. Wir geben den Typ des Balkendiagramms an und erstellen zwei Datensammlungen für Einnahmen und Ausgaben. Anschließend verwenden wir die Eigenschaft beginAtZero, um die Y-Achse zu skalieren.

Als nächstes erstellen wir eine Streudiagrammkomponente, um Umsatzerlöse, Ausgaben und Gewinn anzuzeigen. Auch hier beziehen wir die Daten von der API und zeichnen ein Streudiagramm pro Monat. Wir werden die Komponenten Plotly.js und Vue.js verwenden, um das Streudiagramm zu zeichnen. Hier ist unser Komponentencode:

<template>
    <div :id="divId"></div>
</template>

<script>
    import axios from 'axios';
    import Plotly from 'plotly.js-basic-dist';

    export default {
        props: ['chartData'],
        data() {
            return {
                divId: `scatter${Math.floor(Math.random() * 1000000)}`,
                layout: {
                    title: 'Revenue, Expenses and profit by Month',
                    xaxis: {
                        title: 'Revenue'
                    },
                    yaxis: {
                        title: 'Expenses'
                    },
                    hovermode: 'closest'
                }
            }
        },
        mounted() {
            axios.get('/api/data?year=2022').then(response => {
                let data = response.data;

                let scatterData = {
                    x: data.map(d => d.Revenue),
                    y: data.map(d => d.Expenses),
                    mode: 'markers',
                    hovertemplate: `Revenue: %{x:$,.2f}<br>Expenses: %{y:$,.2f}<br>Profit: %{text:$,.2f}`,
                    text: data.map(d => d.Profit),
                    marker: {
                        color: data.map(d => d.Profit),
                        size: 20,
                        line: {
                            width: 0.5,
                            color: 'white'
                        }
                    }
                };

                Plotly.newPlot(this.divId, [scatterData], this.layout);
            });
        }
    }
</script>

<style scoped>
    .plot {
        max-width: 100%;
        height: 500px;
    }
</style>

In dieser Vue.js-Komponentendatei verwenden wir das Vue.js-Props-Attribut, um Daten an unsere Komponente zu übergeben. Auch hier verwenden wir die Axios-Bibliothek, um Daten von der API abzurufen. Für jeden Monat erstellen wir einen Punkt und geben auf der horizontalen Achse die Einnahmen und auf der vertikalen Achse die Ausgaben an. Wir weisen Plotly.js außerdem an, Profit als Text für die Anzeige an jedem Punkt zu verwenden und die Größe und Farbe für jeden Punkt festzulegen.

Durch die Verwendung von Vue.js und der Go-Sprache haben wir zwei Diagrammkomponenten erstellt. Mithilfe dieser Komponenten können wir interaktiv Daten gewinnen und Verkaufsdaten darstellen. Darüber hinaus können wir mit Chart.js und Plotly.js wunderschöne Diagramme erstellen und diese individuell anpassen. Diese Methoden können auf andere Datenvisualisierungsprojekte angewendet werden und ermöglichen eine schnelle, einfache und skalierbare Erstellung von Websites und Anwendungen zur Datenvisualisierung.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie Diagrammkomponenten mit der Go-Sprache und Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!