ゼロから始める: ECharts と golang を使用して多様な統計グラフを作成する
- PHPzオリジナル
- 2023-12-18 16:37:031131ブラウズ
ゼロから始める: 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 応答を返すために使用されます。
コマンド ラインで、次のコマンドを使用して 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 サイトの他の関連記事を参照してください。