Golang を使用して Web データ視覚化を実装する方法

インターネットの発展に伴い、データはますます人々の注目を集めるようになりました。実際には、より適切な分析と学習のためにデータを視覚化する必要があります。この記事では、Golang を使用して Web アプリケーションを作成し、視覚化ライブラリを使用してデータ視覚化を実現する方法を紹介します。

1. Golang の概要

Golang は、Google によって開発されたプログラミング言語です。その設計目標は、プログラムの開発効率と保守性を向上させることです。 Golang は、同時実行性とガベージ コレクションを備えた、厳密に型指定され、静的にコンパイルされた言語です。サーバーサイドプログラミング、クラウドコンピューティング、Webアプリケーション開発で広く使用されています。

2. Web アプリケーション開発

Golang を使用して Web アプリケーションを作成する場合、Web フレームワークを使用する必要があります。一般的に使用される Web フレームワークには、Gin、Echo、Beego などがあります。この記事では、Gin フレームワークを例として使用して説明します。まず、Gin フレームワークとその他の必要な依存関係をインストールする必要があります。コンソールに次のコマンドを入力するだけです:

go get -u github.com/gin-gonic/gin

次に、単純な Web アプリケーションを作成する必要があります。コンソールで次のコマンドを使用して、「main.go」という名前のファイルを作成します。

touch main.go

作成した「main.go」ファイルを開き、次のコードを入力します。

##package main

import "github.com/gin-gonic/gin"

func main() {

r := gin.Default()
r.GET("/", func(c *gin.Context) {
    c.JSON(200, gin.H{
        "message": "Hello World!",
    })
})
r.Run()

}

このコードでは、gin パッケージの Default メソッドを使用して gin エンジン r を作成します。次に、GETメソッドでルートを定義し、ルートパス「/」にアクセスすると「Hello World!」というJSONメッセージが返されます。最後に、Run メソッドを使用して Web アプリケーションを開始します。コンソールに次のコマンドを入力して Web アプリケーションを実行します。

go run main.go

これで、ブラウザで「http://localhost:8080/」にアクセスし、出力を確認できます。情報。

データの視覚化

Web アプリケーションの基本的な知識があれば、視覚化ライブラリを使用してデータの視覚化を開始できます。一般的に使用される視覚化ライブラリには、Chart.js、D3.js、Echarts などが含まれます。この記事では、Chart.js を例として使用して説明します。まず、Chart.js ライブラリをインストールする必要があります。コンソールに次のコマンドを入力するだけです:

npm install chart.js --save

次に、前のプログラムを変更して Chart.js ライブラリを導入する必要があります。 「main.go」ファイルを開き、コードを次のように変更します。

package main

import (

"github.com/gin-gonic/gin"
"net/http"

)

func main() {

r := gin.Default()
r.LoadHTMLGlob("templates/*")
r.GET("/", func(c *gin.Context) {
    c.HTML(http.StatusOK, "index.tmpl", gin.H{})
})
r.Run(":8080")

}

コードでは、まず LoadHTMLGlob メソッドを使用してテンプレート ファイルへのパスを指定します。次に、HTML メソッドを使用して「index.tmpl」という HTML テンプレートをレンダリングし、データをテンプレートに渡しました。テンプレートでは、データ視覚化に Chart.js ライブラリを使用できます。コンソールで次のコマンドを使用して、「index.tmpl」という名前のファイルを作成します。

touch templates/index.tmpl

作成した「index.tmpl」ファイルを開いて、次のコードを入力します。 :

8b05045a5be5764f313ed5b9168a17e6

100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

<title>Chart.js Example</title>
<script src="/js/chart.min.js"></script>

9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d

<canvas id="myChart"></canvas>
<script>
    var ctx = document.getElementById("myChart").getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
            datasets: [{
                label: '# of Votes',
                data: [12, 19, 3, 5, 2, 3],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });
</script>

36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

コードでは、HTML ページで Chart.js ライブラリを使用して、キャンバスにグラフを描画できるようにします。この例では、ヒストグラムを描画します。バックエンド プログラムでデータを取得し、フロントエンドに渡すことができます。このデータを HTML テンプレートで使用して、視覚的な操作を行うことができます。

結論

この記事では、Golang を使用して Web アプリケーションを作成し、Chart.js ライブラリを使用してデータ視覚化を実装する方法を紹介しました。この記事のコード例は比較的単純ですが、Web 開発で Golang の使用を開始する方法を理解し、視覚化ライブラリを組み合わせてデータ視覚化を実現する方法を学ぶのに役立ちます。

以上がGolang を使用して Web データ視覚化を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。