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

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

WBOY

リリース： 2023-12-17 08:02:47

オリジナル

1220 人が閲覧しました

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

ECharts と golang を使用して独自の統計グラフを作成するチュートリアルを学習するには、特定のコード例が必要です

はじめに
ビッグデータとデータの視覚化の台頭により、統計グラフデータの表示と分析のための重要なツールとなっています。実際のプロジェクトでは、コードを使用してさまざまな独自の統計グラフを生成する方法が開発者の焦点となっています。この記事では、ECharts と golang を使用して独自の統計グラフを作成する方法と、具体的なコード例を紹介します。

1. ECharts の概要
ECharts は Baidu のオープンソースプロジェクトで、純粋な JavaScript で書かれたデータ視覚化チャートライブラリです。 ECharts は豊富なチャートタイプと対話方法を提供し、強力で使いやすいです。レスポンシブデザインをサポートしており、さまざまなデバイスで適切に表示できます。 ECharts は、独自のニーズを簡単にカスタマイズおよび拡張するための豊富な拡張メカニズムも提供します。

2. golang の概要
Golang は、シンプルさ、効率性、同時実行パフォーマンスに重点を置いたオープンソースプログラミング言語です。 Golang は、高性能ネットワークアプリケーションや分散システムの構築に適しています。このチュートリアルでは、ECharts に必要なデータの生成を担当するバックエンド言語として golang を使用します。

3. 準備作業
まず、ECharts と golang の開発環境をインストールする必要があります。 ECharts の公式 Web サイト (https://echarts.apache.org/) には詳細なインストールドキュメントが提供されており、ドキュメントに従ってインストールできます。 Golang の公式 Web サイト (https://golang.org/) には、対応するインストールガイドも提供されており、必要に応じてインストールできます。

4. ECharts と golang の統合

基本的な ECharts ページの作成
まず、チャートを表示するための基本的な ECharts ページを作成します。 Index.html という名前の新しいファイルを作成し、次のコードを作成します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts图表</title>
    <script src="https://echarts.apache.org/dist/echarts.min.js"></script>
</head>
<body>
    <div id="chart" style="width: 600px; height: 400px;"></div>
    <script>
        var chart = echarts.init(document.getElementById('chart'));
        
        // 在这里编写图表的配置和数据
        
        chart.setOption({
            // 在这里设置图表的配置和数据
        });
    </script>
</body>
</html>

ログイン後にコピー

golang を使用して統計データを生成する
次に、 golang を使用して表示用の統計データを生成します。 main.go という名前のファイルを作成し、次のコードを記述します。

package main

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

func main() {
    http.HandleFunc("/data", handler)
    http.ListenAndServe(":8080", nil)
}

func handler(w http.ResponseWriter, r *http.Request) {
    data := map[string]interface{}{
        "categories": []string{"类别1", "类别2", "类别3", "类别4", "类别5"},
        "series": []map[string]interface{}{
            {
                "name": "系列1",
                "type": "bar",
                "data": []float64{100, 200, 300, 400, 500},
            },
            {
                "name": "系列2",
                "type": "bar",
                "data": []float64{200, 300, 400, 500, 600},
            },
        },
    }

    bytes, err := json.Marshal(data)
    if err != nil {
        fmt.Println("错误:", err)
        return
    }

    w.Header().Set("Content-Type", "application/json")
    w.Write(bytes)
}

ログイン後にコピー

データを ECharts ページに送信
index.html では、golang の ajax テクノロジーを使用する必要があります。サーバーデータを取得し、そのデータを ECharts チャートに渡します。次のコードをスクリプトタグに追加します:

<script>
    var chart = echarts.init(document.getElementById('chart'));
    
    // 发送ajax请求
    var xhr = new XMLHttpRequest();
    xhr.open('GET', '/data');
    xhr.onload = function() {
        if (xhr.status === 200) {
            var data = JSON.parse(xhr.responseText);
            
            chart.setOption({
                xAxis: {
                    type: 'category',
                    data: data.categories,
                },
                yAxis: {
                    type: 'value',
                },
                series: data.series,
            });
        }
    };
    xhr.send();
</script>

ログイン後にコピー

5. 実行とデバッグ

golang サーバーの起動
コマンドラインで、「where main.go」と入力します。ディレクトリを見つけて、次のコマンドを実行して golang サーバーを起動します。

go run main.go

ログイン後にコピー

ブラウザで ECharts ページを開きます。
ブラウザでindex.html ページを開きます (例: http://localhost: 8080/index.html)、生成された統計グラフを確認できます。

結論
このチュートリアルでは、ECharts と golang を使用して独自の統計グラフを作成する方法を紹介し、具体的なコード例を示します。このチュートリアルを学ぶことで、EChartsやgolangをより柔軟に使いこなして、さまざまな精緻な統計グラフを作成できるようになると思います。このチュートリアルが皆様のお役に立てば幸いです。

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