내보내기
현재 표시 중인 차트를 PNG, JPG 또는 SVG 벡터 이미지로 다운로드할 수 있다. 내보내기를 활성화하려면 export 모듈을 포함해야 한다. 모듈이 활성화되면 아래 이미지처럼 우측 상단에 내보내기 메뉴 버튼이 표시된다.
Try Export
설치
realchart-export 모듈은 npm package (opens in a new tab)로 설치한 후 import 하거나,
npm install realchart-exportimport { RealchartExport } from "realchart-export";
import "realchart-export/dist/realchart-export.css";우리테크 사이트 (opens in a new tab)에서 내려 받아 html에서 직접 include할 수 있다.
<link href="./styles/realchart-export.css" rel="stylesheet">
<script src = "./lib/realchart-export/index.js">설정
차트 설정의 최상위 export 항목으로 설정한다.
const config = {
export: {
useLibrary: true,
menus: ['png', 'jpeg', 'svg'],
hideScrollbar: true,
hideNavigator: true,
hideZoomButton: true,
...
}
};API
차트의 메뉴를 클릭하는 대신 API를 호출해서 직접 내보내기할 수도 있다.
chart.export({
type: 'png',
fileName: 'realchart'
});import { createChart } from "realchart";
import { RealchartExport } from "realchart-export";
import "realchart/dist/realchart-style.css";
import "realchart-export/dist/realchart-export.css";
const chart = createChart(document, id, config);
RealchartExport(chart);
chart.export({
type: 'png',
fileName: 'realchart'
});