Cara membina komponen carta menggunakan bahasa Go dan Vue.js

Dengan kemunculan era Internet, analisis data dan paparan visual telah menjadi bahagian yang diperlukan dalam pelbagai aplikasi. Dengan pembangunan aplikasi web moden, cara menggunakan alat yang mudah digunakan dan cekap untuk memproses data dan mencipta komponen carta yang cantik telah menjadi topik penting. Dalam artikel ini, kami akan memperkenalkan cara membina komponen carta menggunakan bahasa Go dan Vue.js.

Bahasa Go dan Vue.js ialah dua alatan sumber terbuka yang popular, kedua-duanya telah mendapat perhatian dan penggunaan yang meluas. Bahasa Go ialah bahasa pengaturcaraan baru muncul yang direka untuk menyediakan kecekapan, kebolehpercayaan dan kesederhanaan, dan telah menjadi bahasa pengaturcaraan sebelah pelayan yang popular. Vue.js ialah rangka kerja JavaScript yang popular terutamanya berguna untuk membina komponen antara muka pengguna interaktif seperti carta. Kedua-dua bahasa Go dan Vue.js mudah dipelajari dan digunakan serta mudah untuk dikembangkan.

Dalam artikel ini, kami akan menggunakan bahasa Go untuk menulis kod hujung belakang, memproses data dan menyediakan API data carta. Kami kemudiannya akan menggunakan rangka kerja bahagian hadapan Vue.js untuk mencipta komponen carta dan mendapatkan data dari bahagian belakang, kemudian memvisualisasikan data. Kami akan menggunakan dua perpustakaan carta popular: Chart.js dan Plotly.js. Perpustakaan ini menggunakan teknologi HTML5 Canvas dan D3.js untuk mencipta carta responsif.

Pertama, mari mulakan dengan mencipta API pemprosesan data. Dalam contoh kami, kami akan menggunakan bahasa Go untuk menulis kod bahagian belakang. Untuk memudahkan proses, kami akan menggunakan rangka kerja Echo untuk mencipta laluan dan pengawal API kami. Dalam fail data.go, kami akan mentakrifkan struct yang dipanggil data yang mengandungi lima medan yang akan kami hantar dari bahagian hadapan ke API:

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

Langkah seterusnya adalah dalam fail main.go kami Cipta laluan API dan pengawal. Kami akan mentakrifkan fungsi pemprosesan laluan bernama getDataHandler, yang akan menerima permintaan GET yang dihantar oleh komponen Vue.js, menghuraikan data, melaksanakan pemprosesan data dan mengembalikan data. Berikut ialah kod khusus:

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

Kini kami telah mencipta API yang boleh menerima permintaan GET yang dihantar oleh komponen Vue.js dan mengembalikan data. Langkah seterusnya ialah mencipta komponen Vue.js yang akan mendapatkan data daripada API dan mencipta carta. Kami akan menggunakan Chart.js dan Plotly.js untuk menunjukkan cara membina dua jenis carta yang berbeza.

Pertama, kami akan mencipta komponen carta bar untuk memaparkan hasil jualan dan perbelanjaan bulanan. Kami mentakrifkan komponen bernama "BarChart" dalam Vue.js. Dalam Vue.js, kami akan menggunakan perpustakaan axios untuk mengendalikan permintaan HTTP dan mendapatkan data daripada API yang ditulis dalam bahasa Go. Dalam fungsi cangkuk yang dipasang, kami akan menggunakan perpustakaan axios untuk mendapatkan data daripada API dan pustaka Chart.js untuk mencipta carta bar. Berikut ialah kod komponen kami:

<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>

Dalam komponen ini, kami mendapat data daripada API dan kemudian menggunakan pustaka Chart.js untuk mencipta carta bar. Harap maklum bahawa kami menggunakan atribut $refs Vue.js untuk mentakrifkan rujukan kepada elemen kanvas dalam templat, dan kemudian menggunakannya dalam fungsi cangkuk yang dipasang untuk mendapatkan konteks kanvas. Kami menentukan jenis carta bar dan mencipta dua pengumpulan data untuk pendapatan dan perbelanjaan, kemudian gunakan sifat beginAtZero untuk menskalakan paksi-y.

Seterusnya, kami akan mencipta komponen carta serakan untuk memaparkan hasil jualan, perbelanjaan dan keuntungan. Sekali lagi, kami mendapat data daripada API dan merancang plot taburan mengikut bulan. Kami akan menggunakan komponen Plotly.js dan Vue.js untuk melukis plot serakan. Berikut ialah kod komponen kami:

<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>

Dalam fail komponen Vue.js ini, kami akan menggunakan atribut props Vue.js untuk menghantar data kepada komponen kami. Sekali lagi, kami menggunakan perpustakaan axios untuk mendapatkan data daripada API. Untuk setiap bulan, kami mencipta mata dan menentukan pendapatan pada paksi mendatar dan perbelanjaan pada paksi menegak. Kami juga memberitahu Plotly.js untuk menggunakan Untung sebagai teks untuk dipaparkan pada setiap titik, dan menetapkan saiz dan warna untuk setiap titik.

Dengan menggunakan bahasa Vue.js dan Go, kami telah mencipta dua komponen carta. Menggunakan komponen ini kita boleh mendapatkan data dan memaparkan data jualan secara interaktif. Tambahan pula, menggunakan Chart.js dan Plotly.js, kami boleh mencipta carta yang cantik dan sangat menyesuaikannya. Kaedah ini boleh digunakan pada projek visualisasi data lain dan menjadikan tapak web dan aplikasi visualisasi data membina pantas, mudah dan berskala.

Atas ialah kandungan terperinci Cara membina komponen carta menggunakan bahasa Go dan Vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!