전달
배열, typed array, JavaScript 함수를 바로 사용합니다. 첫 그래프의 범위와 색은 자동으로 결정합니다.
plot(x, y)TypeScript를 위한 그래프 라이브러리
데이터를 코드로.
그래프를 브라우저로.
배열과 함수를 전달하면 축과 곡선이 나타납니다. 여러 그래프를 구성하고, 뷰를 조절하고, 결과를 저장하십시오.
데이터 API는 릴리스 전입니다. 가이드에서 이 사이트와 같은 소스 버전을 설치할 수 있습니다.
import { subplots, linspace } from "typeplot";
const { fig, axes: [ax] } = subplots();
const x = linspace(0, 2 * Math.PI, 200);
ax.plot(x, Math.sin, { label: "Sine" });
ax.plot(x, Math.cos, { label: "Cosine", lineStyle: "--" });
ax.set({ xLabel: "Angle (radians)", yLabel: "Amplitude" });
ax.grid();
ax.legend();
// Call fig.destroy() when the view unmounts.실제 TypePlot · TypeShade · 사인과 코사인, x = 0…2π, 진폭 −1…1
데이터에서 Figure까지
작게 시작하고, 필요한 만큼 구성합니다.
구성
같은 축에 계열을 추가하거나 서브플롯으로 나눕니다. 제목, 범례, 로그 축을 설정합니다.
subplots(2, 2)탐색과 저장
마우스와 키보드로 뷰를 조절합니다. 새 데이터로 갱신하고 PNG로 내보냅니다.
await fig.saveImage("plot.png")다음 단계
그림을 보고, 코드를 읽고, 직접 바꿔봅니다.
작은 실행 예제에서 시작해 가이드, API 참조, 전체 소스로 이어갑니다.
TypeShade + TypePlot
함수는 GPU에서도 그립니다.
이름 있는 TypeShade 콜백을 빌드 때 컴파일하고, WebGPU와 WebGL2로 스칼라 함수와 공간 곡선을 표시합니다. 데이터 그래프도 같은 TypeShade 렌더링 기반을 사용합니다.