ECharts と golang を使用して素晴らしい統計グラフを作成する方法を学ぶチュートリアル-Golang-php.cn

ECharts と golang を使用して素晴らしい統計グラフを作成する方法を学ぶチュートリアル

王林

リリース： 2023-12-18 16:06:42

オリジナル

1275 人が閲覧しました

ECharts と golang を使用して素晴らしい統計グラフを作成する方法を学ぶチュートリアル

ECharts と golang を使用して見事な統計グラフを作成する方法を学ぶチュートリアル

現代のインターネット時代において、データの視覚化はユーザーを引き付け、情報を表示するための重要な手段の 1 つです。。データ視覚化の一種である統計グラフは、データの傾向と関係を明確かつ直感的に表示できます。この記事では、ECharts と golang を使用して素晴らしい統計グラフを作成する方法を、具体的なコード例とともに説明します。

(1) ECharts の概要

ECharts は、Baidu のフロントエンドチームによって開発された JavaScript ベースのオープンソースチャートライブラリです。豊富なグラフタイプと柔軟な構成オプションを提供し、ユーザーはさまざまな統計グラフを簡単に作成できます。 ECharts でサポートされるグラフの種類には、折れ線グラフ、棒グラフ、円グラフ、散布図などが含まれます。

(2) golang の概要

Golang は、Google によって開発され、2009 年にリリースされたオープンソースのプログラミング言語です。効率的で信頼性が高く、簡潔であり、高性能のサーバー側アプリケーションの開発に適しています。このチュートリアルでは、golang を使用してバックエンドコードを記述し、ECharts を使用してグラフを生成し、フロントエンドとバックエンド間のデータ対話を通じて統計グラフを表示します。

(3) ECharts のインストール

ECharts ライブラリファイルのダウンロード

ECharts 公式 Web サイト (https://echarts. apache.org/) 最新の ECharts ライブラリファイルをダウンロードします。解凍後、ECharts フォルダーをプロジェクトディレクトリに配置します。

ECharts ライブラリファイルの導入

HTML ファイルでは、script タグを使用して ECharts ライブラリファイルを導入する必要があります。例:

<script src="echarts.min.js"></script>

ログイン後にコピー

(4) golang バックエンドコードを作成します

golang をインストールします

まず、golang をインストールし、環境変数を設定する必要があります。最新の golang インストールパッケージを golang 公式 Web サイト (https://golang.org/) からダウンロードし、公式ドキュメントに従ってインストールできます。

golang プロジェクトの作成

作業ディレクトリで、新しい golang プロジェクトを作成します。

golang コードを記述する

プロジェクトの go ファイルに、次の golang コードを記述します:

package main

import (
    "encoding/json"
    "fmt"
    "net/http"
)

type Data struct {
    Name  string  `json:"name"`
    Value float64 `json:"value"`
}

func main() {
    http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
        data := []Data{
            {Name: "数据1", Value: 10},
            {Name: "数据2", Value: 20},
            {Name: "数据3", Value: 30},
            {Name: "数据4", Value: 40},
            {Name: "数据5", Value: 50},
        }
        dataBytes, _ := json.Marshal(data)
        w.Header().Set("Content-Type", "application/json")
        fmt.Fprint(w, string(dataBytes))
    })

    http.ListenAndServe(":8080", nil)
}

ログイン後にコピー

golang プログラムを実行する

コマンドラインで、プロジェクトディレクトリを入力し、次のコマンドを実行して golang プログラムを実行します。

go run main.go

ログイン後にコピー

(5) HTML および JavaScript コードを記述します




    统计图表


    

    <script src="echarts.min.js"></script>
    <script>
        var chart = echarts.init(document.getElementById('chart'));

        // 发送请求获取数据
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                var data = JSON.parse(xhr.responseText);
                // 生成图表
                var option = {
                    title: {
                        text: '统计图表'
                    },
                    xAxis: {
                        type: 'category',
                        data: data.map(function (item) {
                            return item.name;
                        })
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: data.map(function (item) {
                            return item.value;
                        }),
                        type: 'bar'
                    }]
                };
                chart.setOption(option);
            }
        };
        xhr.open('GET', 'http://localhost:8080/', true);
        xhr.send();
    </script>

ログイン後にコピー

以上がECharts と golang を使用して素晴らしい統計グラフを作成する方法を学ぶチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。