데이터 차트 생성하기
데이터 차트를 생성하려면 아래 단계를 따르시기 바랍니다:
데이터 차트를 사용하기 위해 다음 CSS 및 스크립트 파일을 추가합니다.
<link href="css/gc.spread.sheets.x.x.x.css" rel="stylesheet" />
<script src="scripts/gc.spread.sheets.all.x.x.x.min.js"></script>
<script src="scripts/gc.spread.sheets.shapes.x.x.x.min.js"></script>
<script src="scripts/gc.spread.sheets.datacharts.x.x.x.min.js"></script>window.onload이벤트에서 async로 표시된 함수를 실행합니다. 그런 다음 SpreadJS 환경에서 spread 인스턴스를 만들고 시트를 가져와 데이터 차트를 추가합니다.
let spread = new GC.Spread.Sheets.Workbook("spreadjs-host");
const sheet = spread.getActiveSheet();dataManager메서드를 사용하여 데이터 매니저 인스턴스를 초기화합니다.
const dataManager = spread.dataManager();데이터 매니저에 테이블을 만들고
fetch()메서드를 사용하여 지정된 소스에서 데이터를 가져옵니다.await를 사용하여 데이터가 완전히 로드될 때까지 코드 실행을 일시 중지해야 합니다.await는 async 함수 내에서만 유효합니다.
const salesTable = createSalesTable(dataManager);
await salesTable.fetch();테이블에 데이터를 추가하는 함수를 생성합니다.
function createSalesTable (dataManager) {
const records = [
['2021', 'East', 'SunLin', 'Drinks', 'Apple Juice', 140, 9],
['2021', 'East', 'JinShiPeng', 'Drinks', 'Apple Juice', 290, 17],
['2021', 'East', 'ZhangShang', 'Drinks', 'Apple Juice', 300, 28],
['2021', 'East', 'SunYang', 'Drinks', 'Apple Juice', 120, 10],
['2021', 'East', 'YuanChengJie', 'Drinks', 'Apple Juice', 220, 15],
['2021', 'North', 'ZhangYing', 'Drinks', 'Apple Juice', 250.0, 23],
['2021', 'North', 'WangWei', 'Drinks', 'Apple Juice', 180.0, 17],
['2021', 'North', 'ZhangWu', 'Drinks', 'Apple Juice', 233.0, 23],
['2021', 'North', 'HanWen', 'Drinks', 'Apple Juice', 123.0, 12],
['2021', 'East', 'SunLin', 'Drinks', 'Milk', 431.0, 38],
['2021', 'East', 'JinShiPeng', 'Drinks', 'Milk', 635.0, 56],
['2021', 'East', 'ZhangShang', 'Drinks', 'Milk', 324.0, 33],
['2021', 'East', 'SunYang', 'Drinks', 'Milk', 644.0, 68],
['2021', 'East', 'YuanChengJie', 'Drinks', 'Milk', 343.0, 19],
['2021', 'North', 'ZhangYing', 'Drinks', 'Milk', 234.0, 13],
['2021', 'North', 'WangWei', 'Drinks', 'Milk', 666.0, 39],
['2021', 'North', 'ZhangWu', 'Drinks', 'Milk', 700.0, 77],
['2021', 'North', 'HanWen', 'Drinks', 'Milk', 111.0, 8],
['2021', 'East', 'SunLin', 'Drinks', 'Orange Juice', 176.0, 18],
['2021', 'East', 'JinShiPeng', 'Drinks', 'Orange Juice', 500.0, 20],
['2021', 'East', 'ZhangShang', 'Drinks', 'Orange Juice', 340.0, 19],
['2021', 'East', 'SunYang', 'Drinks', 'Orange Juice', 540.0, 45],
['2021', 'East', 'YuanChengJie', 'Drinks', 'Orange Juice', 563.0, 56],
['2021', 'North', 'ZhangYing', 'Drinks', 'Orange Juice', 300.0, 19],
['2021', 'North', 'WangWei', 'Drinks', 'Orange Juice', 490.0, 44],
['2021', 'North', 'ZhangWu', 'Drinks', 'Orange Juice', 233.0, 25],
['2021', 'North', 'HanWen', 'Drinks', 'Orange Juice', 760.0, 78],
['2021', 'East', 'SunLin', 'Dessert', 'Chocolate', 333.0, 32],
['2021', 'East', 'JinShiPeng', 'Dessert', 'Chocolate', 420.0, 46],
['2021', 'East', 'ZhangShang', 'Dessert', 'Chocolate', 318.0, 37],
['2021', 'East', 'SunYang', 'Dessert', 'Chocolate', 256.0, 21],
['2021', 'East', 'YuanChengJie', 'Dessert', 'Chocolate', 583.0, 54],
['2021', 'North', 'ZhangYing', 'Dessert', 'Chocolate', 352.0, 33],
['2021', 'North', 'WangWei', 'Dessert', 'Chocolate', 384.0, 39],
['2021', 'North', 'ZhangWu', 'Dessert', 'Chocolate', 435.0, 42],
['2021', 'North', 'HanWen', 'Dessert', 'Chocolate', 356.0, 36],
['2021', 'East', 'SunLin', 'Dessert', 'Beef Jerky', 789.0, 73],
['2021', 'East', 'JinShiPeng', 'Dessert', 'Beef Jerky', 156.0, 14],
['2021', 'East', 'ZhangShang', 'Dessert', 'Beef Jerky', 289.0, 23],
['2021', 'East', 'SunYang', 'Dessert', 'Beef Jerky', 562.0, 45],
['2021', 'East', 'YuanChengJie', 'Dessert', 'Beef Jerky', 546.0, 56],
['2021', 'North', 'ZhangYing', 'Dessert', 'Beef Jerky', 218.0, 17],
['2021', 'North', 'WangWei', 'Dessert', 'Beef Jerky', 541.0, 56],
['2021', 'North', 'ZhangWu', 'Dessert', 'Beef Jerky', 219.0, 21],
['2021', 'North', 'HanWen', 'Dessert', 'Beef Jerky', 345.0, 21],
];
const columns = ['Year', 'Region', 'Salesman', 'ProductCategory', 'Product', 'Sales', 'Return'];
return dataManager.addTable('Sales', {
data: records.map((x) => {
const record = {};
columns.forEach((c, i) => record[c] = x[i]);
return record;
})
});
}sheet.dataCharts.add()메서드를 사용하여 지정된 좌표에 데이터 차트를 생성합니다.
const dataChart = sheet.dataCharts.add('data-chart', 10, 10, 600, 400);setChartConfig()메서드를 사용하여 데이터 차트를 특정 설정으로 구성합니다. 이 예제에서는type,encodings,values,category,color를 적용합니다.하지만 데이터 차트에는 추가 시 사용자 정의할 수 있는 여러 요소가 있습니다. 자세한 내용은 데이터 차트 요소 문서를 참고하시기 바랍니다.
dataChart.setChartConfig({
tableName: 'Sales',
config: {
header: {
title: "Bar Chart"
}
},
plots: [
{
type: GC.Spread.Sheets.DataCharts.DataChartType.bar,
encodings: {
values: [
{
field: "Sales",
aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum
}
],
category: {
field: "Product"
},
color: {
field: "Product"
}
},
}
]
});