꺾은선형 차트

꺾은선형 차트는 동일한 간격의 축을 따라 시간에 따른 연속 데이터를 시각화하는 데 널리 사용됩니다. 이러한 차트는 월, 분기 또는 회계연도와 같은 일정한 시간 간격의 데이터 추세를 분석하는 데 적합합니다.

워크시트의 열이나 행에 정렬된 데이터는 꺾은선형 차트에 플로팅될 수 있습니다. 꺾은선형 차트에서는 범주형 데이터가 수평 축을 따라 균등하게 분포되며, 모든 값 데이터는 수직 축을 따라 분포됩니다.

SpreadJS는 다음과 같은 종류의 꺾은선형 차트를 지원합니다. 이 예시에서는 서로 다른 종류의 기기(모바일폰, 노트북, 태블릿)에 대한 1분기, 2분기, 3분기 연간 판매 기록의 추세를 다양한 유형의 꺾은선형 차트로 나타냅니다.

꺾은선형 차트

이 차트는 시간 경과에 따라 플로팅된 데이터 값을 나타내어 추세를 보여줍니다.

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

누적 꺾은선형 차트

이 차트는 각 데이터 값 또는 정렬된 범주의 기여 추세를 나타내기 위해 누적된 선을 표시합니다.

아래 이미지는 누적 꺾은선형 차트의 예시입니다:

100% 기준 누적 꺾은선형 차트

이 차트는 각 데이터 값 또는 정렬된 범주가 전체에 대해 기여한 비율의 추세를 표시합니다.

아래 이미지는 100% 기준 누적 꺾은선형 차트의 예시입니다:

표식이 있는 꺾은선형 차트

이 차트는 표식과 함께 데이터 값을 표시합니다. 범주가 많거나 값이 근사값일 경우 이 차트를 사용하는 것이 이상적입니다.

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

표식이 있는 누적 꺾은선형 차트

이 차트는 표식과 함께 데이터 값을 표시하며, 일반적으로 시간 또는 균등 간격의 범주에 따른 각 값의 기여 추세를 보여줍니다.

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

표식이 있는 100% 기준 누적 꺾은선형 차트

이 차트는 표식과 함께 개별 데이터 값을 표시하며, 일반적으로 시간 또는 균등 간격의 범주에 따라 각 값이 기여한 비율의 추세를 보여줍니다. 범주가 많거나 값이 근사값일 경우 이 차트를 사용하는 것이 이상적입니다.

아래 이미지는 표식이 있는 100% 기준 누적 꺾은선형 차트의 예시입니다:

다음 코드 샘플은 스프레드시트에 다양한 유형의 꺾은선형 차트를 추가하는 방법을 보여줍니다.

var chart_line, chart_lineStacked, chart_lineStacked100, sheet;
window.onload = function ()
{
 var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
 sheet = spread.getActiveSheet();
 sheet.suspendPaint();
 // 데이터 준비
 sheet.setValue(0, 1, "Q1");
 sheet.setValue(0, 2, "Q2");
 sheet.setValue(0, 3, "Q3");
 sheet.setValue(1, 0, "Mobile Phones");
 sheet.setValue(2, 0, "Laptops");
 sheet.setValue(3, 0, "Tablets");
 for (var r = 1; r <= 3; r++)
  {
      for (var c = 1; c <= 3; c++)
      {
       sheet.setValue(r, c, parseInt(Math.random() * 100));
      }
  }
// line 차트 추가
chart_line = sheet.charts.add('chart_line', GC.Spread.Sheets.Charts.ChartType.line, 250, 20, 600, 400, "A1:D4");
// lineStacked  차트 추가
chart_lineStacked = sheet.charts.add('chart_lineStacked', GC.Spread.Sheets.Charts.ChartType.lineStacked, 250, 480, 600, 400, "A1:D4");
// lineStacked100  차트 추가
chart_lineStacked100 = sheet.charts.add('chart_lineStacked100', GC.Spread.Sheets.Charts.ChartType.lineStacked100, 250, 900, 600, 400, "A1:D4");
sheet.resumePaint();
};