인터넷 시대의 도래와 함께 데이터 분석과 시각적 표시는 다양한 응용 분야에서 필수적인 부분이 되었습니다. 최신 웹 애플리케이션이 개발되면서 사용하기 쉽고 효율적인 도구를 사용하여 데이터를 처리하고 아름다운 차트 구성 요소를 만드는 방법이 중요한 주제가 되었습니다. 이번 글에서는 Go 언어와 Vue.js를 사용해 차트 컴포넌트를 구축하는 방법을 소개하겠습니다.
Go 언어와 Vue.js는 두 가지 인기 있는 오픈 소스 도구로, 둘 다 광범위한 관심과 사용을 받아왔습니다. Go 언어는 효율성, 신뢰성, 단순성을 제공하도록 설계된 새로운 프로그래밍 언어이며 널리 사용되는 서버 측 프로그래밍 언어가 되었습니다. Vue.js는 차트와 같은 대화형 사용자 인터페이스 구성 요소를 구축하는 데 특히 유용한 널리 사용되는 JavaScript 프레임워크입니다. Go 언어와 Vue.js는 모두 배우고 사용하기 쉽고 확장하기 쉽습니다.
이 기사에서는 Go 언어를 사용하여 백엔드 코드 작성, 데이터 처리 및 차트 데이터 API를 제공합니다. 그런 다음 Vue.js 프런트 엔드 프레임워크를 사용하여 차트 구성 요소를 만들고 백엔드에서 데이터를 가져온 다음 데이터를 시각화합니다. 우리는 두 가지 인기 있는 차트 라이브러리인 Chart.js와 Plotly.js를 사용할 것입니다. 이 라이브러리는 HTML5 Canvas 및 D3.js 기술을 사용하여 반응형 차트를 만듭니다.
먼저 데이터 처리 API를 만들어 보겠습니다. 이 예에서는 Go 언어를 사용하여 백엔드 코드를 작성하겠습니다. 프로세스를 단순화하기 위해 Echo 프레임워크를 사용하여 API 경로와 컨트롤러를 생성하겠습니다. data.go 파일에서는 프론트엔드에서 API로 전달할 다섯 개의 필드가 포함된 data라는 구조체를 정의합니다.
type data struct {
Month int `json:"month"`
Year int `json:"year"`
Revenue int `json:"revenue"`
Expenses int `json:"expenses"`
Profit int `json:"profit"`
}다음 단계는 main.go 파일에 API 경로를 생성하고 제어 장치. Vue.js 구성 요소에서 보낸 GET 요청을 수락하고, 데이터를 구문 분석하고, 데이터 처리를 수행하고, 데이터를 반환하는 getDataHandler라는 경로 처리 함수를 정의합니다. 구체적인 코드는 다음과 같습니다.
func getDataHandler(c echo.Context) error {
// 解析数据
year, _ := strconv.Atoi(c.QueryParam("year"))
month, _ := strconv.Atoi(c.QueryParam("month"))
// 处理数据，此处我们省略了数据查询和处理代码
// 返回数据
response := []data{
{Month: 1, Year: 2022, Revenue: 100000, Expenses: 50000, Profit: 50000},
{Month: 2, Year: 2022, Revenue: 75000, Expenses: 40000, Profit: 35000},
{Month: 3, Year: 2022, Revenue: 120000, Expenses: 80000, Profit: 40000},
{Month: 4, Year: 2022, Revenue: 85000, Expenses: 60000, Profit: 25000},
{Month: 5, Year: 2022, Revenue: 105000, Expenses: 75000, Profit: 30000},
{Month: 6, Year: 2022, Revenue: 95000, Expenses: 55000, Profit: 40000},
{Month: 7, Year: 2022, Revenue: 140000, Expenses: 65000, Profit: 75000},
{Month: 8, Year: 2022, Revenue: 120000, Expenses: 45000, Profit: 75000},
{Month: 9, Year: 2022, Revenue: 115000, Expenses: 50000, Profit: 65000},
{Month: 10, Year: 2022, Revenue: 95000, Expenses: 60000, Profit: 35000},
{Month: 11, Year: 2022, Revenue: 80000, Expenses: 40000, Profit: 40000},
{Month: 12, Year: 2022, Revenue: 125000, Expenses: 80000, Profit: 45000},
}
return c.JSON(http.StatusOK, response)
}이제 Vue.js 구성 요소에서 보낸 GET 요청을 수락하고 데이터를 반환할 수 있는 API를 만들었습니다. 다음 단계는 API에서 데이터를 가져와 차트를 만드는 Vue.js 구성 요소를 만드는 것입니다. Chart.js와 Plotly.js를 사용하여 두 가지 유형의 차트를 작성하는 방법을 보여드리겠습니다.
먼저 월간 판매 수익과 지출을 표시하는 막대 차트 구성 요소를 만듭니다. Vue.js에 "BarChart"라는 구성 요소를 정의합니다. Vue.js에서는 axios 라이브러리를 사용하여 HTTP 요청을 처리하고 Go 언어로 작성된 API에서 데이터를 가져옵니다. 마운트된 후크 기능에서는 axios 라이브러리를 사용하여 API에서 데이터를 가져오고 Chart.js 라이브러리를 사용하여 막대 차트를 만듭니다. 구성 요소 코드는 다음과 같습니다.
<template>
<div>
<canvas ref="bar"></canvas>
</div>
</template>
<script>
import axios from 'axios';
import Chart from 'chart.js';
export default {
name: 'BarChart',
mounted() {
axios.get('/api/data?year=2022').then(response => {
let data = response.data;
let ctx = this.$refs.bar.getContext('2d');
let myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: data.map(d => d.Month),
datasets: [{
label: 'Revenue',
data: data.map(d => d.Revenue),
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}, {
label: 'Expenses',
data: data.map(d => d.Expenses),
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
}]
},
options: {
responsive: true,
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
});
}
}
</script>이 구성 요소에서는 API에서 데이터를 가져온 다음 Chart.js 라이브러리를 사용하여 막대 차트를 만듭니다. Vue.js의 $refs 속성을 사용하여 템플릿의 캔버스 요소에 대한 참조를 정의한 다음 마운트된 후크 기능에서 이를 사용하여 캔버스의 컨텍스트를 얻습니다. 막대 차트 유형을 지정하고 수입과 지출에 대한 두 개의 데이터 컬렉션을 만든 다음 startAtZero 속성을 사용하여 y축의 크기를 조정합니다.
다음으로 판매 수익, 비용, 이익을 표시하는 분산형 차트 구성 요소를 만들어 보겠습니다. 다시 한번 API에서 데이터를 가져와 월별 산점도를 그립니다. 우리는 Plotly.js와 Vue.js 구성 요소를 사용하여 산점도를 그릴 것입니다. 구성 요소 코드는 다음과 같습니다.
<template>
<div :id="divId"></div>
</template>
<script>
import axios from 'axios';
import Plotly from 'plotly.js-basic-dist';
export default {
props: ['chartData'],
data() {
return {
divId: `scatter${Math.floor(Math.random() * 1000000)}`,
layout: {
title: 'Revenue, Expenses and profit by Month',
xaxis: {
title: 'Revenue'
},
yaxis: {
title: 'Expenses'
},
hovermode: 'closest'
}
}
},
mounted() {
axios.get('/api/data?year=2022').then(response => {
let data = response.data;
let scatterData = {
x: data.map(d => d.Revenue),
y: data.map(d => d.Expenses),
mode: 'markers',
hovertemplate: `Revenue: %{x:$,.2f}<br>Expenses: %{y:$,.2f}<br>Profit: %{text:$,.2f}`,
text: data.map(d => d.Profit),
marker: {
color: data.map(d => d.Profit),
size: 20,
line: {
width: 0.5,
color: 'white'
}
}
};
Plotly.newPlot(this.divId, [scatterData], this.layout);
});
}
}
</script>
<style scoped>
.plot {
max-width: 100%;
height: 500px;
}
</style>이 Vue.js 구성 요소 파일에서는 Vue.js props 속성을 사용하여 구성 요소에 데이터를 전달합니다. 이번에도 axios 라이브러리를 사용하여 API에서 데이터를 가져옵니다. 매월 포인트를 생성하고 가로축에 수입, 세로축에 지출을 지정합니다. 또한 Plotly.js에 Profit을 텍스트로 사용하여 각 지점에 표시하고 각 지점의 크기와 색상을 설정하도록 지시합니다.
Vue.js와 Go 언어를 사용하여 두 개의 차트 구성 요소를 만들었습니다. 이러한 구성 요소를 사용하면 데이터를 얻고 판매 데이터를 대화형으로 표시할 수 있습니다. 게다가 Chart.js와 Plotly.js를 사용하면 아름다운 차트를 만들고 고도로 맞춤화할 수 있습니다. 이러한 방법은 다른 데이터 시각화 프로젝트에 적용할 수 있으며 데이터 시각화 웹 사이트 및 애플리케이션을 빠르고 쉽고 확장 가능하게 만들 수 있습니다.
위 내용은 Go 언어와 Vue.js를 사용하여 차트 구성 요소를 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
