§Ẏagr

Yagr는 uPlot을 기반으로 하는 고성능 HTML5 캔버스 차트 렌더러입니다. uPlot 차트에 대한 고급 기능을 제공합니다.

§기능

• 선, 영역, 막대 및 점 시각화 유형. 시리즈별 구성 가능
• 구성 가능한 범례 툴팁
• 소수점 정밀도에 대한 추가 옵션이 있는 축
• 범위 함수 및 변환을 구성할 수 있는 스케일
• 플롯 선 및 밴드. 구성 가능한 그리기 레이어
• 반응형 차트 ( ResizeObserver 필요)
• 스택형 영역/막대에 대한 고급 지원
• 구성 가능한 마커
• 라이트/다크 테마
• 데이터 정규화
• 구성 가능한 크로스헤어, 커서 마커 및 스내핑
• 타입스크립트
• 지역화
• 색상 이름에 CSS 변수 사용
• 페이지 매김 가능한 인라인 범례
• 오류 처리 및 확장된 훅
• 누락된 데이터에 대한 데이터 정렬 및 보간
• 실시간 업데이트

§문서

§빠른 시작

npm i @gravity-ui/yagr

§NPM 모듈

import Yagr from '@gravity-ui/yagr';

new Yagr(document.body, {
    timeline: [1, 2, 3, 4, 5],
    series: [
        {
            data: [1, 2, 3, 4, 5],
            color: 'red',
        },
        {
            data: [2, 3, 1, 4, 5],
            color: 'green',
        },
    ],
});

§스크립트 태그

<script src="https://unpkg.com/@gravity-ui/yagr/dist/yagr.iife.min.js"></script>
<script>
    new Yagr(document.body, {
        timeline: [1, 2, 3, 4, 5],
        series: [
            {
                data: [1, 2, 3, 4, 5],
                color: 'red',
            },
            {
                data: [2, 3, 1, 4, 5],
                color: 'green',
            },
        ],
    });
</script>

§예제

특정 기능이 필요하신가요? Yagr는 demo/examples 폴더에 유용한 예제를 제공합니다. 현재 버전으로 실행하는 방법:

1. 리포지토리를 클론합니다.
2. npm i로 종속성을 설치합니다.
3. npm run build를 실행합니다.
4. npx http-server .를 실행합니다.
5. http-server 출력에 따라 브라우저에서 예제를 엽니다.