์ค์น
RealPivot2 ํจํค์ง ์ค์น ๋ฐฉ๋ฒ๊ณผ ๋ผ์ด์ ์ค ๋ฐ ์คํ์ผ ์ ์ฉ ๋ฐฉ๋ฒ์ ์๋ดํ๋ค.
RealPivot2 ๋ชจ๋์ npm ํจํค์ง๋ก ์ค์นํ์ฌ importํด ์ฌ์ฉํ๊ฑฐ๋,
npm i realpivot2import { createControl, setLicenseKey } from 'realpivot2';
import 'realpivot2/style.css';HTML์ <script> ํ๊ทธ๋ก ์ง์ ๋ถ๋ฌ์ฌ ์๋ ์๋ค.
<script type="text/javascript" src="../lib/realpivot2.min.js"></script>
<link href="../styles/realpivot2-style.css" rel="stylesheet" />๋จ, ์ด๋ค ๋ฐฉ์์ ์ ํํ๋ RealPivot2์ ๊ธฐ๋ณธ ์คํ์ผ์ด ๋ด๊ธด CSS ํ์ผ๋ ํจ๊ป ๋ก๋ํด์ผ ํ๋ค.
RealPivot2๋ ์์ฉ ๋ผ์ด์ ์ค๋ก ๋ฐฐํฌ๋๊ธฐ ๋๋ฌธ์ ์ฐ๋ฆฌํ ํฌ์์ ์ ๊ณตํ ๋ผ์ด์ ์ค๋ฅผ ๋ณ๋๋ก ์ ์ฉํด์ผ ํ๋ค.
HTML์ ๋ผ์ด์ ์ค ์คํฌ๋ฆฝํธ๋ฅผ ํฌํจํ๋ ๊ฒฝ์ฐ:
<script type="text/javascript" src="../lib/realpivot2-lic.js"></script>๋ผ์ด์ ์ค ํ์ผ์๋ ๋ณดํต ์๋์ ๊ฐ์ด ์ ์ญ ๋ณ์๊ฐ ์ค์ ๋๋ค.
var realPivot2Lic = '......๋ผ์ด์ ์ค์ ๋ณด.....';๋ชจ๋ ๋ฒ๋ค๋ฌ ํ๊ฒฝ์์๋ setLicenseKey๋ก ๋ฑ๋กํ ์ ์๋ค.
import { setLicenseKey } from 'realpivot2';
setLicenseKey('......๋ผ์ด์ ์ค์ ๋ณด.....');ํ์๊ธฐ์ ChartยทMap ํจ๋์ ์ฌ์ฉํ๋ ค๋ฉด RealChartยทRealMap ๋ชจ๋๊ณผ ํด๋น ์คํ์ผ์ ํจ๊ป ๋ก๋ํ๊ณ , use / useAll(ReactยทVue๋ modules prop)๋ก ๋ฑ๋กํ๋ค. ํ์๊ธฐ ์์์ ์ฐ๋ ChartยทMap์ RealPivot2๊ฐ ์์ ์ ๋ผ์ด์ ์ค ํค๋ฅผ ์ ๋ฌํ๋ฏ๋ก realchart-lic.js / realmap-lic.js๋ ํ์ ์๋ค.
import * as RealChart from 'realchart';
import * as RealMap from 'realmap';
import { useAll } from 'realpivot2';
import 'realchart/realchart-style.css';
import 'realmap/realmap-style.css';
useAll({ RealChart, RealMap });<script type="text/javascript" src="../lib/realchart.js"></script>
<script type="text/javascript" src="../lib/realmap.js"></script>
<link href="../styles/realchart-style.css" rel="stylesheet" />
<link href="../styles/realmap-style.css" rel="stylesheet" />RealChartยทRealMap์ ํผ๋ฒ ํ์๊ธฐ ๋ฐ(๊ฐ ์ ํ ๋จ๋ )์์ ์ฐ๋ ค๋ฉด ํด๋น ์ ํ ๋ผ์ด์ ์ค๋ฅผ ๋ฐ๋ก ์ ์ฉํด์ผ ํ๋ค.
Excel / CSV / PDF ๋ด๋ณด๋ด๊ธฐ ์ฌ์ฉ๋ฒ์ ๋ด๋ณด๋ด๊ธฐ ํ์ด์ง๋ฅผ ์ฐธ๊ณ ํ๋ค. ReactยทVue ์ ํ๋ฆฌ์ผ์ด์ ์ ์ ์ฉ(์ฐ๋)ํ๋ ๋ฐฉ๋ฒ์ React ๊ฐ๋ฐ ๊ฐ์ด๋ยทVue ๊ฐ๋ฐ ๊ฐ์ด๋๋ฅผ ์ฐธ๊ณ ํ๋ค.