ゼロから始める: ECharts と golang を使用して多様な統計グラフを作成する-Golang-php.cn

ゼロから始める: ECharts と golang を使用して多様な統計グラフを作成する

PHPz

リリース： 2023-12-18 16:37:03

オリジナル

1023 人が閲覧しました

ゼロから始める: ECharts と golang を使用して多様な統計グラフを作成する

概要:
最新のデータ分析と視覚化のニーズに応じて多様な統計グラフを作成するチャートは重要な開発タスクになりました。 ECharts は JavaScript ベースのオープンソースチャートライブラリであり、さまざまなデータ表示ニーズを満たすさまざまなチャートタイプと対話型機能を提供します。効率的なサーバープログラミング言語として、golang を ECharts と組み合わせて、柔軟で高性能なデータ視覚化サービスを実現できます。

この記事では、EChartsとgolangを使って多様な統計グラフをゼロから作成する方法を具体例を用いて紹介します。 golang をバックエンドフレームワークとして使用し、データインターフェイスを提供することでフロントエンド EChart と対話し、最終的に動的に更新される統計グラフを実装します。

ステップ 1: golang 開発環境をセットアップする
まず、golang 開発環境をローカルにセットアップする必要があります。公式 Web サイト (https://golang.org/dl/) にアクセスして、オペレーティングシステムに適した golang インストールパッケージをダウンロードし、公式ドキュメントに従ってインストールして設定します。

ステップ 2: golang プロジェクトを作成する
コマンドラインで、次のコマンドを使用して新しい golang プロジェクトを作成します:

mkdir golang-echarts-demo
cd golang-echarts-demo
go mod init github.com/your-username/golang-echarts-demo

ログイン後にコピー

ここで your-username はあなたですgithub ユーザー名は、プロジェクトのインポートパスを指定するために使用されます。

ステップ 3: golang の http ライブラリをインストールする
golang には、http リクエストの処理に使用できるサードパーティライブラリが多数あります。ここでは、標準ライブラリの net/http を使用して、単純な http サービスを構築します。コマンドラインで、次のコマンドを使用して http ライブラリをインストールします。

go get -u github.com/gorilla/mux

ログイン後にコピー

ステップ 4: golang バックエンドコードを作成する
プロジェクトのルートディレクトリに、main.go## という名前のファイルを作成します。 # ファイルを開き、次のコードを使用して golang バックエンドコードを記述します:

package main

import (
    "encoding/json"
    "log"
    "net/http"
    "github.com/gorilla/mux"
)

type Data struct {
    Labels []string `json:"labels"`
    Values []int    `json:"values"`
}

func GetData(w http.ResponseWriter, r *http.Request) {
    data := Data{
        Labels: []string{"Mon", "Tue", "Wed", "Thu", "Fri"},
        Values: []int{120, 200, 150, 80, 300},
    }
    json.NewEncoder(w).Encode(data)
}

func main() {
    router := mux.NewRouter()
    router.HandleFunc("/data", GetData).Methods("GET")
    log.Fatal(http.ListenAndServe(":8000", router))
}

ログイン後にコピー

このコードは、チャートに必要なラベルと数値データを含む

Data という名前の構造を定義します。 GetData 関数は、クライアントのリクエストを処理し、ラベルと数値データを含む json 応答を返すために使用されます。

ステップ 5: golang バックエンドサービスを実行する

コマンドラインで、次のコマンドを使用して golang バックエンドサービスを実行します:

go run main.go

ログイン後にコピー

ステップ 6: フロントエンドページを作成する

プロジェクトのルートディレクトリに、
index.html という名前のファイルを作成し、次のコードを使用してフロントエンドページを作成します。

<!DOCTYPE html>
<html>
<head>
    <title>ECharts Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.0/dist/echarts.min.js"></script>
</head>
<body>
    <div id="chart" style="width: 600px;height:400px;"></div>
    <script>
        var chart = echarts.init(document.getElementById('chart'));
        var option = {
            title: {
                text: '统计图表'
            },
            xAxis: {
                type: 'category',
                data: []
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [],
                type: 'bar'
            }]
        };
        setInterval(function() {
            fetch('/data')
                .then(response => response.json())
                .then(data => {
                    option.xAxis.data = data.labels;
                    option.series[0].data = data.values;
                    chart.setOption(option);
                });
        }, 2000);
    </script>
</body>
</html>

ログイン後にコピー

このコードは、によって提供される JavaScript ライブラリを使用します。 ECharts を実行し、「#chart

のグラフコンテナ」という名前のファイルを作成します。バックエンドサービスのデータインターフェースを定期的にリクエストし、返されたデータをグラフオプションに設定することで、動的に更新される統計グラフが実装されます。ステップ 7: フロントエンドページを実行する

コマンドラインで、次のコマンドを使用してフロントエンドページを実行します:

python -m http.server

ログイン後にコピー

これにより、単純な http サーバーがローカルで起動されます。フロントエンドページをブラウザアクセスに提供します。

この時点で、ECharts と golang を使用してさまざまな統計グラフを作成するプロセスが完了しました。 golang を使用してバックエンドサービスを構築し、ECharts が提供する豊富なチャートタイプとインタラクティブな機能を組み合わせることで、柔軟で高性能なデータ視覚化サービスを簡単に実装できます。この記事がお役に立てば幸いです。また、データ視覚化の分野での開発作業が成功することを願っています。

以上がゼロから始める: ECharts と golang を使用して多様な統計グラフを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。