ECharts と golang を使用して見事な統計グラフを作成する方法を学びます-Golang-php.cn

ECharts と golang を使用して見事な統計グラフを作成する方法を学びます

WBOY

リリース： 2023-12-17 10:26:34

オリジナル

698 人が閲覧しました

ECharts と golang を使用して見事な統計グラフを作成する方法を学びます

ECharts と Golang を使用して見事な統計グラフを作成する方法を学びましょう

データの継続的な増加とテクノロジーの発展に伴い、データの視覚化は情報伝達の重要な部分となっています。情報と結果の表示という重要な方法です。データ統計グラフのデザインと表示には、美しく直感的な表示効果だけでなく、高度な対話性と柔軟性も必要です。この記事では、ECharts と Golang という 2 つの強力なツールを使用して、見事な統計グラフを作成する方法を紹介します。

ECharts は、Baidu がオープンソース化した JavaScript ベースのデータ視覚化ライブラリです。豊富なデータ視覚化タイプがあり、複数のプラットフォームとブラウザをサポートしています。 ECharts を使用すると、折れ線グラフ、棒グラフ、円グラフなど、さまざまな形式のグラフを簡単に描画できます。同時に、ECharts は強力なインタラクティブ機能も備えており、マウス操作やチャートコンポーネントのリンクなどを通じてユーザーとチャートの間の対話を実現できます。

Golang は Google が開発したプログラミング言語で、効率的、シンプル、安全です。 Golang を通じて、高性能 Web アプリケーションを迅速に構築し、それらを ECharts と組み合わせて、データの取得、処理、表示の完全なプロセスを実現できます。

次に、実際のケースを使用して、ECharts と Golang を使用して見事な統計グラフを作成する方法を示します。

まず、要件を考えてみましょう。特定の地域の月次売上をカウントし、それを折れ線グラフの形式で表示したいとします。 Golang を通じて月次売上データを取得し、ECharts を通じて対応する折れ線グラフを描画できます。

まず、Golang では売上データを取得するために HTTP リクエストを使用する必要がありますが、有名な HTTP リクエストライブラリ「gorilla/mux」を使用できます。

package main

import (
    "encoding/json"
    "log"
    "net/http"

    "github.com/gorilla/mux"
)

type Sale struct {
    Month  string  `json:"month"`
    Amount float64 `json:"amount"`
}

func main() {
    r := mux.NewRouter()
    r.HandleFunc("/sales", getSales).Methods("GET")
    log.Fatal(http.ListenAndServe(":8000", r))
}

func getSales(w http.ResponseWriter, r *http.Request) {
    sales := []Sale{
        {Month: "Jan", Amount: 1000.00},
        {Month: "Feb", Amount: 1500.00},
        {Month: "Mar", Amount: 2000.00},
        // 其他月份的销售额数据
    }

    json.NewEncoder(w).Encode(sales)
}

ログイン後にコピー

上記のコードは、gorilla/mux ライブラリを使用してルートを作成し、売上データを含む JSON 配列を返す GET リクエスト処理関数 getSales を定義します。 getSales 関数では、販売データをシミュレートするための固定サンプルを定義しており、実際の状況に応じて変更できます。

次に、ECharts を使用して折れ線グラフを描画します。これは、HTML ファイルに ECharts ライブラリファイルを導入し、JavaScript コードで対応する API を呼び出すことで実現できます。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>销售统计</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>
        var chart = echarts.init(document.getElementById('chart'));

        // 发起HTTP请求获取销售额数据
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "http://localhost:8000/sales", true);
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var sales = JSON.parse(xhr.responseText);
                var months = [];
                var amounts = [];
                for (var i = 0; i < sales.length; i++) {
                    months.push(sales[i].month);
                    amounts.push(sales[i].amount);
                }

                // 绘制折线图
                chart.setOption({
                    xAxis: {
                        data: months
                    },
                    yAxis: {},
                    series: [{
                        name: '销售额',
                        type: 'line',
                        data: amounts
                    }]
                });
            }
        }
        xhr.send();
    </script>
</body>

</html>

ログイン後にコピー

上記のコードでは、XMLHttpRequest を通じて HTTP リクエストを開始して売上データを取得し、ECharts API を解析して使用して折れ線グラフを描画します。折れ線グラフを描画するときは、月を x 軸、売上高を y 軸として使用し、x 軸、y 軸、系列などのパラメータを設定することでグラフのスタイルとデータを構成します。

上記のコード例を通して、ECharts と Golang を使用して見事な統計グラフを簡単に作成できることがわかります。 HTTP リクエストを通じてデータを取得し、ECharts を使用してフロントエンドにグラフを描画するだけで、簡単に表示できます。同時に、ECharts の強力なインタラクティブ機能により、チャートの視覚化効果がさらに強化され、ユーザーはチャートをより詳細に操作できるようになります。

もちろん、上記の例は単なるデモンストレーションにすぎず、実際には、特定のニーズやデータ構造に応じて調整および拡張する必要があります。この記事が、ECharts と Golang を使用して素晴らしい統計グラフを作成する方法を理解するのに役立つことを願っています。

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