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

데이터 표식

SpreadJS는 사용자가 다양한 모양과 선 유형을 사용하여 데이터 표식을 구성할 수 있도록 하여 강력한 차트를 생성할 수 있도록 지원합니다. 데이터 표식은 차트에서 데이터 포인트를 강조하는 데 사용됩니다.

꺾은선형 차트 및 분산형 차트 작업 시, 데이터 표식의 모양을 변경하면 계열을 구분하고 데이터 시각화를 향상시킬 수 있습니다.


다음 차트 유형들은 워크시트에서 데이터 표식 구성을 지원합니다:

  • 표식이 있는 꺾은선형 차트

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

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

  • 직선 및 표식이 있는 분산형 차트

  • 곡선 및 표식이 있는 분산형 차트

  • 표식이 있는 방사형 차트


SymbolShape 열거형은 차트에서 데이터 표식을 구성할 때 사용할 수 있는 다음과 같은 표식 유형을 제공합니다.

SymbolShape

값

이미지

circle

0

circle.jpg

dash

1

dash.jpg

diamond

2

diamond.jpg

dot

3

dot.jpg

none

4

none

plus

6

plus.jpg

square

7

square.jpg

star

8

star.jpg

triangle

9

triangle.jpg

x

10

cross.jpg

LineType 열거형은 차트에서 데이터 표식을 구성할 때 다음과 같은 선 유형을 제공합니다:

LineType

값

이미지

solid

0

solid.png

dot

1

dot.png

dash

2

dash.png

lgDash

3

lgdash.png

dashDot

4

dashDot.png

lgDashDot

5

lgdashdot.png

lgDashDotDot

6

lgdashdotdot.png

sysDash

7

sysDash.png

sysDot

8

sysDot.png

sysDashDot

9

sysDashDot.png

sysDashDotDot

10

sysDashDotDot.png

예시

예를 들어, 웹 브라우저의 사용량을 꺾은선형 차트로 표시하는 비즈니스 애플리케이션을 사용하고 있다고 가정해보겠습니다. 이 경우, 차트 내 개별 포인트의 색상과 모양을 강조하거나, 차트의 다른 데이터를 변경하지 않고 계열의 모든 데이터 포인트를 수정하고 싶을 수 있습니다.

서로 다른 색상과 모양의 데이터 표식을 구성하면 차트가 다른 차트보다 돋보이게 되며, 비즈니스 분석가들이 중요한 정보를 빠르고 효과적으로 조작하고 강조하는 데 도움이 됩니다.

아래 이미지는 표식이 있는 꺾은선형 차트를 보여줍니다. 선 위의 각 포인트는 셀에 위치한 단일 데이터 값을 나타내는 데이터 표식입니다.




다음 코드 샘플은 꺾은선형 차트에서 데이터 표식을 구성하는 방법을 보여줍니다.

Ask ChatGPT

$(document).ready(function ()
{
  var chart_line, chart_lineStacked, chart_lineStacked100, sheet;
  window.onload = function ()
  {
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
    var sheet = spread.getActiveSheet();
    var dataArray =
    [
      ["", '2012', '2013', '2014', '2015', '2016', '2017'],
      ["Chrome", 0.3782, 0.4663, 0.4966, 0.5689, 0.6230, 0.6360],
      ["FireFox", 0.2284, 0.2030, 0.1801, 0.1560, 0.1531, 0.1304],
      ["IE", 0.3214, 0.2491, 0.2455, 0.1652, 0.1073, 0.0834],
    ];
    sheet.setArray(0, 0, dataArray);
    var chart = sheet.charts.add('chart1', GC.Spread.Sheets.Charts.ChartType.lineMarkers, 30, 85, 400, 250, 'A1:G4');
    var ser1 = chart.series().get(0);
    ser1.symbol =
    {
      fill: 'red',
      fillColorTransparency: 0.3,
      size: 20,
      shape: GC.Spread.Sheets.Charts.SymbolShape.triangle,
      border:
      {
        color: "green",
        width: 2,
        lineType: GC.Spread.Sheets.Charts.LineType.solid,
        colorTransparency: 0.5,
      }
    }
    chart.series().set(0, ser1);
  };
});