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

ホームページ

バックエンド開発

Golang

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

PHPz

Dec 17, 2023 am 09:35 AM

golang echarts 統計グラフ

ゼロから始める: 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 内。

最初のステップでは、必要な golang パッケージをインポートする必要があります:

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 を使用して美しい統計グラフを作成する方法を学びました。独自のニーズに応じてデータとグラフのタイプを変更でき、ECharts にはさまざまなニーズを満たす多数のオプションが用意されています。

この記事があなたのお役に立てば幸いです。そして、データ視覚化の道をさらに前進することを願っています。

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

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7549

CakePHP チュートリアル

1382

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

Golang を使用してファイルを安全に読み書きするにはどうすればよいですか? Jun 06, 2024 pm 05:14 PM

Go ではファイルを安全に読み書きすることが重要です。ガイドラインには以下が含まれます。ファイル権限の確認遅延を使用してファイルを閉じるファイルパスの検証コンテキストタイムアウトの使用これらのガイドラインに従うことで、データのセキュリティとアプリケーションの堅牢性が確保されます。

Golang データベース接続用の接続プールを構成するにはどうすればよいですか? Jun 06, 2024 am 11:21 AM

Go データベース接続の接続プーリングを構成するにはどうすればよいですか?データベース接続を作成するには、database/sql パッケージの DB タイプを使用します。同時接続の最大数を制御するには、MaxOpenConns を設定します。アイドル状態の接続の最大数を設定するには、ConnMaxLifetime を設定します。

Golang フレームワークと Go フレームワーク: 内部アーキテクチャと外部機能の比較 Jun 06, 2024 pm 12:37 PM

GoLang フレームワークと Go フレームワークの違いは、内部アーキテクチャと外部機能に反映されています。 GoLang フレームワークは Go 標準ライブラリに基づいてその機能を拡張していますが、Go フレームワークは特定の目的を達成するための独立したライブラリで構成されています。 GoLang フレームワークはより柔軟であり、Go フレームワークは使いやすいです。 GoLang フレームワークはパフォーマンスの点でわずかに優れており、Go フレームワークはよりスケーラブルです。ケース: gin-gonic (Go フレームワーク) は REST API の構築に使用され、Echo (GoLang フレームワーク) は Web アプリケーションの構築に使用されます。

GolangでJSONデータをデータベースに保存するにはどうすればよいですか? Jun 06, 2024 am 11:24 AM

JSON データは、gjson ライブラリまたは json.Unmarshal 関数を使用して MySQL データベースに保存できます。 gjson ライブラリは、JSON フィールドを解析するための便利なメソッドを提供します。json.Unmarshal 関数には、JSON データをアンマーシャリングするためのターゲット型ポインターが必要です。どちらの方法でも、SQL ステートメントを準備し、データをデータベースに永続化するために挿入操作を実行する必要があります。

Golang フレームワークでのエラー処理のベストプラクティスは何ですか? Jun 05, 2024 pm 10:39 PM

ベストプラクティス: 明確に定義されたエラータイプ (エラーパッケージ) を使用してカスタムエラーを作成する詳細を提供するエラーを適切にログに記録するエラーを正しく伝播し、非表示または抑制しないようにするコンテキストを追加するために必要に応じてエラーをラップする

Golang の正規表現に一致する最初の部分文字列を見つけるにはどうすればよいですか? Jun 06, 2024 am 10:51 AM

FindStringSubmatch 関数は、正規表現に一致する最初の部分文字列を検索します。この関数は、最初の要素が一致した文字列全体で、後続の要素が個々の部分文字列である、一致する部分文字列を含むスライスを返します。コード例: regexp.FindStringSubmatch(text,pattern) は、一致する部分文字列のスライスを返します。実際のケース: 電子メールアドレスのドメイン名を照合するために使用できます。たとえば、email:="user@example.com", pattern:=@([^\s]+)$ を使用してドメイン名を照合します。 [1]。

golang フレームワークでよくあるセキュリティ問題を解決するにはどうすればよいですか? Jun 05, 2024 pm 10:38 PM

Go フレームワークで一般的なセキュリティ問題に対処する方法 Web 開発で Go フレームワークが広く採用されているため、そのセキュリティを確保することが重要です。以下は、一般的なセキュリティ問題を解決するための実践的なガイドであり、サンプルコードも含まれています。 1. SQL インジェクション SQL インジェクション攻撃を防ぐには、プリペアドステートメントまたはパラメータ化されたクエリを使用します。例: constquery="SELECT*FROMusersWHEREusername=?"stmt,err:=db.Prepare(query)iferr!=nil{//Handleerror}err=stmt.QueryR