EChartsとgolangを使って多様な統計グラフを簡単に描く方法-Golang-php.cn

EChartsとgolangを使って多様な統計グラフを簡単に描く方法

王林

リリース： 2023-12-18 15:40:19

オリジナル

1300 人が閲覧しました

EChartsとgolangを使って多様な統計グラフを簡単に描く方法

データ分析の需要が高まるにつれ、さまざまな統計グラフを作成することが非常に一般的なニーズになりました。 ECharts と golang は、さまざまなグラフを簡単に描画できる非常に優れたツールです。以下では、この目的を達成するために ECharts と golang を使用する方法を、いくつかの具体的なコード例を示しながら紹介します。

ECharts のインストールと使用

ECharts を使用する前に、まずインストールする必要があります。最新の安定バージョンを公式 Web サイト (https://echarts.apache.org) からダウンロードし、指示に従ってインストールできます。インストールが完了したら、ECharts を使用してさまざまなタイプのグラフを描画できるようになります。

ECharts を使用する場合は、すべてのデータを含む配列を準備し、それを ECharts に渡して、対応するチャートを自動的に生成する必要があります。以下は、ヒストグラムをプロットする簡単なコード例です。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>柱状图示例</title>
    <script src="echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width:600px;height:400px;"></div>
    <script>
        var data = [5, 20, 36, 10, 10, 20];
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            title: {
                text: '柱状图示例'
            },
            tooltip: {},
            xAxis: {
                data: ['A', 'B', 'C', 'D', 'E', 'F']
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: data
            }]
        };
        myChart.setOption(option);
    </script>
</body>
</html>

ログイン後にコピー

ご覧のとおり、このサンプルコードには、データが挿入された JavaScript 配列を含む HTML ページが含まれています。 ECharts はデータを自動的にヒストグラムに変換し、ID が「main」の要素にレンダリングします。

さらに、ECharts では、折れ線グラフ、円グラフ、散布図など、さまざまなタイプのグラフも提供します。実際のニーズに応じて、さまざまなチャートの種類を選択できます。

golang を使用してデータを準備する

Golang は非常に人気のあるプログラミング言語で、さまざまなデータ構造とさまざまな操作をサポートしており、データの処理に非常に適しています。 ECharts を使用する前に、通常、描画するすべてのチャートデータを準備し、それを ECharts で認識できる形式に変換する必要があります。 golang は、この作業を完了するのに役立ちます。

以下は、100個の乱数を含む配列を生成し、json形式のデータに出力できる簡単なgolangプログラムです。

package main

import (
    "encoding/json"
    "fmt"
    "math/rand"
)

type Data struct {
    Id    int    `json:"id"`
    Value int    `json:"value"`
}

func main() {
    data := make([]Data, 0)
    for i := 0; i < 100; i++ {
        data = append(data, Data{Id: i, Value: rand.Intn(100)})
    }
    jsonData, err := json.Marshal(data)
    if err != nil {
        fmt.Println("json encode error")
        return
    }
    fmt.Println(string(jsonData))
}

ログイン後にコピー

このプログラムでは、randパッケージを使用して100個の乱数を含む配列を生成し、それをjson形式のデータに変換します。この JSON データは ECharts によって直接認識され、さまざまな種類のチャートの描画に使用できます。

ECharts と golang の統合

ECharts と golang を使用すると、この 2 つの統合を開始して、さまざまなタイプのチャートを描画できます。以下は、ランダムデータを含む json 配列を生成し、それを HTML ページに渡す単純な golang プログラムです。 HTML ページでは、EChart を使用してこのデータをヒストグラムに描画できます。

golang コード:

package main

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

type Data struct {
    Id    int    `json:"id"`
    Value int    `json:"value"`
}

func main() {
    http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
        data := make([]Data, 0)
        for i := 0; i < 10; i++ {
            data = append(data, Data{Id: i, Value: rand.Intn(100)})
        }
        jsonData, err := json.Marshal(data)
        if err != nil {
            fmt.Println("json encode error")
            return
        }
        w.Header().Set("Content-Type", "text/html; charset=utf-8")
        fmt.Fprintf(w, `
            <!DOCTYPE html>
            <html>
            <head>
                <meta charset="utf-8">
                <title>柱状图示例</title>
                <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.0/dist/echarts.min.js"></script>
            </head>
            <body>
                <div id="main" style="width:600px;height:400px;"></div>
                <script>
                    var data = %s;
                    var xAxisData = [];
                    var seriesData = [];
                    for (var i = 0; i < data.length; i++) {
                        xAxisData.push(data[i].id);
                        seriesData.push(data[i].value);
                    }
                    var myChart = echarts.init(document.getElementById('main'));
                    var option = {
                        title: {
                            text: '柱状图示例'
                        },
                        tooltip: {},
                        xAxis: {
                            data: xAxisData
                        },
                        yAxis: {},
                        series: [{
                            name: '销量',
                            type: 'bar',
                            data: seriesData
                        }]
                    };
                    myChart.setOption(option);
                </script>
            </body>
            </html>
        `, jsonData)
    })
    http.ListenAndServe(":8080", nil)
}

ログイン後にコピー

このコードでは、net/http パッケージを使用して単純な Web サーバーを作成し、ルートディレクトリ配列にアクセスするときにランダムデータを含む json を出力します。この json 配列は HTML ページで直接使用できます。

HTML ページ:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>柱状图示例</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.0/dist/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width:600px;height:400px;"></div>
    <script>
        var data = [{"id":0,"value":36},{"id":1,"value":52},{"id":2,"value":64},{"id":3,"value":89},{"id":4,"value":48},{"id":5,"value":52},{"id":6,"value":10},{"id":7,"value":75},{"id":8,"value":86},{"id":9,"value":58}];
        var xAxisData = [];
        var seriesData = [];
        for (var i = 0; i < data.length; i++) {
            xAxisData.push(data[i].id);
            seriesData.push(data[i].value);
        }
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            title: {
                text: '柱状图示例'
            },
            tooltip: {},
            xAxis: {
                data: xAxisData
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: seriesData
            }]
        };
        myChart.setOption(option);
    </script>
</body>
</html>

ログイン後にコピー

この HTML ページでは、JSON.parse() メソッドを使用して、golang によって生成された json データを JavaScript 配列に解析し、それを ECharts に渡します。最後に、きれいなヒストグラムが得られます。

以上がEChartsとgolangを使って多様な統計グラフを簡単に描く方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。