ECharts と golang: 実用的な統計グラフを作成するためのヒントと経験-Golang-php.cn

ECharts と golang: 実用的な統計グラフを作成するためのヒントと経験

PHPz

リリース： 2023-12-17 09:04:36

オリジナル

1229 人が閲覧しました

ECharts和golang: 制作实用的统计图表的技巧与经验

ECharts と golang: 実用的な統計グラフを作成するスキルと経験、具体的なコード例が必要です

データ処理の普及により、データ視覚化は多くの応用分野になりました必須のスキル。また、チャートを作成するツールも登場しました。 ECharts はオープンソースのデータ視覚化ツールであり、golang は高効率で同時実行性の高い言語であり、この 2 つを組み合わせることで効率的で実用的なグラフを作成できます。

この記事では、ECharts と golang を使用して実用的な統計グラフを作成するスキルと経験を紹介し、具体的なコード例を示します。

まず、バックエンドからフロントエンドにデータを渡す必要があります。 golang では、http パッケージを使用して単純な Web サービスを実装できます。たとえば、次は単純な Web サーバーです:

package main

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

type Data struct {
    Label string `json:"label"`
    Value int    `json:"value"`
}

func main() {
    http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
        data := []Data{
            {"January", 10},
            {"February", 20},
            {"March", 30},
            {"April", 25},
            {"May", 15},
            {"June", 5},
        }

        jsonData, err := json.Marshal(data)
        if err != nil {
            http.Error(w, err.Error(), http.StatusInternalServerError)
            return
        }

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

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

ログイン後にコピー

次に、フロントエンドで ECharts を使用してデータを表示します。まず、ECharts を HTML で導入する必要があります。

<!DOCTYPE html>
<html>
<head>
  <title>Chart Example</title>
  <script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
</head>
<body>
  <div id="chart" style="width: 600px;height:400px;"></div>
  <script src="chart.js"></script>
</body>
</html>

ログイン後にコピー

ECharts を head タグに導入し、ボディにグラフをホストする div を配置しました。同時に、データをロードしてグラフを描画するための「chart.js」という名前の js ファイルも導入しました。

以下は、ECharts を使用してチャートを描画するために使用するコードです:

fetch('/').then(function(response) {
    return response.json();
}).then(function(data) {
    var chartDom = document.getElementById('chart');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        title: {
            text: 'My Chart',
            left: 'center',
        },
        tooltip: {},
        xAxis: {
            data: data.map(function(item) {
                return item.label;
            })
        },
        yAxis: {},
        series: [{
            type: 'bar',
            data: data.map(function(item) {
                return item.value;
            })
        }]
    };

    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
});

ログイン後にコピー

コードは、フェッチ関数を使用してデータをリクエストし、json() メソッドを使用して解析します。応答データを json オブジェクトに変換します。次に、ECharts インスタンスを作成し、グラフのタイトル、ツールチップ、X/Y 軸、棒シリーズを設定しました。

最後に、アプリケーションで golang を使用してサーバーを実行し、ブラウザで html ファイルを開きます。この時点で、ECharts と golang を使用して描画されたチャートが表示され、バックエンドで定義したいくつかのデータが表示されます。

上記は、ECharts と golang を使用して実用的な統計グラフを作成する基本的な例です。より複雑なチャートを作成する必要がある場合は、ECharts の公式ドキュメントで適切な構成オプションを見つけ、golang を使用してデータを管理できます。何度も試して練習を続けることで、実用性が高く美しいチャートを作成できるようになります。

以上がECharts と golang: 実用的な統計グラフを作成するためのヒントと経験の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。