Pre loader

SciChart JS v4 시작하기

SciChart의 자바스크립트 차트를 무료로 시작하는 데 필요한 모든 것을 아래에서 확인할 수 있습니다.

  • SciChart.js를 다운로드할 수 있는 곳
  • SciChart.js 사용 방법
  • SciChart.js에 대해 자세히 알아보기
Platform icon
Platform icon
Platform icon
Platform icon
Platform icon

새로운 사용자이신가요?

SciChart.js를 무료로 시작해보세요

SciChart.js의 무료 커뮤니티 에디션을 사용하면 다음을 얻을 수 있습니다.

  • 비상업적 용도 무제한
  • 기능 제한이 없는 워터마크가 있는 차트
  • 30일 동안 무료로 상업적으로 사용 가능
  • 기술 지원을 이용하고 워터마크를 제거하려면 유료 요금제로 업그레이드하세요.

전체 이용 약관 및 권한은 아래 T&C를 참조하세요.

커뮤니티 에디션 약관

시작하기 리소스

이 페이지에는 시작하는 데 도움이 되는 몇 가지 리소스가 있습니다. 아래에는 다음이 있습니다.

SciChart.js를 구할 수 있는 곳

CDN에서 SciChart.js 가져오기

scichart 라이브러리는 jsdelivr.com/package/npm/scichart에서 다운로드할 수 있습니다.

다음 스크립트를 HTML 페이지에 삽입하기만 하면 됩니다:

<script src="https://cdn.jsdelivr.net/npm/scichart@4/index.min.js" crossorigin="anonymous"></script>

사용법에 대한 자세한 내용은 아래에 나와 있습니다.

NPM에서 SciChart.js 받기

또한 저희는 SciChart.js를 다음 주소에서 호스팅하고 있습니다. NPM

npm install scichart

그 후에는 SciChart.js 사용을 시작하기 위해 아래의 튜토리얼이나 기본 템플릿을 읽어보시기를 권장합니다.

방문하기 NPM

SciChart.js 뉴스레터에 가입하세요

월별 이메일을 통해 전문가의 통찰력과 영감을 받아 데이트를 최대한 활용하세요.

릴리스 업데이트, 팁과 요령, 새로운 기능을 받은 편지함으로 직접 받아보세요!

SciChart.js를 사용하는 방법

React, Angular, Vue, Svelte, Electron 등을 빠르게 시작하는 데 도움이 되는 다양한 튜토리얼과 상용구를 준비했습니다. 아래 상용구를 사용해 보거나 npm install scichart를 설치하여 나만의 것을 만들어보세요. 더 많은 자습서를 찾고 GitHub.

그냥 자바스크립트

React

각도가 있는

Electron

순수 JavaScript에서 SciChart.js 사용

튜토리얼코드펜으로 편집

순수한 JavaScript 환경(npm, webpack, TypeScript 미사용)에서 SciChart.js를 사용하려면 다음 단계를 따르십시오.

참고: npm 및 webpack 사용을 권장합니다. 왼쪽 탭에 있는 다른 예제도 확인해 주십시오.

단계 1: 앱 내에서 index.min.js 참조하기

HTML 페이지에 scichart.js를 불러오는 스크립트를 추가합니다. 예:

<!-- 최신 버전을 참조합니다. 프로덕션 환경에서는 권장하지 않습니다! -->
<script src="https://cdn.jsdelivr.net/npm/scichart/index.min.js" crossorigin="anonymous"></script>

또는,

<!-- 특정 버전을 참조합니다. 프로덕션 환경에서의 사용을 권장 -->
<script src="https://cdn.jsdelivr.net/npm/scichart@4.0/index.min.js" crossorigin="anonymous">
</script>

2단계: SciChart.js의 타입 가져오기

내보내진 모든 타입은 SciChart 변수에 저장되어 있습니다. 필요한 타입을 가져오려면 다음 코드를 사용합니다:

// 필요한 타입을 가져옵니다. 나중에 추가할 수도 있습니다
const { 
    SciChartSurface,
    NumericAxis,
    FastLineRenderableSeries,
    XyDataSeries,
    EllipsePointMarker,
    SweepAnimation,
    SciChartJsNavyTheme,
    NumberRange,
    MouseWheelZoomModifier,
    ZoomPanModifier,
    ZoomExtentsModifier
} = SciChart;

3단계: 차트 만들기

이제 SciChart를 사용할 준비가 되었습니다! 다음과 같은 코드로 첫 번째 차트를 만들어 봅시다:

const initSciChart = async () => {

  // SciChartSurface를 초기화합니다. await를 잊지 마세요!
  const { sciChartSurface, wasmContext } = await SciChartSurface.create("scichart-root", {
    theme: new SciChartJsNavyTheme(),
    title: "SciChart.js First Chart",
    titleStyle: { fontSize: 22 }
  });

  // growBy 패딩을 사용한 XAxis와 YAxis 생성
  const growBy = new NumberRange(0.1, 0.1);
  sciChartSurface.xAxes.add(new NumericAxis(wasmContext, { axisTitle: "X Axis", growBy }));
  sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { axisTitle: "Y Axis", growBy }));

  // 초기 데이터를 포함한 선 그래프 시리즈 생성
  sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, {
    stroke: "steelblue",
    strokeThickness: 3,
    dataSeries: new XyDataSeries(wasmContext, {
      xValues: [0,1,2,3,4,5,6,7,8,9],
      yValues: [0, 0.0998, 0.1986, 0.2955, 0.3894, 0.4794, 0.5646, 0.6442, 0.7173, 0.7833]
    }),
    pointMarker: new EllipsePointMarker(wasmContext, { width: 11, height: 11, fill: "#fff" }),
    animation: new SweepAnimation({ duration: 300, fadeEffect: true })
  }));

  // 확대/축소 및 이동 기능을 표시하기 위한 상호작용 수정자 추가
  sciChartSurface.chartModifiers.add(
    new MouseWheelZoomModifier(), 
    new ZoomPanModifier(), 
    new ZoomExtentsModifier()
  );
};

initSciChart();

이것이 표시되어야 합니다!

기본적으로 index.min.js가 로드되면 SciChart는 SciChartSurface.useWasmFromCDN()를 호출하여 CDN에서 WebAssembly 파일을 로드합니다. 로컬 배포를 포함한 기타 옵션은 여기에서 확인하세요.

Codepen에서 편집하기질문이 있으신가요?

SciChart.js React 보일러 플레이트

GitHub튜토리얼

npm과 webpack을 사용하는 React 앱에서 SciChart.js를 활용하려면 공식 scichart-react 라이브러리를 사용하는 것을 권장합니다.

1단계: SciChart.js와 scichart-react 설치하기

아직 설치하지 않았다면, React 애플리케이션에 SciChart.js와 scichart-react를 추가해 주세요.

npm install scichart
npm install scichart-react

2단계: Wasm 파일 배포

SciChart.js는 WebAssembly 파일을 사용하므로, 이를 배포해야 합니다. 가장 간단한 방법은 node_modules/scichart/_wasm 폴더에서 출력 폴더로 wasm 파일을 복사하는 것입니다.

예: webpack.config.js를 사용하는 경우:

 plugins: [
    new CopyPlugin({
      patterns: [
        { from: "src/index.html", to: "" },
        { from: "node_modules/scichart/_wasm/scichart2d.wasm", to: "" },
        // 3D 차트를 사용하는 경우의 옵션
        { from: "node_modules/scichart/_wasm/scichart3d.wasm", to: "" },
      ],
    })
  ],

참고: 도입을 간소화하기 위해,  CDN에서 wasm을 불러오는 다른 방법도 이용할 수 있습니다

3단계: 차트 생성

그 후, 다음과 같이 SciChartSurface를 생성하는 함수를 만들 수 있습니다.

import {
  SciChartSurface,
  NumericAxis,
  FastLineRenderableSeries,
  XyDataSeries,
  EllipsePointMarker,
  SweepAnimation,
  SciChartJsNavyTheme,
  NumberRange
} from "scichart";

async function initSciChart() {
  // SciChartSurface를 초기화합니다. await를 잊지 마세요!
  const { sciChartSurface, wasmContext } = await SciChartSurface.create("scichart-root", {
    theme: new SciChartJsNavyTheme(),
    title: "SciChart.js First Chart",
    titleStyle: { fontSize: 22 }
  });

  // growBy 패딩을 사용한 XAxis와 YAxis 생성
  const growBy = new NumberRange(0.1, 0.1);
  sciChartSurface.xAxes.add(new NumericAxis(wasmContext, { axisTitle: "X Axis", growBy }));
  sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { axisTitle: "Y Axis", growBy }));

  // 초기 데이터를 포함한 선 그래프 시리즈 생성
  sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, {
    stroke: "steelblue",
    strokeThickness: 3,
    dataSeries: new XyDataSeries(wasmContext, {
      xValues: [0,1,2,3,4,5,6,7,8,9],
      yValues: [0, 0.0998, 0.1986, 0.2955, 0.3894, 0.4794, 0.5646, 0.6442, 0.7173, 0.7833]
    }),
    pointMarker: new EllipsePointMarker(wasmContext, { width: 11, height: 11, fill: "#fff" }),
    animation: new SweepAnimation({ duration: 300, fadeEffect: true })
  }));

  return { sciChartSurface };
}

4단계: React 컴포넌트 생성

차트는 SciChartReact 컴포넌트를 사용하여 초기화할 수 있습니다. 이를 통해 언마운트 시 제거를 포함한 컴포넌트의 전체 라이프사이클이 처리됩니다.

function App() {
  return (
    <div className="App">
      <SciChartReact initChart={initSciChart} 
          onInit={(initResult) => console.log(initResult.sciChartSurface.id + `가 생성되었습니다`);
          onDelete={(initResult) => console.log(initResult.sciChartSurface.id + `가 삭제되었습니다`);
          style={{ maxWidth: 900 }} />
    </div>
  );
}

예제 동작 확인

더 자세히 알아보려면 Github에서 전체 예제를 확인하세요.

기타 사용 예시는 다음을 참조하십시오:

npm install
npm start

GitHub에서 열기

SciChart.js 각도 스테레오타입

GitHub

npm을 사용하여 Angular 앱에서 SciChart.js를 사용하려면 공식 래퍼인 SciChart.Angular를 사용할 수 있습니다.

다음 단계를 수행하세요:

1단계: SciChart.js 및 SciChart.Angular 설치

아직 설치하지 않았다면, Angular 애플리케이션에 SciChart.js와 SciChart.Angular를 추가하세요.

npm install scichart scichart-angular

2단계: Wasm 파일 배포

SciChart.js는 런타임 종속성으로 WebAssembly 파일을 사용하며, 이 파일들은 CDN이나 자체 서버에서 비동기적으로 가져와야 합니다.

CDN 방식

해당 파일을 CDN에서 가져오도록 지정하는 가장 쉬운 방법은 다음과 같습니다:

import { SciChartSurface, SciChart3DSurface } from "scichart";
// ...
SciChartSurface.loadWasmFromCDN();
SciChart3DSurface.loadWasmFromCDN();

(optional) Self-hosting Approach

Alternatively, the more robust method for production is to serve the WASM dependencies from your own server.

In Angular, do this: copy the wasm files from the node_modules/scichart/_wasm folder to your output folder. For Angular version 20 this can be done by modifying angular.json file

"assets": [
  // ...
  {
    "glob": "scichart2d.wasm",
    "input": "node_modules/scichart/_wasm",
    "output": "/"
  },
  {
    "glob": "scichart3d.wasm",
    "input": "node_modules/scichart/_wasm",
    "output": "/"
  }
],

Note: other methods to load wasm from CDN are available to simplify getting started

Step 3: Initialising the Chart

There are two ways to set up a chart with `SciChartAngular`.
The component requires one of `[config]` or `[initChart]` properties to create a chart.

Config Approach

HTML:

  <div class="chart-wrapper" style="width: 600px; height: 300px;">
    <scichart-angular [config]="config"></scichart-angular>
  </div> TS:
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { ScichartAngularComponent } from 'scichart-angular';

@Component({
  selector: 'app-basic-chart-config',
  standalone: true,
  imports: [CommonModule, FormsModule, ScichartAngularComponent],
  templateUrl: './basic-chart-config.component.html',
  styleUrl: './basic-chart-config.component.css'
})
export class BasicChartConfigComponent {
  config = {
    // ...
  };
}

InitChart Function Approach

Create a function which initialises a SciChartSurface like this:

HTML:

  <div class="chart-wrapper" style="width: 600px; height: 300px;">
    <scichart-angular [initChart]="drawBasicChart"></scichart-angular>
  </div> TS:
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { ScichartAngularComponent } from 'scichart-angular';
import { NumericAxis, SciChartSurface } from 'scichart';

@Component({
  selector: 'app-basic-chart-init',
  standalone: true,
  imports: [CommonModule, FormsModule, ScichartAngularComponent],
  templateUrl: './basic-chart-init.component.html',
  styleUrl: './basic-chart-init.component.css',
})
export class BasicChartInitComponent {
  public drawBasicChart = async (rootElement: string | HTMLDivElement) => {
    const { wasmContext, sciChartSurface } = await SciChartSurface.create(rootElement);

    sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
    sciChartSurface.yAxes.add(new NumericAxis(wasmContext));

    // ...

    return { sciChartSurface };
  };
}

Running the example

Get the full example on GitHub to explore further and find examples of 3D charts setup.

npm install
npm start

Open On GitHub

 

Using SciChart.js without SciChart.Angular

Suppose you want to avoid using SciChart.Angular, consider creating your own wrapper.
Here are some tips:

SciChart.js 전자 보일러 플레이트

GitHub

npm과 webpack을 사용하여 Electron에서 SciChart.js를 사용하려면 다음 단계를 따르세요:

1단계: SciChart.js 설치

아직 설치하지 않았다면 React 애플리케이션에 SciChart.js를 추가하세요.

npm install scichart

2단계: Wasm 파일 배치

SciChart.js는 WebAssembly 파일을 사용하므로, 이를 배포해야 합니다. 가장 간단한 방법은 node_modules/scichart/_wasm 폴더에서 출력 폴더로 wasm 파일을 복사하는 것입니다.

예: webpack.config.js를 사용하는 경우:

 plugins: [
    new CopyPlugin({
      patterns: [
        { from: "src/index.html", to: "" },
        { from: "node_modules/scichart/_wasm/scichart2d.wasm", to: "" },
      ],
    })
  ],

참고: 시작을 간편하게 하기 위해,  CDN에서 wasm을 불러오는 다른 방법도 이용할 수 있습니다

3단계: 차트 생성

그 후, 다음과 같이 SciChartSurface를 생성하는 함수를 만들 수 있습니다.

import {
  SciChartSurface,
  NumericAxis,
  FastLineRenderableSeries,
  XyDataSeries,
  EllipsePointMarker,
  SweepAnimation,
  SciChartJsNavyTheme,
  NumberRange
} from "scichart";

async function initSciChart() {
  // SciChartSurface를 초기화합니다. await를 잊지 마세요!
  const { sciChartSurface, wasmContext } = await SciChartSurface.create("scichart-root", {
    theme: new SciChartJsNavyTheme(),
    title: "SciChart.js First Chart",
    titleStyle: { fontSize: 22 }
  });

  // growBy 패딩을 사용한 XAxis와 YAxis 생성
  const growBy = new NumberRange(0.1, 0.1);
  sciChartSurface.xAxes.add(new NumericAxis(wasmContext, { axisTitle: "X Axis", growBy }));
  sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { axisTitle: "Y Axis", growBy }));

  // 초기 데이터를 포함한 선 그래프 시리즈 생성
  sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, {
    stroke: "steelblue",
    strokeThickness: 3,
    dataSeries: new XyDataSeries(wasmContext, {
      xValues: [0,1,2,3,4,5,6,7,8,9],
      yValues: [0, 0.0998, 0.1986, 0.2955, 0.3894, 0.4794, 0.5646, 0.6442, 0.7173, 0.7833]
    }),
    pointMarker: new EllipsePointMarker(wasmContext, { width: 11, height: 11, fill: "#fff" }),
    animation: new SweepAnimation({ duration: 300, fadeEffect: true })
  }));

  return sciChartSurface;
}

initSciChart();

샘플 실행하기

더 자세히 알아보려면 GitHub에서 전체 샘플을 확인하세요.

npm install
npm start

GitHub에서 열기

SciChart.js에 대해 자세히 알아보기

시작에 도움이 되는 추가 리소스

SciChart 데모, 광범위한 문서, 포럼 등 다음 리소스를 참조하세요.

문서

SciChart.js는 필기 페이지가 수백 페이지에 이르는 다양한 문서를 제공합니다.

모든 문서

데모

scichart.com/demo 에서 100 곳의 라이브 데모와 쇼케이스를 볼 수 있습니다.

데모 홈

포럼

SciChart 포럼 또는 Stack Overflow에 질문을 게시하세요.

SciChart 포럼

스토어

라이선스를 구입하여 워터마크와 시간 제한을 해제하세요.

라이센스 구매

지원

판매 전 기술 지원이 필요하십니까? 판매 자격에 따라 도움을 드리겠습니다.

영업 담당자에게 문의

내 계정

상업용 라이선스를 구입하고 활성화 방법을 알고 싶다면 :

내 계정

기술 지원이 필요하십니까?

기술 지원이 필요하거나 질문이 있으십니까? 당사의 기술 영업팀에 문의하십시오. 기꺼이 도와 드리겠습니다.

기술 판매에 문의

이미 상업용 라이센스가 있나요?

상업용 라이센스를 이미 구입했고 활성화 방법을 알고 싶다면 다음 단계를 따르세요.

1. 개발자 라이센스를 활성화하고 워터마크 삭제
2. 지원 데스크에서 지원 티켓 열기
3. 라이센스 키에 도메인을 추가하고 배포합니다.

라이선스 활성화 지금 구매