Chart 요소

React에서 SpreadJS의 차트 기능을 사용하면, 네이티브 데이터 바인딩 지원을 통해 모든 차트 요소를 동기화하면서 애플리케이션의 데이터를 시각화할 수 있습니다.

1. React 프로젝트 생성하기

   명령 프롬프트 창을 열고 다음 명령어를 입력하세요:

       npm install -g create-react-app
       create-react-app quick-start
       cd quick-start
       npm start

   작업이 완료되면 지정한 위치에 React 프로젝트가 생성됩니다. React 프로젝트 생성 방법에 대한 자세한 내용은 https://reactjs.org/docs/create-a-new-react-app.html을 참조하세요.

2. 프로젝트에 SpreadJS React 모듈 설치하기

   다음 명령어를 사용하여 프로젝트에 @mescius/spread-sheets-react를 설치하세요:

       npm install @mescius/spread-sheets-react

3. SpreadJS CSS 임포트하기

   다음 코드를 사용하여 index.js 파일에 SpreadJS CSS를 임포트하세요:

   import '@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css';

4. 프로젝트에 Charts React 모듈 설치하기

   다음 명령어를 사용하여 프로젝트에 charts 모듈을 설치하세요:

   npm install @mescius/spread-sheets-charts

5. React 애플리케이션에서 차트 사용하기

   이제 필요에 따라 App.js 파일을 수정할 수 있습니다. 변경 사항은 브라우저 창을 새로 고침하면 반영됩니다.

   예시로 아래 샘플 코드를 사용할 수 있습니다:

   
   

   이 예제는 React 애플리케이션에서 차트를 사용하는 방법을 보여줍니다.

   import React from "react";
   import "./App.css";
   import GC from "@mescius/spread-sheets";
   import { SpreadSheets, Worksheet } from "@mescius/spread-sheets-react";
   
   // 차트 모듈 임포트하기
   import "@mescius/spread-sheets-charts";
   
   var SpreadJSKey = "xxx";
   GC.Spread.Sheets.LicenseKey = SpreadJSKey;
   
   class App extends React.Component {
     constructor(props) {
       super(props);
       this.hostStyle = {
         width: "1100px",
         height: "800px",
       };
     }
   
     // 워크북 초기화 이벤트 처리하기
     workbookInit = (spread) => {
       this.setState({
         spread: spread,
       });
       let chart_columnClustered, chart_columnStacked, chart_columnStacked100;
   
       // 시트 가져오기
       let sheetCharts = spread.getSheet(0);
   
       // 시트 이름 설정하기
       sheetCharts.name("Charts");
       sheetCharts.suspendPaint();
   
       //차트용 데이터 준비하기
       sheetCharts.setValue(0, 1, "Q1");
       sheetCharts.setValue(0, 2, "Q2");
       sheetCharts.setValue(0, 3, "Q3");
       sheetCharts.setValue(1, 0, "Mobile Phones");
       sheetCharts.setValue(2, 0, "Laptops");
       sheetCharts.setValue(3, 0, "Tablets");
       for (var r = 1; r <= 3; r++) {
         for (var c = 1; c <= 3; c++) {
           sheetCharts.setValue(r, c, parseInt(Math.random() * 100));
         }
       }
   
       // 열 클러스터형 차트 추가하기
       chart_columnClustered = sheetCharts.charts.add(
         "chart_columnClustered",
         GC.Spread.Sheets.Charts.ChartType.columnClustered,
         5,
         150,
         300,
         300,
         "A1:D4"
       );
       chart_columnClustered.title({ text: "Annual Sales" });
   
       // 열 누적형 차트 추가하기
       chart_columnStacked = sheetCharts.charts.add(
         "chart_columnStacked",
         GC.Spread.Sheets.Charts.ChartType.columnStacked,
         320,
         150,
         300,
         300,
         "A1:D4"
       );
       chart_columnStacked.title({ text: "Annual Sales" });
   
       // 열 100% 누적형 차트 추가하기
       chart_columnStacked100 = sheetCharts.charts.add(
         "chart_columnStacked100",
         GC.Spread.Sheets.Charts.ChartType.columnStacked100,
         640,
         150,
         300,
         300,
         "A1:D4"
       );
       chart_columnStacked100.title({ text: "Annual Sales" });
   
       sheetCharts.resumePaint();
     };
   
     render() {
       return (
         <div>
           <SpreadSheets
             backColor={this.spreadBackColor}
             hostStyle={this.hostStyle}
             workbookInitialized={this.workbookInit}
           >
             <Worksheet></Worksheet>
           </SpreadSheets>
         </div>
       );
     }
   }
   
   export default App;