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

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

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

(1) ECharts の概要

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

(2) golang の概要

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

(3) ECharts のインストール

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

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

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

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

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

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

1. golang をインストールします

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

2. golang プロジェクトの作成

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

3. 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)
}

4. golang プログラムを実行する

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

go run main.go

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

#HTML ファイルを作成し、ファイルに次の内容を記述します。

1. 
   
   
       
   
   
       
   
   
       <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>
   
   

ブラウザを開いて HTML ページにアクセスします

HTML ファイルを開きますブラウザを開くと、簡単な統計グラフが表示されます。

上記は、ECharts と golang を使用して素晴らしい統計グラフを作成するチュートリアル全体です。このチュートリアルでは、ECharts と golang を使用して統計グラフを作成し、データの表示と対話を実現する方法を学びます。これがあなたの学習やプロジェクト開発に役立つことを願っています。

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