처음부터 시작하기: ECharts와 golang을 사용하여 아름다운 통계 차트 만들기
처음부터 시작: ECharts와 golang을 사용하여 아름다운 통계 차트 만들기
데이터 시각화 시대에 통계 차트는 데이터를 표시하는 중요한 도구가 되었습니다. 강력하고 사용하기 쉬운 오픈 소스 라이브러리인 ECharts는 다양한 차트 유형과 풍부한 차트 스타일을 제공합니다. 효율적이고 강력한 프로그래밍 언어인 golang과 결합하면 아름답고 대화형 통계 차트를 쉽게 만들 수 있습니다.
이 기사에서는 ECharts와 golang을 사용하여 처음부터 간단한 통계 차트를 만드는 방법을 설명합니다. 우리는 golang을 백엔드 언어로 사용하여 데이터를 가져오고 이를 프런트엔드의 ECharts 라이브러리에 전달하여 차트를 생성합니다. 시작하자!
먼저 golang 및 ECharts 라이브러리를 설치해야 합니다. 아직 golang을 설치하지 않았다면 공식 웹사이트에서 다운로드하여 설치할 수 있습니다: https://golang.org/
다음으로 ECharts 라이브러리를 설치해야 합니다. 공식 문서에서 설치 방법을 찾을 수 있습니다. of ECharts: https:/ /echarts.apache.org/zh/index.html
설치 후 새로운 golang 프로젝트를 생성하고 프로젝트 디렉토리에 main.go라는 파일을 생성합니다. main.go的文件。
第一步，我们需要导入必要的golang包：
package main
import (
"encoding/json"
"fmt"
"net/http"
)第二步，我们创建一个简单的数据结构，表示我们的统计数据：
type Data struct {
Label string `json:"label"`
Value int `json:"value"`
}第三步，我们创建一个handler函数来处理HTTP请求，并将数据以JSON格式返回给前端：
func handler(w http.ResponseWriter, r *http.Request) {
data := []Data{
{Label: "Apple", Value: 10},
{Label: "Banana", Value: 20},
{Label: "Orange", Value: 15},
}
jsonData, err := json.Marshal(data)
if err != nil {
fmt.Println("Error:", err)
return
}
w.Header().Set("Content-Type", "application/json")
w.Write(jsonData)
}第四步，我们创建一个main函数，并启动一个HTTP服务器来监听请求：
func main() {
http.HandleFunc("/data", handler)
http.ListenAndServe(":8080", nil)
}接下来，我们回到ECharts的前端部分。在项目目录下创建一个名为index.html的文件，并在其中加入以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ECharts Example</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 600px; height: 400px;"></div>
<script>
fetch('/data')
.then(response => response.json())
.then(data => {
const chart = echarts.init(document.getElementById('chart'));
const options = {
xAxis: {
type: 'category',
data: data.map(item => item.label),
},
yAxis: {
type: 'value',
},
series: [{
type: 'bar',
data: data.map(item => item.value),
}],
};
chart.setOption(options);
});
</script>
</body>
</html>最后，我们打开终端，进入项目目录并运行go run main.go启动我们的golang服务器。
在浏览器中访问http://localhost:8080
rrreee
두 번째 단계에서는 통계를 나타내는 간단한 데이터 구조를 만듭니다.rrreee
세 번째 단계에서는 처리할 핸들러 함수를 만듭니다. HTTP 요청을 수행하고 데이터를 JSON 형식으로 프런트 엔드에 반환합니다. 🎜rrreee🎜네 번째 단계에서는 기본 함수를 만들고 요청을 수신하기 위한 HTTP 서버를 시작합니다. 🎜rrreee🎜다음으로 프런트 엔드로 돌아갑니다. ECharts의 끝 부분. 프로젝트 디렉토리에index.html라는 파일을 생성하고 다음 코드를 추가합니다: 🎜rrreee🎜마지막으로 터미널을 열고 프로젝트 디렉토리에 들어가서 go run main.go를 실행합니다. golang 서버를 시작합니다. 🎜🎜브라우저에서 http://localhost:8080을 방문하면 통계 차트가 포함된 페이지를 볼 수 있습니다. 이 차트는 막대 차트로 표시되는 데이터를 보여줍니다. 🎜🎜이 간단한 예를 통해 우리는 ECharts와 golang을 사용하여 아름다운 통계 차트를 만드는 방법을 배웠습니다. 필요에 따라 데이터와 차트 유형을 수정할 수 있으며 ECharts는 다양한 요구 사항을 충족하는 다양한 옵션을 제공합니다. 🎜🎜이 기사가 여러분에게 도움이 되기를 바라며, 여러분이 데이터 시각화의 길로 더욱 더 나아가길 바랍니다! 🎜위 내용은 처음부터 시작하기: ECharts와 golang을 사용하여 아름다운 통계 차트 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7456
15
1376
52
77
11
41
19
15
10
Golang을 사용하여 파일을 안전하게 읽고 쓰는 방법은 무엇입니까?
Jun 06, 2024 pm 05:14 PM
Go에서는 안전하게 파일을 읽고 쓰는 것이 중요합니다. 지침은 다음과 같습니다. 파일 권한 확인 지연을 사용하여 파일 닫기 파일 경로 유효성 검사 컨텍스트 시간 초과 사용 다음 지침을 따르면 데이터 보안과 애플리케이션의 견고성이 보장됩니다.
Golang 데이터베이스 연결을 위한 연결 풀을 구성하는 방법은 무엇입니까?
Jun 06, 2024 am 11:21 AM
Go 데이터베이스 연결을 위한 연결 풀링을 구성하는 방법은 무엇입니까? 데이터베이스 연결을 생성하려면 데이터베이스/sql 패키지의 DB 유형을 사용하고, 최대 동시 연결 수를 제어하려면 MaxIdleConns를 설정하고, 연결의 최대 수명 주기를 제어하려면 ConnMaxLifetime을 설정하세요.
golang 프레임워크의 장점과 단점 비교
Jun 05, 2024 pm 09:32 PM
Go 프레임워크는 높은 성능과 동시성 장점으로 인해 두각을 나타냅니다. 그러나 상대적으로 새로운 프레임워크, 작은 개발자 생태계, 일부 기능 부족 등 몇 가지 단점도 있습니다. 또한 빠른 변화와 학습 곡선은 프레임워크마다 다를 수 있습니다. Gin 프레임워크는 효율적인 라우팅, 내장된 JSON 지원 및 강력한 오류 처리로 인해 RESTful API를 구축하는 데 널리 사용됩니다.
Golang 프레임워크의 오류 처리에 대한 모범 사례는 무엇입니까?
Jun 05, 2024 pm 10:39 PM
모범 사례: 잘 정의된 오류 유형(오류 패키지)을 사용하여 사용자 정의 오류 생성 자세한 내용 제공 오류를 적절하게 기록 오류를 올바르게 전파하고 컨텍스트를 추가하기 위해 필요에 따라 오류를 숨기거나 억제하지 않음
JSON 데이터를 Golang의 데이터베이스에 저장하는 방법은 무엇입니까?
Jun 06, 2024 am 11:24 AM
JSON 데이터는 gjson 라이브러리 또는 json.Unmarshal 함수를 사용하여 MySQL 데이터베이스에 저장할 수 있습니다. gjson 라이브러리는 JSON 필드를 구문 분석하는 편리한 방법을 제공하며, json.Unmarshal 함수에는 JSON 데이터를 비정렬화하기 위한 대상 유형 포인터가 필요합니다. 두 방법 모두 SQL 문을 준비하고 삽입 작업을 수행하여 데이터를 데이터베이스에 유지해야 합니다.
Golang 프레임워크 vs. Go 프레임워크: 내부 아키텍처와 외부 기능 비교
Jun 06, 2024 pm 12:37 PM
GoLang 프레임워크와 Go 프레임워크의 차이점은 내부 아키텍처와 외부 기능에 반영됩니다. GoLang 프레임워크는 Go 표준 라이브러리를 기반으로 하며 기능을 확장하는 반면, Go 프레임워크는 특정 목적을 달성하기 위해 독립적인 라이브러리로 구성됩니다. GoLang 프레임워크는 더 유연하고 Go 프레임워크는 사용하기 더 쉽습니다. GoLang 프레임워크는 성능 면에서 약간의 이점이 있고 Go 프레임워크는 확장성이 더 좋습니다. 사례: gin-gonic(Go 프레임워크)은 REST API를 구축하는 데 사용되고 Echo(GoLang 프레임워크)는 웹 애플리케이션을 구축하는 데 사용됩니다.
golang 프레임워크의 일반적인 보안 문제를 해결하는 방법은 무엇입니까?
Jun 05, 2024 pm 10:38 PM
Go 프레임워크에서 일반적인 보안 문제를 해결하는 방법 웹 개발에서 Go 프레임워크가 널리 채택됨에 따라 보안을 보장하는 것이 중요해졌습니다. 다음은 샘플 코드를 통해 일반적인 보안 문제를 해결하기 위한 실용적인 가이드입니다. 1. SQL 주입 SQL 주입 공격을 방지하려면 준비된 문이나 매개변수화된 쿼리를 사용하세요. 예: constquery="SELECT*FROMusersWHEREusername=?"stmt,err:=db.Prepare(query)iferr!=nil{//Handleerror}err=stmt.QueryR
Golang 정규 표현식과 일치하는 첫 번째 하위 문자열을 찾는 방법은 무엇입니까?
Jun 06, 2024 am 10:51 AM
FindStringSubmatch 함수는 정규 표현식과 일치하는 첫 번째 하위 문자열을 찾습니다. 이 함수는 일치하는 하위 문자열이 포함된 조각을 반환합니다. 첫 번째 요소는 전체 일치 문자열이고 후속 요소는 개별 하위 문자열입니다. 코드 예: regexp.FindStringSubmatch(text,pattern)는 일치하는 하위 문자열의 조각을 반환합니다. 실제 사례: 이메일 주소의 도메인 이름을 일치시키는 데 사용할 수 있습니다. 예를 들어 이메일:="user@example.com", 패턴:=@([^\s]+)$를 사용하여 도메인 이름 일치를 가져옵니다. [1].
