ゼロから始める: ECharts と golang を使用して美しい統計グラフを作成する
- PHPzオリジナル
- 2023-12-17 09:35:361221ブラウズ
ゼロから始める: ECharts と golang を使用して美しい統計グラフを作成する
データ視覚化の時代において、統計グラフはデータを表示するための重要なツールになりました。 ECharts は、強力で使いやすいオープン ソース ライブラリとして、さまざまなグラフ タイプと豊富なグラフ スタイルを提供します。効率的で強力なプログラミング言語である golang と組み合わせることで、美しくインタラクティブな統計グラフを簡単に作成できます。
この記事では、ECharts と golang を使用して簡単な統計グラフを作成する方法を最初から説明します。バックエンド言語として golang を使用してデータを取得し、それをフロントエンドの ECharts ライブラリに渡してグラフを生成します。はじめましょう！
まず、golang と ECharts ライブラリをインストールする必要があります。 golang をまだインストールしていない場合は、公式 Web サイトからダウンロードしてインストールできます: https://golang.org/
次に、ECharts ライブラリをインストールする必要があります。インストール方法はこちらをご覧ください。 ECharts の公式ドキュメント:https://echarts.apache.org/zh/index.html
インストール後、新しい golang プロジェクトを作成し、main.go## という名前のファイルを作成します。プロジェクトディレクトリ #document 内。
package main
import (
"encoding/json"
"fmt"
"net/http"
) 2 番目のステップでは、統計データを表す単純なデータ構造を作成します: type Data struct {
Label string `json:"label"`
Value int `json:"value"`
} 3 番目のステップでは、HTTP リクエストを処理し、データを JSON 形式でフロントエンドに返すハンドラー関数を作成します。 func handler(w http.ResponseWriter, r *http.Request) {
data := []Data{
{Label: "Apple", Value: 10},
{Label: "Banana", Value: 20},
{Label: "Orange", Value: 15},
}
jsonData, err := json.Marshal(data)
if err != nil {
fmt.Println("Error:", err)
return
}
w.Header().Set("Content-Type", "application/json")
w.Write(jsonData)
}4 番目のステップでは、main 関数を作成し、リッスンする HTTP サーバーを起動します。リクエスト: func main() {
http.HandleFunc("/data", handler)
http.ListenAndServe(":8080", nil)
}次に、ECharts のフロントエンド部分に戻ります。プロジェクト ディレクトリに index.html という名前のファイルを作成し、次のコードをそれに追加します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ECharts Example</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 600px; height: 400px;"></div>
<script>
fetch('/data')
.then(response => response.json())
.then(data => {
const chart = echarts.init(document.getElementById('chart'));
const options = {
xAxis: {
type: 'category',
data: data.map(item => item.label),
},
yAxis: {
type: 'value',
},
series: [{
type: 'bar',
data: data.map(item => item.value),
}],
};
chart.setOption(options);
});
</script>
</body>
</html>最後に、ターミナルを開き、プロジェクト ディレクトリに入り、go run を実行します。 main.gogolang サーバーを起動します。
http://localhost:8080 にアクセスすると、統計グラフを含むページが表示されます。このグラフはデータを棒グラフで表示します。
以上がゼロから始める: ECharts と golang を使用して美しい統計グラフを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。