ApexCharts를 사용하여 SolidJS에 차트를 추가하는 방법
저자는 Write for DOnations 프로그램을 선택했습니다.
소개
데이터 시각화는 사용자가 자신의 웹 애플리케이션 시스템에서 무슨 일이 일어나고 있는지 직관적으로 알 수 있는 방법을 제공합니다. SolidJS.
SolidJS는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리입니다. SolidJS는 Vite와 같은 JavaScript 라이브러리와 동일한 디자인을 기반으로 하므로 애플리케이션을 JavaScript로 압축하여 압축하는 기본 빌드 도구입니다.
ApexCharts는 웹 앱용 대화형 시각화를 생성하기 위한 오픈 소스, 사용자 지정 가능한 JavaScript 차트 라이브러리입니다. SolidJS를 포함하여 많이 사용되는 JavaScript 프레임워크와 ApexCharts를 통합할 수 있습니다. ApexCharts에는 여러 화면에서 렌더링할 수 있는 유연하고 반응이 빠른 다양한 차트가 있습니다.
이 자습서에서는 데이터 시각화를 위해 ApexCharts를 SolidJS 애플리케이션에 통합합니다. OpenWeatherMap API에서 날씨 데이터를 가져와 막대 차트에 표시하는 애플리케이션을 개발합니다.
전제 조건
이 자습서를 따르려면 다음이 필요합니다.
- 컴퓨터에 설치된 Node.js. Node.js 설치 방법에 대한 자습서를 따라 설정할 수 있습니다.
- Chrome과 같은 웹 브라우저
- (선택 사항) SolidJS 라이브러리에 대한 기본 지식. SolidJS 설명서를 검토할 수 있습니다.
- (선택 사항) Atom과 같은 JavaScript 구문 강조를 지원하는 텍스트 편집기입니다. 이 자습서에서는 명령줄 편집기
nano를 사용합니다.
1단계 - SolidJS 프로젝트 만들기
이 단계에서는 SolidJS 프로젝트를 만들고 차트를 만드는 데 필요한 모든 종속성을 설치합니다. 필수 상용구 코드가 포함된 Vite 템플릿으로 SolidJS 앱을 생성합니다.
새 터미널 세션에서 이 자습서에 사용할 새 디렉터리를 만들고 이동합니다.
- mkdir charts
- cd charts
이 자습서에서는 디렉터리 이름을 charts로 지정하지만 원하는 대로 이름을 지정할 수 있습니다.
그런 다음 npx degit 명령을 실행하여 리포지토리 solid/js/templates/js에서 프로젝트 폴더로 템플릿을 복제합니다.
- npx degit solidjs/templates/js solid-chart
solid-chart를 원하는 애플리케이션 이름으로 바꿀 수 있습니다.
참고: TypeScript는 선택적 정적 타이핑, 클래스 및 인터페이스를 제공하는 JavaScript의 상위 집합입니다. 또한 향상된 코드 완성 기능과 JSX용 IntelliSense를 제공합니다. TypeScript 사용을 선호하는 경우 다음 명령을 실행합니다.
- npx degit solidjs/templates/ts solid-chart
/ts 템플릿에 대해 /js 템플릿과 동일한 출력을 받게 됩니다.
다음과 같은 결과가 표시됩니다.
Output> cloned solidjs/templates#HEAD to solid-chart
이 출력은 템플릿이 컴퓨터에 저장되었음을 확인합니다. 템플릿을 프로젝트 폴더에 복제한 후에는 템플릿 폴더로 이동하여 프로젝트에 필요한 종속 항목을 설치할 수 있습니다.
- cd solid-chart
- npm install
NPM은 프로젝트에 필요한 종속 항목을 설치합니다.
SolidJS에서 차트를 통합하려면 Solid-ApexCharts라는 두 가지 종속성이 더 필요합니다.
ApexCharts는 웹 앱용 대화형 시각화를 만들기 위한 JavaScript 차트 라이브러리입니다. ApexCharts는 막대, 선, 영역, 파이, 열, 상자, 촛대, 히트맵 등을 포함하여 14개의 차트를 지원합니다.
Solid-ApexCharts는 ApexCharts용 SolidJS 래퍼로, ApexCharts 요소를 SolidJS 구성 요소로 사용할 수 있습니다.
다음 명령을 실행하여 이러한 종속성을 설치합니다.
- npm install apexcharts solid-apexcharts
그런 다음 다음 명령으로 개발 서버를 시작합니다.
- npm run dev
다음과 유사한 출력이 표시됩니다.
Output...
vite v2.9.15 dev server running at:
> Local: http://localhost:3000/
> Network: use `--host` to expose
ready in 605ms.
이제 앱이 포트 3000에서 실행됩니다. 브라우저를 열고 URL http://localhost:3000/을 입력하여 SolidJS 시작 페이지에 액세스합니다.
참고: 원격 서버에서 자습서를 따르는 경우 포트 전달을 사용하여 브라우저에서 앱을 테스트할 수 있습니다.
개발 서버가 계속 실행되는 동안 로컬 컴퓨터에서 다른 터미널을 열고 다음 명령을 입력합니다.
- ssh -L 3000:localhost:3000 your_non_root_user@your_server_ip
서버에 연결되면 로컬 컴퓨터의 웹 브라우저에서 http://localhost:3000으로 이동합니다. 이 자습서의 나머지 부분에서는 두 번째 터미널을 열어 둡니다.
모든 종속성을 설치하고 나면 API에서 데이터를 가져올 수 있습니다.
2단계 - API에서 데이터 검색
이 단계에서는 Fetch API를 사용하여 OpenWeatherMap에서 데이터를 검색합니다. 특정 위치의 위도를 사용하고 차트의 변화를 표시합니다.
원하는 편집기에서 src 폴더에 있는 App.jsx 파일을 엽니다. 이 자습서에서는 명령줄 편집기 nano를 사용합니다.
- nano src/App.jsx
참고: 1단계에서 TypeScript 템플릿을 사용한 경우 .jsx 파일을 사용하지 않습니다. 대신 자습서 전체에서 모든 .jsx 파일에 대해 .tsx 파일을 엽니다.
여기서는 API에서 데이터를 검색하고 차트를 렌더링할 수 있도록 다른 구성 요소에 제공합니다.
먼저 템플릿 파일에 자동으로 생성된 정보를 모두 삭제합니다.
다음으로 다음 줄을 추가하여 solid-js에서 createEffect를 가져옵니다.
import { createEffect } from "solid-js";
이제 함수가 API를 호출하는 효과를 생성합니다. 파일에 다음 줄을 추가합니다.
...
createEffect(() => {
const fetchData = async () => {
const res = await fetch("http://api.openweathermap.org/geo/1.0/direct?q=London&limit=5&appid=2c36818bb5ca9e829313dd736fd15859");
const data = await res.json();
};
fetchData()
});
fetchData라는 비동기 함수는 Fetch API를 사용하여 OpenWeatherMap API를 쿼리합니다. 이 함수는 createEffect에서 fetchData가 호출되기 때문에 App 구성 요소가 마운트되자마자 실행됩니다. OpenWeatherMap API는 일반적으로 날씨 개체의 배열을 반환합니다. 여기에서는 5의 제한이 사용 중입니다. 데이터에서 name 및 lat는 사용할 유일한 엔터티입니다(API 호출에서 쿼리는 London이고 API 키는 appid=로 식별되는 문자열입니다.
fetchData는 비동기 함수이므로 응답을 대기해야 합니다. 응답은 가능한 경우 res 변수에 저장됩니다. 서버가 데이터를 수신하면 .json() 함수를 사용하여 응답을 JSON으로 변환하고 data 변수에 저장합니다.
데이터를 검색한 후 다음 작업은 신호에 저장하고 내보내는 것입니다.
여전히 src/App.jsx에서 solid-js에서 createSignal을 가져옵니다. 이렇게 하려면 강조 표시된 텍스트를 추가하여 초기 가져오기를 업데이트합니다.
import { createSignal, createEffect } from "solid-js";
...
그런 다음 강조 표시된 텍스트를 추가하여 가져오기 문 바로 뒤에 차트 데이터에 대한 Signal 변수를 만듭니다.
import { createSignal, createEffect } from 'solid-js';
const [chartData, setChartData] = createSignal({});
...
Solid에서 신호는 반응성의 기초입니다. 여기에는 동적 값이 포함되므로 Signal의 값을 수정하면 이에 의존하는 모든 항목이 자동으로 업데이트됩니다.
초기 값은 Signal을 생성하기 위해 주어진 매개 변수이며 두 가지 기능(getter 및 setter)이 있는 배열이 반환 값입니다. 첫 번째 반환 값은 값 자체가 아니라 현재 값을 반환하는 함수인 getter입니다. 적절하게 업데이트하려면 라이브러리에서 해당 신호를 읽는 위치를 추적해야 합니다. 이 자습서에서 chartData는 getter이고 setChartData는 setter입니다. Signal은 빈 개체로 초기화됩니다.
ApexCharts에서는 옵션을 지정해야 합니다. 이 자습서에서는 data 및 categories 배열을 추가하는 xaxis 옵션을 지정합니다.
이를 위해 map() 메서드를 사용하여 API에서 반환된 값의 배열을 빌드합니다. map() 메서드는 각 배열 요소에 대한 함수를 호출하여 결과를 새 배열로 반환합니다. fetchData async 함수 내에 강조 표시된 줄을 추가합니다.
...
createEffect(() => {
const fetchData = async () => {
const res = await fetch("http://api.openweathermap.org/geo/1.0/direct?q=London&limit=5&appid=2c36818bb5ca9e829313dd736fd15859");
const data = await res.json();
setChartData({
series: [
{
name: 'Latitudes in London',
data: data.map((d) => (d.lat))
}
],
xaxis: {
categories: data.map((d) => (d.name))
}
});
};
fetchData()
});
setter 함수 setChartData 내에서 Apexcharts의 series 및 xaxis에 대한 값을 지정합니다.
series 배열에서 name 및 data 속성에 대한 값을 지정합니다. map()을 사용하여 서버에서 반환된 데이터를 반복하고 lat로 표시된 위도 값을 전달합니다. 각 차트의 값이 됩니다.
xaxis 개체는 map() 메서드를 사용하여 data를 반복하여 설정되는 categories 속성을 예상합니다. name의 값을 전달합니다. 이 값은 각 차트의 도시 이름을 나타냅니다.
API의 차트 매개변수 및 데이터로 chartData를 업데이트한 후에는 스타일을 지정하고 내보내야 합니다. 강조 표시된 줄을 파일에 추가합니다.
import { createSignal, createEffect } from "solid-js";
import styles from './App.module.css';
const [chartData, setChartData] = createSignal({});
createEffect(() => {
const fetchData = async () => {
const res = await fetch("http://api.openweathermap.org/geo/1.0/direct?q=London&limit=5&appid=2c36818bb5ca9e829313dd736fd15859")
const data = await res.json();
setChartData({
series: [
{
name: 'Latitudes in London',
data: data.map((d) => (d.lat))
}
],
xaxis: {
categories: data.map((d) => (d.name))
}
});
}
fetchData()
});
function App() {
return (
<^>
<div class={styles.App}>
<h2>Using ApexCharts.js to create charts in SolidJS</h2>
<h3>Bar Chart</h3>
</div>
<^>
);
}
export { chartData }
export default App;
먼저 반환 섹션에서 사용할 스타일을 가져옵니다.
그런 다음 App() 함수에 대한 반환을 정의하여 응용 프로그램을 실행할 때 차트의 제목을 만듭니다. styles를 호출하여 두 개의 헤더를 생성합니다.
SolidJS의 신호는 다른 구성 요소에서 내보내고 사용할 수 있으므로 파일 끝 부분에서 chartData도 내보냅니다.
파일을 저장하고 닫습니다.
신호를 내보냈으므로 이제 차트 구성 요소를 만들어 소비하고 표시할 수 있습니다.
3단계 - API의 데이터로 차트 만들기
이 단계에서는 차트 구성 요소를 만들고 API의 데이터를 사용하여 차트를 표시합니다.
src 폴더에서 components 폴더를 만듭니다.
- mkdir src/components
그런 다음 새 Charts.jsx 파일을 추가합니다.
- nano src/components/Charts.jsx
새 Charts.jsx 파일에서 SolidApexCharts 및 chartData를 가져옵니다.
import { SolidApexCharts } from 'solid-apexcharts';
import { chartData } from '../App';
이제 다음 줄을 추가하여 차트 함수를 만듭니다.
function Charts() {
return (
<SolidApexCharts width="1200" type="bar" options={chartData()} />
);
};
export default Charts;
차트 기능은 이전에 설정한 chartData 변수의 정보를 사용하여 1200 픽셀인 막대 차트를 생성합니다. 넓은. options의 값으로 chartData를 전달하고 SolidApexCharts 구성 요소에서 차트의 너비와 유형을 설정합니다.
파일을 저장하고 닫습니다.
src/App.jsx 파일을 엽니다.
- nano src/App.jsx
이제 Charts 구성 요소를 App.jsx 파일로 가져옵니다.
import { createSignal, createEffect } from "solid-js";
import styles from './App.module.css';
import Charts from './components/Charts';
const [chartData, setChartData] = createSignal({});
function App() {
return (
<div class={styles.App}>
<h2>Using ApexCharts.js to create charts in SolidJS</h2>
<h3>Bar Chart</h3>
<Charts />
</div>
);
};
export { chartData }
export default App;
먼저 차트를 가져옵니다. 그런 다음 애플리케이션이 실행될 때 렌더링할 h3 요소 바로 아래에
파일을 저장하고 닫습니다.
브라우저에서 애플리케이션을 새로고침하면 막대형 차트가 렌더링됩니다.
DigitalOcean Community 저장소에서 이 튜토리얼에서 생성한 파일을 검토할 수도 있습니다.
결론
이 기사에서는 차트를 생성하기 위해 API에서 데이터를 가져오는 SolidJS 애플리케이션을 구축했습니다. SolidJS 애플리케이션에서 데이터 시각화를 위해 Apexcharts 및 Solid-ApexCharts를 사용했습니다. 이제 동적 데이터로 다른 종류의 차트를 만들 수 있습니다. 막대 차트에서 ApexCharts가 지원하는 다른 유형의 차트로 차트를 조정해 보십시오.
SolidJS 및 해당 기능에 대해 자세히 알아보려면 ApexCharts 설명서를 참조하십시오.