ECharts 및 golang 작동: 아름다운 통계 차트 만들기 튜토리얼
- WBOY원래의
- 2023-12-18 12:52:171199검색
ECharts 및 golang 작동: 아름다운 통계 차트 만들기 튜토리얼
소개
데이터 시각화는 현대 웹 애플리케이션에서 없어서는 안 될 부분입니다. ECharts는 강력하고 유연한 오픈 소스 차트 라이브러리인 반면, golang은 강력하고 빠른 프로그래밍 언어입니다. 이 두 가지를 결합하면 웹 애플리케이션에서 아름다운 통계 차트 효과를 얻을 수 있습니다. 이 기사에서는 ECharts와 golang을 사용하여 아름다운 통계 차트를 만드는 방법을 소개하고 구체적인 코드 예제를 제공합니다.
1. 준비
시작하기 전에 해당 소프트웨어를 설치하고 필요한 라이브러리를 로드해야 합니다.
- Golang 설치
먼저 golang을 다운로드하고 설치해야 합니다. Golang 공식 홈페이지(https://golang.org/)를 방문하여 최신 버전의 golang을 다운로드하고 공식 가이드에 따라 설치하시면 됩니다. - ECharts 설치
ECharts는 npm을 통해 설치할 수 있습니다. ECharts를 설치하려면 터미널에서 다음 명령을 실행하세요.
npm install echarts --save
- 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!