ECharts 및 golang 작동: 아름다운 통계 차트 만들기 튜토리얼
소개
데이터 시각화는 현대 웹 애플리케이션에서 없어서는 안 될 부분입니다. ECharts는 강력하고 유연한 오픈 소스 차트 라이브러리인 반면, golang은 강력하고 빠른 프로그래밍 언어입니다. 이 두 가지를 결합하면 웹 애플리케이션에서 아름다운 통계 차트 효과를 얻을 수 있습니다. 이 기사에서는 ECharts와 golang을 사용하여 아름다운 통계 차트를 만드는 방법을 소개하고 구체적인 코드 예제를 제공합니다.
1. 준비
시작하기 전에 해당 소프트웨어를 설치하고 필요한 라이브러리를 로드해야 합니다.
npm install echarts --save
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!