데이터 시각화는 우리가 간과 될 수 있는 추세 및 패턴을 보여주는 데에 유용한 도구가 될 수 있습니다. 쉽게 분석 가능한 시각적 자료로 제공되는 정량적 정보가 없으면 데이터의 의미와 중요성을 이해는데 많은 시간이 소요됩니다. SpreadJS는 다양한 JavaScript 프레임 워크 내에서 작업 할 수 있는 고서능의 Excel JavaScript 스프레드시트 컴포넌트입니다. SpreadJS는 창의적이고 통찰력 있고 유연한 방식으로 데이터를 표시합니다. 

이 튜토리얼은 Vue에서 SpreadJS를 사용하여 차트를 추가하고, 가져온 스프레드시트를 변경하는 방법을 보여줍니다.

이 튜토리얼에서는 VSCode를 사용하여 프로젝트를 편집 및 실행하고 Chrome에서 프로젝트를 디버그 및 실행합니다. 이 포스팅에서는 Chrome으로 Vue 프로젝트를 디버깅하기 위해 VS 코드를 설정하는 방법을 보여줍니다.

SpreadJS Vue 설정 

다음은 SpreadJS Vue 프로젝트 설정을 위한 자습서입니다. 시작하려면 관리자 권한으로 명령 프롬프트를 열고 프로젝트 폴더를 탐색하십시오.

다음 명령을 사용하여 Vue용 Command Line 인터페이스를 설치하십시오.

    npm install -global vue-cli

Vue 프로젝트를 만들고 실행하는 데 필요한 라이브러리를 설치해야합니다. 이제 "vue init"를 사용하여 프로젝트를 만들 수 있습니다.

    vue init webpack SpreadJS-Vue-Project

그러면 프로젝트 작성이 시작되고 추가 정보를 입력하라는 메시지가 표시됩니다. 대부분의 프롬프트는 다음과 같이 "No"로 응답 할 수 있습니다.

프로젝트가 생성되면 NPM을 통해 필요한 스프레드 파일을 설치할 수 있습니다.

    npm install @grapecity/spread-sheets-vue @grapecity/spread-sheets @grapecity/spread-excelio @grapecity/spread-sheets-charts

프로젝트 설정

조직화를 위해 프로젝트의 "src"폴더에 "components"라는 별도의 폴더를 만듭니다. 이 폴더에서이 샘플의 코드를 포함 할 Vue 파일을 만듭니다 (이 경우 파일 이름은 "IncomeStatement.vue").

해당 파일과 폴더가 만들어지면 "src"폴더에서 App.vue 파일을 편집하여이 새 파일로 보낼 수 있습니다.

    <template>
      <div id="app">
        <IncomeStatement/>
      </div>
    </template>

    <script>
    import IncomeStatement from './components/IncomeStatement'

    export default {
      name: 'App',
      components: {
        IncomeStatement
      }
    }
    </script>

    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
    }
    </style>

손익 계산서 코드

이 페이지의 코드 작성을 시작하기 위해, 템플릿이 페이지의 실제 구조가될, 템플릿 및 스타일 섹션을 추가 할 수 있습니다. 스타일은 해당 템플릿의 섹션 스타일이됩니다.

    <template>
      <div class="financialKPI">
        <gc-spread-sheets :hostClass='hostClass' @workbookInitialized='spreadInitHandle'>
        </gc-spread-sheets>
        <input type="file" class="fileSelect" @change='fileChange($event)' />
      </div>
    </template>

    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
      .spread-host {
        width: 100%;
        height: 500px;
        border: 1px solid lightgray;
      }

      .fileSelect {
        width: 100%;
        margin-top: 20px;
      }
    </style>

다음 단계는 이 샘플의 모든 코드를 작성할 스크립트 태그를 추가하는 것입니다. NPM을 통해 프로젝트에 설치 한 CSS 및 스크립트 파일을 가져오고 라이센스 키를 설정하여 시작하겠습니다.

    <script>
      import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css'

      import '@grapecity/spread-sheets-vue'
      import * as GC from '@grapecity/spread-sheets'
      import Excel from '@grapecity/spread-excelio'
      import Charts from '@grapecity/spread-sheets-charts'

      GC.Spread.Sheets.LicenseKey = <YOUR LICENSE KEY HERE>;
    </script>

다음으로 컴포넌트를 로컬로 등록합니다 :

    export default {
      name: 'IncomeStatement',
      data () {
        return {
          hostClass : 'spread-host'
        }
      }
    }

데이터 섹션 뒤에, SpreadJS를 초기화하는 "spreadInitHandle"함수와 "fileChange"를 정의 할 "methods"섹션을 추가 할 수 있습니다. 코드는 다음과 같습니다.

    methods: {
      spreadInitHandle: function (spread) {
        this._spread = spread;
      },
      fileChange: function (e) {
        if (this._spread) {
          let fileDom = e.target || e.srcElement;
          let excelIO = new Excel.IO();
          let spread = this._spread;
        }
      }
    }

함수에서 Spread가 초기화되면, 사용자가 "fileChange"함수에서 Spread로 불러올 파일을 선택할 때 코드를 실행할 수 있습니다. 나중에 쉽게 액세스할 수 있도록 몇 가지 변수를 설정 한 다음, ExcelIO 열기 기능을 사용하여 Excel 파일을 SpreadJS에 로드합니다.

    excelIO.open(fileDom.files[0], (data) => {
      spread.fromJSON(data);
      let sheet = spread.getSheet(1);
    })

사용중인 Excel 파일에서 데이터 아래에 차트를 표시하고 싶지만 데이터가 많은 화면 공간을 차지하므로 다음과 같이 몇 개의 행을 그룹화하고 축소합니다.

    sheet.rowOutlines.group(14, 2);
    sheet.rowOutlines.group(20, 6);
    sheet.rowOutlines.group(30, 3);
    sheet.rowOutlines.expand(0, false);

    sheet.addRows(38, 20);

이제 차트를 추가 할 준비가 되었으므로 시트의 수익 영역에 대한 전체 데이터 영역을 참조할 수 있습니다.

<pre> <code="language-javascript">var chart = sheet.charts.add('RevenueChart', GC.Spread.Sheets.Charts.ChartType.columnClustered, 15, 600, 1600, 400, "E8:P12", GC.Spread.Sheets.Charts.RowCol.rows);</code="language-javascript"> </pre>

차트 제목을 빠르게 설정합니다.

    var title = chart.title();
    title.text = "Revenue";
    title.fontFamily = "Cambria";
    title.fontSize = 28;
    title.color = "#696969";
    chart.title(title);

차트 작성의 마지막 작업은 차트에서 시리즈의 이름을 정의하는 것입니다. 셀 참조를 통해 시트 자체에서 가져옵니다. 이 경우 선택한 데이터에 빈 행이있어 차트에 포함하지 않아도 되므로 해당 시리즈를 제거 할 수 있습니다.

    var series = chart.series();
    series.remove(0);
    var productSeries = series.get(0);
    productSeries.name = "Sheet1!$B$10";
    var servicesSeries = series.get(1);
    servicesSeries.name = "Sheet1!$B$11";
    var otherSeries = series.get(2);
    otherSeries.name = "Sheet1!$B$12";
    chart.series().set(0, productSeries);
    chart.series().set(1, servicesSeries);
    chart.series().set(2, otherSeries);

Vue 응용 프로그램에서 Spread.Sheets를 사용하는 간단한 사용 사례이지만이 JavaScript 스프레드시트 컴포넌트를 사용하면 훨씬 더 많은 작업을 수행 할 수 있습니다. Spread.Sheets Vue 패키지를 추가하면 Vue앱에 Spread.Sheets를 쉽게 추가 할 수 있습니다.

샘플 다운로드