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

꺾은선형 차트

꺾은선형 차트는 데이터 포인트를 직선 또는 곡선으로 연결하여 구성되는 기본적인 차트입니다. 일반적으로 시간이나 기타 연속적인 변수에 따른 데이터의 추세, 변동, 변화를 시각화하는 데 사용됩니다. 이 차트를 통해 데이터의 경향을 시각적으로 파악하고, 더 나은 의사 결정과 분석에 도움이 되는 인사이트를 얻을 수 있습니다.

SpreadJS에서는 색상 팔레트, 그래프 투명도, 테두리 스타일, 선 두께, 포인트 심볼, 툴팁 스타일 등 다양한 속성을 수정하여 라인 차트를 추가하고 사용자 정의할 수 있습니다. 이러한 수정은 코드로 설정하거나 SpreadJS 디자이너의 속성(Inspector) 탭을 통해 수행할 수 있습니다.

아래 이미지는 표식이 있는 꺾은선형 차트의 예시입니다:

image


다음 샘플 코드는 꺾은선형 차트를 추가하는 방법을 보여줍니다.

이 샘플은 "데이터 차트 생성하기" 페이지의 "salesTable" 데이터를 기반으로 합니다. 따라서 해당 페이지의 기본 단계를 먼저 수행해야 하며, 필요에 따라 데이터 소스를 사용자 요구에 맞게 커스터마이징할 수도 있습니다.

// 꺾은선형 차트
const sheet = spread.getActiveSheet();
sheet.name("Line Chart");
const dataChart = sheet.dataCharts.add('data-chart', 10, 10, 600, 400);
dataChart.setChartConfig({
    tableName: 'Sales',
    config: {                    
        header: {   
            title: "Line Chart With Symbol",                        
        },                    
    },
    plots: [
        {
            type: GC.Spread.Sheets.DataCharts.DataChartType.line,
            encodings: {
                category: {
                    field: "Product"
                },
                color: {
                    field: "Region"
                },
                values: [
                    {
                        field: "Sales",
                        aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum
                    }
                ]
            },
            config: {
                axisMode: GC.Spread.Sheets.DataCharts.AxisMode.cartesian,
                palette: [
                    "#88bde6",
                    "#fbb258",
                    "#90cd97",
                    "#f6aac9",
                    "#bfa554",
                    "#bc99c7"
                ],
                style: {
                    strokeWidth: 2,
                    symbolShape: GC.Spread.Sheets.DataCharts.SymbolShape.dot,
                    symbolSize: 10,
                },
                symbols: true,                            
            }
        }
    ]
});