ECharts와 golang을 사용하여 아름다운 통계 차트를 쉽게 그리는 방법

ECharts와 golang을 사용하여 아름다운 통계 차트를 쉽게 그리는 방법

데이터가 지속적으로 축적되고 적용되면서 통계 차트는 데이터를 표시하는 중요한 방법이 되었습니다. 이 분야에서 ECharts는 인기 있는 오픈 소스 JavaScript 차트 라이브러리로, 강력하고 사용하기 쉬우며 다양한 스타일과 차트 유형을 지원하므로 개발에 널리 사용되었습니다. 동시에 효율적인 프로그래밍 언어로서 golang은 웹 백엔드 개발에서 점점 인기를 얻고 있습니다.

이 글에서는 주로 ECharts와 golang을 사용하여 아름다운 통계 차트를 그리는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

1. 준비

통계 차트를 개발하기 전에 다음 도구와 환경을 준비해야 합니다.

• Golang 환경
• Beego 프레임워크
• ECharts 라이브러리

그 중 Golang 환경은 다음을 통해 다운로드하여 설치할 수 있습니다. 공식 웹사이트에서 Beego 프레임워크는 다음 명령을 통해 설치할 수 있습니다:

go get github.com/astaxie/beego

ECharts 라이브러리는 다음 명령을 통해 설치할 수 있습니다:

npm install echarts --save

2. 히스토그램 그리기

먼저 간단한 히스토그램을 그려보겠습니다. 코드는 다음과 같습니다.

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 요소를 초기화했습니다. 이 예에서는 제목, 도구 설명, 범례, xAxis, yAxis, 시리즈 등과 같은 몇 가지 기본 구성 항목을 추가했습니다. 그 중 xAxis와 yAxis는 각각 가로축과 세로축의 데이터를 정의하며, 시리즈는 차트의 데이터를 정의하는 데 사용됩니다.

3. 파이 차트 그리기

막대 차트 외에도 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}}을 사용하여 데이터 및 차트 유형을 출력합니다. 그런 다음 조건문을 사용하여 차트 영역 표시 여부를 제어합니다.

차트의 구성 항목에서는 특정 형식의 "데이터" 배열을 사용하여 차트의 데이터를 정의합니다. 그 중 value는 데이터의 크기를 나타내는 데 사용되고, name은 데이터의 이름을 나타내는 데 사용됩니다. 동시에 "label" 및 "labelLine"과 같은 속성을 사용하여 레이블을 설정할 수도 있습니다.

4. 요약

이 기사에서는 ECharts와 golang을 사용하여 아름다운 통계 차트를 쉽게 그리는 방법을 소개합니다. 먼저 간단한 막대 차트와 파이 차트를 구현하고 구체적인 코드 예제를 제공했습니다. 이러한 예제를 통해 ECharts를 사용하고 이를 golang 프레임워크와 결합하여 데이터 시각화 요구 사항을 충족하는 방법을 배울 수 있습니다.

위 내용은 ECharts와 golang을 사용하여 아름다운 통계 차트를 쉽게 그리는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!