GoLang 웹 앱에서 JavaScript 보고 도구를 사용하는 방법
10006 단어 tutorialjavascriptwebdev
전제 조건
다음 내용은 컴퓨터에 GoLang이 설치되어 있다고 가정합니다. 가지고 있지 않은 경우 GoLang website에서 얻을 수 있습니다. 컴퓨터에 ActiveReportsJS도 설치되어 있으면 가장 좋습니다. 가지고 있지 않은 경우 ActiveReportsJS website에서 얻을 수 있습니다.
Create a GoLang Application For this tutorial, we will use the Echo 웹 프레임워크로 이동합니다.
Echo 웹 프레임워크를 사용하는 새 GoLang 애플리케이션을 만들려면 터미널 또는 명령 프롬프트에서 다음 명령을 실행합니다.
mkdir ReportingOnTheGo && cd ReportingOnTheGo
go mod init ReportingOnTheGo
go get github.com/labstack/echo/v4
그런 다음 Visual Studio Code와 같은 선호하는 코드 편집기에서 새로 생성된 ReportingOnTheGo 디렉토리를 열고 'server.go'라는 새 파일을 만들고 시작 부분에 다음 코드를 추가합니다.
package main
import (
"log"
"net/http"
"encoding/csv"
"strconv"
"os"
"github.com/labstack/echo/v4"
)
JSON API용 데이터 모델 생성
the E for Excel 웹사이트에서 다운로드할 수 있는 판매 데이터 세트를 사용합니다. 100개 레코드부터 5백만 레코드까지 다양한 크기의 데이터 세트를 제공합니다. 단순화를 위해 100개의 레코드가 있는 첫 번째 데이터 세트를 사용합니다.
데이터 세트에는 많은 필드가 있지만 이 자습서에서는 그 중 몇 개만 사용합니다. 다음 코드 조각을 server.go 파일에 삽입합니다.
type Sale struct {
Region string `json:"region"`
ItemType string `json:"itemType"`
UnitsSold int `json:"unitsSold"`
}
Initialize the data from a CSV file
Download and unzip the data from the archive into the "data" directory of the application. Add the following code into the server.go file:
func ReadCsv(filename string) ([][]string, error) {
f, err := os.Open(filename)
if err != nil {
return [][]string{}, err
}
defer f.Close()
lines, err := csv.NewReader(f).ReadAll()
if err != nil {
return [][]string{}, err
}
return lines, nil
}
func main() {
lines, err := ReadCsv("data\\100 Sales Records.csv")
if err != nil {
log.Fatal(err)
}
var sales []Sale
for _, line := range lines[1:] {
unitsSold, err := strconv.Atoi(line[8])
if err != nil {
log.Fatal(err)
}
sale := Sale{
Region: line[0],
ItemType: line[2],
UnitsSold: unitsSold,
}
sales = append(sales, sale)
}
}
At the end of the main() function, add the following code that initializes the web-server, adds the JSON endpoint that returns the sales data, and serves the static files from the assets folder:
e := echo.New()
e.Static("/", "assets")
e.GET("api/sales", func(c echo.Context) error {
return c.JSON(http.StatusOK, sales)
} )
e.Logger.Fatal(e.Start(":3000"))
Create an ActiveReportsJS report
Let's now create a report that visualizes the data from the JSON API.
In the Standalone Report Designer Application 파일 메뉴를 클릭하고 새로 생성된 보고서에 대한 연속 페이지 레이아웃 템플릿을 선택합니다.속성 관리자의 Data panel을 열고 추가 버튼을 클릭합니다.
데이터 소스 편집기 대화상자에서 ENDPOINT 입력란에 http://localhost:3000/api/sales을 입력하고 변경사항 저장 버튼을 클릭합니다.
데이터 패널에서 DataSource 근처의 + 아이콘을 클릭합니다.
Data Set Editor 대화상자에서 NAME 필드에 Sales를 입력하고 JSON Path 필드에 $.*를 입력합니다.
Validate 버튼을 클릭하고 DataBase Fields 섹션에 [3개 항목] 텍스트가 표시되는지 확인한 다음 Save Changes 버튼을 클릭합니다.
툴바의 왼쪽에 있는 햄버거 메뉴를 사용하여 toolbox을 확장합니다.
도구 상자에서 보고서 페이지 영역의 왼쪽 상단으로 차트 항목을 드래그 앤 드롭합니다. 차트 마법사 대화상자가 나타납니다. Bar 유형을 선택하고 첫 화면에서 Next 버튼을 클릭합니다.
대화상자의 두 번째 화면에서 다음 이미지와 같이 데이터를 구성하고 다음 버튼을 클릭합니다.
세 번째 화면에서 마침 버튼을 클릭합니다.
보고서 페이지의 전체 너비를 채우도록 차트 보고서 항목의 크기를 조정합니다. 차트 범례를 클릭하여 해당 속성을 속성 패널에 로드하고 방향 속성을 가로로, 위치 속성을 아래쪽으로 설정합니다.
파일 메뉴를 클릭하고 새로 만든 보고서를 애플리케이션의 자산 폴더에 SalesReport.rdlx-json이라는 이름으로 저장합니다.
Create a static HTML page to display the report
In the application's assets folder, create an index.html file and replace its content with the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sales Report</title>
<link
rel="stylesheet"
href="https://cdn.grapecity.com/activereportsjs/3.latest/styles/ar-js-ui.css"
type="text/css"
/>
<link
rel="stylesheet"
href="https://cdn.grapecity.com/activereportsjs/3.latest/styles/ar-js-viewer.css"
type="text/css"
/>
<script src="https://cdn.grapecity.com/activereportsjs/3.latest/dist/ar-js-core.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/3.latest/dist/ar-js-viewer.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/3.latest/dist/ar-js-pdf.js"></script>
<style>
#viewer-host {
width: 100%;
height: 100vh;
}
</style>
</head>
<body>
<div id="viewer-host"></div>
<script>
var viewer = new ActiveReports.Viewer("#viewer-host");
viewer.open('SalesReport.rdlx-json');
</script>
</body>
</html>
Reference
이 문제에 관하여(GoLang 웹 앱에서 JavaScript 보고 도구를 사용하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/grapecity/how-to-use-a-javascript-reporting-tool-in-a-golang-web-app-5b8k텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
