[]
SpreadJS는 위치 지정 요소의 쌓는 순서를 zIndex
메서드를 사용하여 설정하고, group
메서드를 통해 모든 요소를 함께 묶을 수 있는 도형 기반 차트를 지원합니다. 이를 통해 청중이 더 쉽게 차트를 해석할 수 있도록 구성할 수 있습니다.
아래 GIF는 도형 기반 차트를 보여줍니다.
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]);
});
참고: Excel IO는 shape 기반 차트의 가져오기 및 내보내기를 지원하지만,
zIndex
,group
,connector
정보는 이 과정에서 손실됩니다.
Ask ChatGPT