>  기사  >  백엔드 개발  >  ECharts 및 golang 작동: 아름다운 통계 차트 만들기 튜토리얼

ECharts 및 golang 작동: 아름다운 통계 차트 만들기 튜토리얼

WBOY
WBOY원래의
2023-12-18 12:52:171246검색

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

ECharts 및 golang 작동: 아름다운 통계 차트 만들기 튜토리얼

소개
데이터 시각화는 현대 웹 애플리케이션에서 없어서는 안 될 부분입니다. ECharts는 강력하고 유연한 오픈 소스 차트 라이브러리인 반면, golang은 강력하고 빠른 프로그래밍 언어입니다. 이 두 가지를 결합하면 웹 애플리케이션에서 아름다운 통계 차트 효과를 얻을 수 있습니다. 이 기사에서는 ECharts와 golang을 사용하여 아름다운 통계 차트를 만드는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

1. 준비
시작하기 전에 해당 소프트웨어를 설치하고 필요한 라이브러리를 로드해야 합니다.

  1. Golang 설치
    먼저 golang을 다운로드하고 설치해야 합니다. Golang 공식 홈페이지(https://golang.org/)를 방문하여 최신 버전의 golang을 다운로드하고 공식 가이드에 따라 설치하시면 됩니다.
  2. ECharts 설치
    ECharts는 npm을 통해 설치할 수 있습니다. ECharts를 설치하려면 터미널에서 다음 명령을 실행하세요.
npm install echarts --save
  1. Create golang project
    다음 명령을 사용하여 새 golang 프로젝트를 만들고 새 golang 모듈을 초기화합니다.
go mod init your_project_name

그런 다음 다음 명령을 사용하여 필요한 라이브러리를 설치하세요.

go get github.com/gin-gonic/gin

2. 웹 서버 만들기
golang의 gin 프레임워크를 사용하면 쉽게 웹 서버를 만들 수 있습니다.

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")
}

templates 폴더에 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 요소를 추가하고 너비와 높이를 설정합니다.

그런 다음 스크립트 태그 안에 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. 웹 애플리케이션 실행
터미널에서 다음 명령을 사용하여 golang 애플리케이션을 실행하세요.

go run main.go

다음으로, 브라우저를 열고 http://localhost:8080을 방문하세요.

히스토그램을 보여주는 웹페이지가 표시됩니다.

해당 ECharts 코드를 작성하면 다양한 유형의 통계 차트를 생성하고 웹 애플리케이션에 표시할 수 있습니다.

결론
ECharts와 golang을 결합하면 아름다운 통계 차트를 쉽게 만들 수 있습니다. 이 기사에서는 웹 서버를 생성하고 ECharts를 사용하여 웹 애플리케이션에서 통계 차트 코드를 작성하는 방법을 소개합니다. 이 기사가 ECharts와 golang에 대한 이해를 심화하고 웹 애플리케이션에 더욱 생생하고 흥미로운 데이터 시각화 효과를 추가하는 데 도움이 되기를 바랍니다.

위 내용은 ECharts 및 golang 작동: 아름다운 통계 차트 만들기 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.