CanvasJS를 사용하여 Express.js 앱에 차트 표시-JS 튜토리얼-php.cn

CanvasJS를 사용하여 Express.js 앱에 차트 표시

Susan Sarandon

풀어 주다： 2024-12-03 10:26:09

원래의

406명이 탐색했습니다.

Display Chart in Express.js App using CanvasJS

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!