[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

도형 기반 차트 추가

SpreadJS는 위치 지정 요소의 쌓는 순서를 zIndex 메서드를 사용하여 설정하고, group 메서드를 통해 모든 요소를 함께 묶을 수 있는 도형 기반 차트를 지원합니다. 이를 통해 청중이 더 쉽게 차트를 해석할 수 있도록 구성할 수 있습니다.

아래 GIF는 도형 기반 차트를 보여줍니다.

image

HTML 파일에서 도형 기반 차트를 생성하려면 아래와 같이 스크립트 참조를 순서대로 추가해야 합니다:

<script src="scripts/gc.spread.sheets.all.0.0.0.js"></script>
<script src="scripts/plugins/gc.spread.sheets.shapes.0.0.0.js"></script>
<script src="scripts/plugins/gc.spread.sheets.charts.0.0.0.js"></script>

그러나 CommonJS 프로젝트에서는 의존성을 수동으로 처리할 필요가 없습니다. charts 패키지가 shapes 패키지를 자동으로 가져오기 때문입니다:

import "@mescius/spread-sheets-charts"

다음 코드는 차트와 기타 도형 기반 요소를 구현하는 예제입니다:

<script src="https://code.jquery.com/jquery-2.2.4.min.js" type="text/javascript"></script>
<link href="css/gc.spread.sheets.0.0.0.css" rel="stylesheet" />
<script src="scripts/gc.spread.sheets.all.0.0.0.min.js"></script>
<script src="scripts/gc.spread.sheets.shapes.0.0.0.min.js"></script>
<script src="scripts/gc.spread.sheets.charts.0.0.0.min.js"></script>
<script>
     $(document).ready(function () {
         var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
         var sheet = spread.getActiveSheet(); 
    // 차트 데이터 설정
sheet.setArray(0, 0, [
     ["", "Chrome", "FireFox", "IE", "Safari"],
     ["2020", 0.5651, 0.1734, 0.1711, 0.427],
     ["2021", 0.623, 0.1531, 0.1073, 0.464],
     ["2022", 0.636, 0.1304, 0.083, 0.589]
]);
  // 차트 추가
    let chart = sheet.charts.add('Chart1', GC.Spread.Sheets.Charts.ChartType.columnClustered, 100, 100, 500, 280, "A1:E4");

    // 도형 추가
    let shape = sheet.shapes.add('Shape1', GC.Spread.Sheets.Shapes.AutoShapeType.rectangle, 300, 50, 100, 100);

    // zIndex 메서드 적용
    sheet.shapes.zIndex('Chart1', 1);

    // group 메서드 적용
let groupShape = sheet.shapes.group([shape, chart]);
  });

Ask ChatGPT