EChartsとgolangを使って美しい統計グラフを簡単に描く方法

ECharts と golang を使って美しい統計グラフを簡単に描く方法

データの継続的な蓄積と適用により、統計グラフはデータを表示する重要な方法になりました。 。この分野では、ECharts は人気のあるオープン ソース JavaScript チャート ライブラリであり、強力で使いやすく、多数のスタイルとチャート タイプをサポートしているため、開発で広く使用されています。同時に、効率的なプログラミング言語として、Web バックエンド開発において golang の人気が高まっています。

この記事では主にEChartsとgolangを使って美しい統計グラフを描く方法と具体的なコード例を紹介します。

1. 準備作業

統計図を作成する前に、次のツールと環境を準備する必要があります。

• Golang環境
• Beego Framework
• ECharts Library

このうち、Golang 環境は公式 Web サイトからダウンロードしてインストールでき、Beego フレームワークは次のコマンドでインストールできます。 ##

go get github.com/astaxie/beego

ECharts ライブラリは次のコマンドでインストールできます:

npm install echarts --save

ヒストグラムの描画

まず、単純なヒストグラムを描画してみます。コードは次のとおりです。

package controllers

import (
    "github.com/astaxie/beego"
)

type MainController struct {
    beego.Controller
}

func (this *MainController) Get() {
    this.Data["Website"] = "beego.me"
    this.Data["Email"] = "astaxie@gmail.com"
    this.TplName = "index.tpl"

    data := []int{10, 52, 200, 334, 390, 330, 220}
    this.Data["chart_data"] = data
    this.Data["chart_type"] = "bar"
}

コードでは、MainController という名前のコントローラーを定義し、Get メソッドを実装します。その中に、ヒストグラムのデータを含む data という名前の配列を定義します。次に、このデータをテンプレートの "chart_data" 変数とチャート タイプの "chart_type" 変数に渡します。具体的には、ヒストグラムの種類として「bar」を使用しました。

次に、テンプレート内でレイアウトし、ECharts ライブラリを使用してグラフをレンダリングする必要があります。コードは次のとおりです。

{{.chart_data}}
{{.chart_type}}

{{if .chart_data}}
    <div id="myChart" style="width: 600px;height:400px;"></div>
{{end}}
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/3.5.4/echarts.min.js"></script>
<script>
$(document).ready(function(){
    var myChart = echarts.init(document.getElementById('myChart'));
    var option = {
        title: {
            text: '柱状图'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: '{{.chart_type}}',
            data: {{.chart_data}},
            label: {
                normal: {
                    show: true,
                    position: 'top'
                }
            }
        }]
    };
    myChart.setOption(option);
});
</script>

コードでは、まず {{.chart_data}} と {{.chart_type}} を使用してデータとグラフの種類を出力し、データの正確さを確認します。デバッグ時。次に、条件ステートメントを使用してデータが渡されたかどうかを判断し、データが渡された後にのみグラフ領域が表示されます。

次に、ECharts ライブラリを導入し、echarts.init メソッドを使用して、指定された ID で DOM 要素を初期化しました。この例では、タイトル、ツールヒント、凡例、x 軸、y 軸、シリーズなどの基本的な構成項目を追加しました。このうち、xAxis と yAxis はそれぞれ横軸と縦軸のデータを定義し、系列はグラフのデータを定義するために使用されます。

円グラフの描画

ヒストグラムに加えて、ECharts や golang を使用して他の種類のグラフを描画することもできます。次に円グラフを描いてみます。コードは次のとおりです。

package controllers

import (
    "github.com/astaxie/beego"
)

type MainController struct {
    beego.Controller
}

func (this *MainController) Get() {
    this.Data["Website"] = "beego.me"
    this.Data["Email"] = "astaxie@gmail.com"
    this.TplName = "index.tpl"

    data := map[string]int{"直接访问":335, "邮件营销":310, "联盟广告":234, "视频广告":135, "搜索引擎":1548}
    this.Data["chart_data"] = data
    this.Data["chart_type"] = "pie"
}

コードでは、円グラフのデータを含む data という名前のマップを定義します。前のセクションと同様に、このデータをテンプレートの "chart_data" 変数とチャート タイプの "chart_type" 変数に渡します。ただし、今回は円グラフの種類として「円」を使用します。

次に、テンプレートをレイアウトし、ECharts ライブラリを使用してグラフをレンダリングします。コードは次のとおりです。

{{.chart_data}}
{{.chart_type}}

{{if .chart_data}}
    <div id="myChart" style="width: 600px;height:400px;"></div>
{{end}}
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/3.5.4/echarts.min.js"></script>
<script>
$(document).ready(function(){
    var myChart = echarts.init(document.getElementById('myChart'));
    var option = {
        title: {
            text: '饼图'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: 10,
            data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
        },
        series: [
            {
                name: '访问来源',
                type: '{{.chart_type}}',
                radius: '45%',
                center: ['50%', '60%'],
                data: [
                    {value: 335, name: '直接访问'},
                    {value: 310, name: '邮件营销'},
                    {value: 234, name: '联盟广告'},
                    {value: 135, name: '视频广告'},
                    {value: 1548, name: '搜索引擎'}
                ],
                label: {
                    normal: {
                        show: false,
                        position: 'inside'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '20',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                }
            }
        ]
    };
    myChart.setOption(option);
});
</script>

コードでは、まず {{.chart_data}} と {{.chart_type}} を使用してデータとグラフの種類を出力します。次に、条件ステートメントを使用して、チャート領域を表示するかどうかを制御します。

チャートの構成項目では、特定の形式の「data」配列を使用してチャートのデータを定義します。このうち、value はデータのサイズを表すために使用され、name はデータの名前を表すために使用されます。同時に、「label」や「labelLine」などの属性を使用してラベルを設定することもできます。

概要

この記事では、EChartsとgolangを使って美しい統計グラフを簡単に描く方法を紹介します。まず、単純な棒グラフと円グラフを実装し、具体的なコード例を示しました。これらの例を通じて、ECharts の使用方法と、それを golang フレームワークと組み合わせてデータ視覚化のニーズを実現する方法を学ぶことができます。

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