ECharts と golang の動作: 美しい統計グラフの作成に関するチュートリアル-Golang-php.cn

ECharts と golang の動作: 美しい統計グラフの作成に関するチュートリアル

WBOY

リリース： 2023-12-18 12:52:17

オリジナル

1244 人が閲覧しました

ECharts和golang实战: 制作精美的统计图表教程

ECharts と golang の実践的な戦闘: 美しい統計グラフの作成に関するチュートリアル

はじめに

データの視覚化は、最新の Web アプリケーションに不可欠な部分です。 ECharts は強力で柔軟なオープンソースのグラフ作成ライブラリであり、golang は強力で高速なプログラミング言語です。この 2 つを組み合わせると、Web アプリケーションで美しい統計グラフの効果を実現できます。この記事では、ECharts と golang を使用して美しい統計グラフを作成する方法と、具体的なコード例を紹介します。

1. 準備

まず、golang をダウンロードしてインストールする必要があります。 Golang 公式 Web サイト (https://golang.org/) にアクセスして、最新バージョンの golang をダウンロードし、公式ガイドに従ってインストールできます。

EChart は npm を通じてインストールできます。ターミナルで次のコマンドを実行して ECharts をインストールします。

```
npm install echarts --save
```
ログイン後にコピー

次のコマンドを使用して、新しい golang プロジェクトを作成し、新しい golang モジュールを初期化します。

go mod init your_project_name

ログイン後にコピー

次に、次のコマンドを使用して必要なライブラリをインストールします。

go get github.com/gin-gonic/gin

ログイン後にコピー

2. Web サーバーの作成

golang の gin フレームワークを使用して Web サーバーを簡単に作成できます。

golang プロジェクトに main.go という名前のファイルを作成し、そのファイルに次のコードを追加します。

package main

import (
    "github.com/gin-gonic/gin"
    "net/http"
)

func main() {
    router := gin.Default()

    router.LoadHTMLGlob("templates/*")

    router.GET("/", func(c *gin.Context) {
        c.HTML(http.StatusOK, "index.html", gin.H{})
    })

    router.Run(":8080")
}

ログイン後にコピー

テンプレートフォルダーにindex.html という名前のファイルを作成し、次のコードを追加します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ECharts and golang</title>
    <script src="/echarts.min.js"></script>
</head>
<body>
    <div id="chart" style="width: 600px; height: 400px;"></div>
    <script>
        // 在这里编写ECharts的代码
    </script>
</body>
</html>

ログイン後にコピー

3. ECharts コードの記述

index.html ファイルに、ECharts コードを記述して、さまざまな統計グラフを作成できます。

まず、bodyタグ内にdiv要素を追加し、幅と高さを設定します。

次に、script タグ内に ECharts コードを追加します。

ヒストグラムを描画すると仮定すると、次のコードを使用できます。

<script>
    var chart = echarts.init(document.getElementById('chart'));

    var option = {
        title: {
            text: '柱状图'
        },
        xAxis: {
            data: ['A', 'B', 'C', 'D', 'E']
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10]
        }]
    };

    chart.setOption(option);
</script>

ログイン後にコピー

このコードはヒストグラムを作成します。X 軸はデータの分類を示し、Y 軸は販売数量を示します。シリーズのデータ属性を設定することで、ヒストグラムの特定のデータを設定できます。

ニーズに応じて、さまざまなタイプのチャートコードを作成し、index.html ファイルに追加できます。

4. Web アプリケーションの実行

ターミナルで、次のコマンドを使用して golang アプリケーションを実行します。

go run main.go

ログイン後にコピー

次に、ブラウザを開いて http://localhost:8080 にアクセスします。

ヒストグラムを示す Web ページが表示されます。

対応する ECharts コードを記述することで、さまざまな種類の統計グラフを作成し、Web アプリケーションで表示できます。

結論###EChartsとgolangを組み合わせることで、美しい統計グラフを簡単に作成することができます。この記事では、Web サーバーを作成し、ECharts を使用して Web アプリケーションで統計グラフコードを記述する方法を紹介します。この記事が、ECharts と golang についての理解を深め、Web アプリケーションにさらに鮮やかで興味深いデータ視覚化効果を追加するのに役立つことを願っています。 ###

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