CanvasJS를 사용하여 Express.js 앱에 차트 표시
- Susan Sarandon원래의
- 2024-12-03 10:26:09371검색
Express.js는 서버측 애플리케이션을 만들기 위한 강력한 도구이며 CanvasJS를 사용하면 대화형 차트로 데이터를 쉽게 시각화할 수 있습니다. 이 튜토리얼에서는 Express.js 애플리케이션에서 원활한 차트 작성 경험을 위해 두 가지를 통합하는 방법을 보여줍니다.
전제 조건
시작하기 전에 다음이 설치되어 있는지 확인하세요.
- Node.js(LTS 버전 권장)
- npm(Node.js와 함께 제공)
- JavaScript 및 Express.js에 대한 기본 지식
1단계: Express.js 애플리케이션 설정
- 프로젝트에 대한 새 디렉토리를 생성하고 해당 디렉토리로 이동합니다.
mkdir express-canvasjs-chart cd express-canvasjs-chart
- 새 Node.js 프로젝트를 초기화합니다.
npm init -y
- Express 설치:
npm install express
- server.js라는 파일을 만들고 기본 Express 서버를 설정합니다.
const express = require('express');
const app = express();
const port = 3000;
app.use(express.static('public'));
app.get('/', (req, res) => {
res.sendFile(__dirname + '/public/index.html');
});
app.listen(port, () => {
console.log(`Server is running on http://localhost:${port}`);
});
2단계: 프로젝트에 CanvasJS 추가
CanvasJS는 클라이언트측 라이브러리이므로 프런트엔드 코드에 포함해야 합니다.
- CanvasJS 공식 홈페이지에서 CanvasJS 라이브러리를 다운로드하세요.
- 프로젝트 디렉토리에 공용 폴더를 생성하세요.
- 다운로드한 CanvasJS 스크립트(예: canvasjs.min.js)를 공용 폴더에 넣습니다.
3단계: 차트를 표시하기 위한 HTML 파일 만들기
- public 폴더 안에 index.html이라는 파일을 생성하세요.
- index.html에 다음 콘텐츠를 추가하세요.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display Chart in Express App using CanvasJS</title>
<script src="canvasjs.min.js"></script>
</head>
<body>
<div>
<h3>
Step 4: Run Your Application
</h3>
<ol>
<li>Start the server:
</li>
</ol>
<pre class="brush:php;toolbar:false">node server.js
- 브라우저를 열고 http://localhost:3000으로 이동하세요.
- 판매 데이터를 표시하는 세로 막대형 차트가 표시됩니다.
5단계: 차트 사용자 정의
차트를 사용자 정의하려면 MySQL이나 MongoDB와 같은 API나 데이터베이스의 동적 데이터로 dataPoints 배열을 수정할 수 있습니다. 예를 들어 정적 판매 데이터를 백엔드 서비스에서 가져온 실시간 판매로 바꿀 수 있습니다. 시각화 요구 사항에 맞게 선, 막대, 원형 등 다양한 차트 유형을 실험해 볼 수도 있습니다. 자세한 사용자 정의 옵션은 CanvasJS 설명서를 참조하세요.
결론
CanvasJS를 Express.js와 통합하면 시각적으로 설득력 있고 대화형 방식으로 데이터를 표시하는 기능을 활용할 수 있습니다. 대시보드를 구축하든 사용자 인터페이스를 향상하든 이 조합은 데이터 통찰력을 더욱 매력적이고 접근 가능하게 만드는 원활한 방법을 제공합니다. 또한 MySQL 또는 MongoDB와 같은 데이터베이스에서 가져온 데이터를 사용하여 차트를 표시할 수 있으며 이에 대해서는 향후 기사에서 살펴보겠습니다.
위 내용은 CanvasJS를 사용하여 Express.js 앱에 차트 표시의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!