첫 그래프 그리기

배열에서 시작해 곡선을 추가하고, 갱신과 리소스 해제까지 살펴봅니다.

사이트에서 실행하는 버전 설치

새 데이터 API는 아직 정식 릴리스 전입니다. 아래 명령은 이 사이트에서 사용하는 소스 커밋을 고정합니다. 기존 v0.1.1 태그에는 이전 GPU 함수 API가 들어 있습니다. Git 설치에는 빌드된 JavaScript와 선언 파일이 포함됩니다.

사이트에서 실행하는 버전 설치Terminal

npm install https://github.com/typeshade/typeplot.git#34812c52ed860cc540f428e01399e19913cef1f8

배열 하나로 시작

페이지에 컨테이너를 만든 뒤 plot을 호출합니다. 배열 하나만 전달하면 0부터 시작하는 인덱스가 x 좌표가 됩니다. 축 범위와 색은 자동으로 결정합니다. 데이터만 그리는 앱에서는 더 작은 typeplot/data를 가져올 수 있습니다.

배열 하나로 시작example.ts

import { plot } from "typeplot";

const fig = plot([3, 1, 4, 1, 5], {
  target: "#chart",
  title: "First plot",
  xLabel: "Index",
  yLabel: "Value",
});

같은 축에 곡선 추가

Figure는 DOM을 관리하고, Axes는 범위·색 순서·상호작용을 관리합니다. 전역의 현재 그래프 상태를 추적할 필요가 없습니다. subplots는 그래프 수와 관계없이 항상 1차원 axes 배열을 반환합니다.

같은 축에 곡선 추가example.ts

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.

갱신, 저장, 해제

추가한 데이터는 복사됩니다. setData로 데이터를 교체하면 고정하지 않은 축 범위가 다시 맞춰집니다. PNG는 지정한 배율로 다시 그려 저장합니다. 뷰를 제거할 때는 반드시 destroy를 호출하십시오.

갱신, 저장, 해제example.ts

import { subplots, linspace } from "typeplot/data";

const { fig, axes: [ax] } = subplots(1, 1, { target: "#chart" });
const x = linspace(0, 10, 100);
const line = ax.plot(x, x.map(v => v * v));
ax.set({ title: "Quadratic", xLabel: "x", yLabel: "y" });
line.setData(x, x.map(v => v * v * 0.5));
ax.setXLimits(0, 5);
await fig.saveImage("quadratic.png", { pixelRatio: 2 });

// When the view unmounts:
fig.destroy();

입력 규칙과 현재 범위

데이터 API는 미리 컴파일한 TypeShade 셰이더를 WebGPU 또는 WebGL2로 실행합니다. 그리드·축·눈금 숫자·텍스트·계열을 모두 GPU에서 그립니다. 일반 JavaScript 콜백은 호스트에서 표본 데이터를 만들며 셰이더로 컴파일하지 않습니다.

x와 y의 길이는 같아야 합니다. 배열과 typed array를 지원합니다.
NaN과 무한대는 선을 끊으며, 자동 축 범위 계산에서 제외합니다.
로그 축에서는 양수가 아닌 값을 제외합니다. 고정 로그 범위는 양수여야 합니다.
숫자 좌표의 막대와 히스토그램을 지원합니다. 날짜·범주형 축과 SVG/PDF 저장은 아직 지원하지 않습니다.
개별 값에 접근해야 하는 독자를 위해 그래프 옆에 설명이나 표를 제공하십시오.

이 문서의 근거실제 런타임과 선언 파일에서 확인한 기능을 설명합니다. 34812c52ed86 ↗