Go 言語と Vue.js を使用してグラフ コンポーネントを構築する方法

インターネット時代の到来により、データ分析と視覚的表示はさまざまなアプリケーションに必要な部分になりました。最新の Web アプリケーションの開発に伴い、使いやすく効率的なツールを使用してデータを処理し、美しいグラフ コンポーネントを作成する方法が重要なトピックになっています。この記事では、Go言語とVue.jsを使ってチャートコンポーネントを構築する方法を紹介します。

Go 言語と Vue.js は 2 つの人気のあるオープン ソース ツールであり、どちらも広く注目され、使用されています。 Go 言語は、効率性、信頼性、シンプルさを提供するように設計された新興プログラミング言語であり、サーバーサイド プログラミング言語として人気があります。 Vue.js は、グラフなどのインタラクティブなユーザー インターフェイス コンポーネントの構築に特に役立つ人気の JavaScript フレームワークです。 Go 言語と Vue.js はどちらも学習と使用が簡単で、拡張も簡単です。

この記事では、Go 言語を使用してバックエンド コードを記述し、データを処理し、グラフ データ API を提供します。次に、Vue.js フロントエンド フレームワークを使用してグラフ コンポーネントを作成し、バックエンドからデータを取得して、データを視覚化します。 Chart.js と Plotly.js という 2 つの一般的なグラフ作成ライブラリを使用します。これらのライブラリは、HTML5 Canvas と D3.js テクノロジーを使用して応答性の高いグラフを作成します。

まず、データ処理 API を作成することから始めましょう。この例では、Go 言語を使用してバックエンド コードを記述します。プロセスを簡素化するために、Echo フレームワークを使用して API ルートとコントローラーを作成します。 data.go ファイルで、フロントエンドから API に渡す 5 つのフィールドを含む data という構造体を定義します。

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

次のステップは main.go ファイルです API ルートの作成そしてコントローラー。 getDataHandler という名前のルート処理関数を定義します。この関数は、Vue.js コンポーネントによって送信された GET リクエストを受け取り、データを解析し、データ処理を実行してデータを返します。具体的なコードは次のとおりです。

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

これで、Vue.js コンポーネントによって送信された GET リクエストを受け入れ、データを返すことができる API を作成できました。次のステップでは、API からデータを取得してグラフを作成する Vue.js コンポーネントを作成します。 Chart.js と Plotly.js を使用して、2 つの異なるタイプのグラフを作成する方法を示します。

まず、月ごとの売上収益と支出を表示する棒グラフ コンポーネントを作成します。 Vue.js で「BarChart」という名前のコンポーネントを定義します。 Vue.js では、axios ライブラリを使用して HTTP リクエストを処理し、Go 言語で書かれた API からデータを取得します。マウントされたフック関数では、axios ライブラリを使用して API からデータを取得し、Chart.js ライブラリを使用して棒グラフを作成します。コンポーネント コードは次のとおりです。

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

このコンポーネントでは、API からデータを取得し、Chart.js ライブラリを使用して棒グラフを作成します。 Vue.js の $refs 属性を使用してテンプレート内の Canvas 要素への参照を定義し、それをマウントされたフック関数で使用してキャンバスのコンテキストを取得していることに注意してください。棒グラフの種類を指定し、収入と支出の 2 つのデータ コレクションを作成し、beginAtZero プロパティを使用して y 軸をスケールします。

次に、売上収益、経費、利益を表示する散布図コンポーネントを作成します。ここでも API からデータを取得し、月ごとの散布図をプロットします。 Plotly.js コンポーネントと Vue.js コンポーネントを使用して散布図を描画します。以下はコンポーネント コードです:

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

この Vue.js コンポーネント ファイルでは、Vue.js props 属性を使用してデータをコンポーネントに渡します。ここでも axios ライブラリを使用して API からデータを取得します。月ごとにポイントを作成し、横軸に収入、縦軸に支出を指定します。また、Plotly.js に、Profit を各ポイントに表示するテキストとして使用し、各ポイントのサイズと色を設定するように指示します。

Vue.js と Go 言語を使用して、2 つのグラフ コンポーネントを作成しました。これらのコンポーネントを使用すると、データを取得し、販売データを対話的に表示できます。さらに、Chart.js と Plotly.js を使用すると、美しいグラフを作成し、高度にカスタマイズできます。これらの方法は他のデータ視覚化プロジェクトに適用でき、データ視覚化 Web サイトとアプリケーションの構築を高速、簡単、スケーラブルにします。

以上がGo 言語と Vue.js を使用してグラフ コンポーネントを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。