tradingview/lightweight-charts

라이트급 차트™

[데모] [데모-URL] | 문서 | 레딧

TradingView 라이트웨이트 차트는™ 가장 작고 빠른 금융 HTML5 차트 중 하나입니다.

웹페이지에서 금융 데이터를 인터랙티브 차트로 표시하거나 정적인 이미지 차트를 인터랙티브 차트로 대체하고 싶다면 Lightweight Charts™ 라이브러리가 가장 좋은 선택입니다. 이 라이브러리는 웹페이지의 로딩 속도와 성능에 영향을 주지 않고 이를 수행할 수 있습니다. 라이브러리 크기는 정적인 이미지와 비슷하지만, 웹페이지에 수십 개의 이미지 차트가 있다면 이 라이브러리를 사용하면 웹 페이지 크기를 줄일 수 있습니다.

라이브러리는 기본 상태에서 풍부한 차트 기능을 제공하며, 맞춤형 플러그인을 만들어 기능을 확장할 수도 있습니다. 플러그인 카탈로그에서 완성된 플러그인을 찾거나, 인터랙티브 플러그인 예제와 plugin-examples/README.md를 참고해 직접 만들어보세요.

커뮤니티 회원들이 만든 관련 프로젝트는 awesome-tradingview에서 확인해 보세요.

설치 중

ES6 NPM을 통해

최신 마스터 빌드

최신 master 빌드를 출시 없이 시도하려면 (pkg.pr.new 제공):

아래의 가져오기 및 사용법은 두 가지 NPM 설치 옵션 모두에 적용됩니다:

[Demos][demo-url] | Documentation | Reddit

TradingView Lightweight Charts™ are one of the smallest and fastest financial HTML5 charts.

The Lightweight Charts™ library is the best choice for you if you want to display financial data as an interactive chart on your web page, or replace static image charts with interactive ones. It does this without affecting your web page’s loading speed and performance. The size of the library is close to static images but if you have dozens of image charts on a web page then using this library can make the size of your web page smaller.

The library provides a rich set of charting capabilities out of the box, but you can also extend its functionality by building custom plugins. Browse the plugin catalog for ready-made plugins, or see the interactive plugin examples and plugin-examples/README.md to build your own.

Take a look at awesome-tradingview for related projects created by our community members.

Installing

es6 via npm

npm install lightweight-charts

Latest master build

To try the latest master build without waiting for a release (powered by pkg.pr.new):

npm install https://pkg.pr.new/lightweight-charts@master

The import and usage below applies to both npm installation options:

import { createChart, LineSeries } from 'lightweight-charts';

const chart = createChart(document.body, { width: 400, height: 300 });
const lineSeries = chart.addSeries(LineSeries);
lineSeries.setData([
    { time: '2019-04-11', value: 80.01 },
    { time: '2019-04-12', value: 96.63 },
    { time: '2019-04-13', value: 76.64 },
    { time: '2019-04-14', value: 81.89 },
    { time: '2019-04-15', value: 74.43 },
    { time: '2019-04-16', value: 80.01 },
    { time: '2019-04-17', value: 96.63 },
    { time: '2019-04-18', value: 76.64 },
    { time: '2019-04-19', value: 81.89 },