Node.js가 간단하게 도형으로 표시할 수 있는 라이브러리nodeplotlib는 사용하기 편리하기 때문이다.

입문

Node.js로 데이터를 처리할 때 도표를 표시하고 싶을 때가 있습니까?
데이터를 처리하려면 python으로 할 수 있지만 Node.js로 베이스 노드.저는 js로 하고 싶어요...
그래서 좋은 라이브러리가 있는지 찾아보았습니다nodeplotlib. GIF 이미지가 좋아서 사용해 봤습니다.

nodeplotlib는 무엇입니까?

README
Library to create top-notch plots directly within NodeJS on top of plotly.js without any front-end preparations. Inspired by matplotlib.
따라서 도표 그리기 라이브러리Plotly.js는 전단 코드가 없는 상황에서 사용할 수 있다.
Plotly.js를 사용한 적은 없지만 시각화된 라이브러리로 유명해요.실제로 외관과 기능이 모두 좋아서 사용하기 쉽다.
Python, R, Javascript, MATLAB, Julia 등 다양한 대응으로 다양한 기사를 발견했다.

plotly.js에서 인터랙티브 차트 그리기 - Qiita

[Python] Plotly 돌릴 수 있는 차트 만들기 - Qiita

Javascript에서 Plotly.js 를 사용할 때는 프런트엔드 측면에 설치해야 하지만 nodeplotlib 을 사용할 때는 프런트엔드를 준비하지 않고 Node를 수행합니다.js에서 직접 도표를 그리는 것 같습니다.

써봤어요.

시험 코드가 github 로 높아졌기 때문에 시도하고 싶은 사람은 clone만 있으면 바로 사용할 수 있다

$ git clone https://github.com/dbgso/hello-nodeplotlib.git
$ cd hello-nodeplotlib
$ yarn
$ yarn ts-node src/index.ts

나중에 안에 있는 거 봐요.

설치

yarn 또는 npm로 진입

$ yarn add nodeplotlib
# or
$ npm install nodeplotlib

실행 예제 코드

Quick start에 예시 코드가 있으니 실행해 보세요.
src/index.ts

import { plot, stack, clear, Plot } from 'nodeplotlib';

const data: Plot[] = [{
  x: [ 1, 3, 4, 6, 7],
  y: [ 2, 4, 6, 8, 9],
  type: 'scatter'
}];

stack(data);
stack(data);
stack(data);
plot();

실행

$ yarn ts-node src/index.ts

완성했습니다.동일한 차트 3개가 표시됩니다.
공식 GIF에도 있습니다. 처리가 완료되면 기본 브라우저가 열리고 차트가 표시됩니다.
코드 좀 볼게요. 쉬워요.x, y의 도표를 지정하는 데이터, type의 도표 형식을 지정합니다.
지정할 수 있는 데이터 형식은 Typescript의 유형 추리로 매우 쉽습니다.(이게 있어서 Node.js로 쓰고 싶다.)
그리기 사용stack 및 plot 방법.stack 여러 가지 방법으로 여러 개의 도표를 배열할 수 있을 것 같다.샘플에서 같은 데이터를 전달했지만 완전히 다른 데이터 형식을 사용할 수 있다.(접선도, 떡도, 막대도 등)
그나저나 stack 데이터를 plot 에게 직접 전달해도 도표를 그릴 수 있습니다.
이 경우 3번 부르면 라벨이 3개로 나뉜다.

- stack(data);
- stack(data);
- stack(data);
- plot();
+ plot(data);
+ plot(data);
+ plot(data);

데이터 양에 따라 plot 차트를 여러 개 그리면 Node입니다.js·브라우저 모두 무거워지기 때문에 두 개의 비교를 각각 배열하고 싶지 않다면stack, 세로 배열을 추천합니다.(처음에 plot만 사용하면 8개의 코어를 모두 사용하고 CPU로 100% 회전)
다른 샘플도 있는데 여기서부터Plotly.js의 사용법이라 멈췄어요.Plotly.js의 총결산 보도가 비교적 좋다.

작업 원리

왠지 예상할 수 있을 것 같은데 프론트 데스크 코드가 없으면 어떻게 하는 거예요?신경 쓰이지만 README의 Behind the scenes에 다음과 같은 구조가 기재되어 있다.
The lib launches a webserver and opens new tabs for every plot located at http://localhost:8080/plots/:id . At this address a temporary html template file, the nodeplotlib script and plotly.min.js are available. The client side js requests the plot data at http://localhost:8080/data/:id . After all pending plots are opened in a unique tab and all the data is requested, the server shuts down. If you fire another plot the server starts again provides your plot and shuts down automatically.
차트 다이어그램에만 임시 웹 서버, Plotly를 설정합니다.js의 묘사가 완성되었을 때 떨어진 것 같다.
화면 묘사를 위한 코드를 라이브러리에 가지고 있기 때문에 간단하게 사용할 수 있다.
프론트 데스크의 코드 내용은 https://github.com/ngfelixl/nodeplotlib/tree/master/src/www 에 있습니다.
참고로 브라우저를 다시 불러오면 404페이지가 됩니다. 주의하세요.다시 설치할 때 서버가 떨어졌기 때문에.

끝내다

도표를 아주 간단하게 표시할 수 있어서 정말 좋습니다.
개인적으로 너무 고마운 창고라서 끊임없이 활용하고 싶어요.