# 데이터 표식

## Content

SpreadJS는 사용자가 다양한 모양과 선 유형을 사용하여 **데이터 표식**을 구성할 수 있도록 하여 강력한 차트를 생성할 수 있도록 지원합니다. 데이터 표식은 차트에서 **데이터 포인트를 강조**하는 데 사용됩니다.
**꺾은선형 차트** 및 **분산형 차트** 작업 시, 데이터 표식의 모양을 변경하면 **계열을 구분**하고 **데이터 시각화를 향상**시킬 수 있습니다.

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

* 표식이 있는 꺾은선형 차트
* 표식이 있는 100% 기준 누적 꺾은선형 차트
* 표식이 있는 누적 꺾은선형 차트
* 직선 및 표식이 있는 분산형 차트
* 곡선 및 표식이 있는 분산형 차트
* 표식이 있는 방사형 차트
<br>

[SymbolShape](/spreadjs/api/v18/enums/GC.Spread.Sheets.Charts.SymbolShape) 열거형은 차트에서 데이터 표식을 구성할 때 사용할 수 있는 다음과 같은 **표식 유형**을 제공합니다.

| **SymbolShape** | **값** | **이미지** |
| ----------- | --- | --- |
| circle | 0 | ![circle.jpg](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/circle.bee06a.jpg) |
| dash | 1 | ![dash.jpg](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/dash.35e90a.jpg) |
| diamond | 2 | ![diamond.jpg](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/diamond.52791c.jpg) |
| dot | 3 | ![dot.jpg](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/dot.1fabf5.jpg) |
| none | 4 | none |
| plus | 6 | ![plus.jpg](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/plus.c062f7.jpg) |
| square | 7 | ![square.jpg](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/square.e7b76e.jpg) |
| star | 8 | ![star.jpg](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/star.22cb4b.jpg) |
| triangle | 9 | ![triangle.jpg](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/triangle.2035c4.jpg) |
| x | 10 | ![cross.jpg](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/cross.c2a6d0.jpg) |

[LineType](/spreadjs/api/v18/enums/GC.Spread.Sheets.Charts.LineType) 열거형은 차트에서 데이터 표식을 구성할 때 다음과 같은 선 유형을 제공합니다:

| **LineType** | **값** | **이미지** |
| -------- | --- | --- |
| solid | 0 | ![solid.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/solid.710ffb.png) |
| dot | 1 | ![dot.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/dot.72e1f1.png) |
| dash | 2 | ![dash.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/dash.e3ff9a.png) |
| lgDash | 3 | ![lgdash.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/lgdash.9a48e1.png) |
| dashDot | 4 | ![dashDot.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/dashDot.ca4550.png) |
| lgDashDot | 5 | ![lgdashdot.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/lgdashdot.04faa0.png) |
| lgDashDotDot | 6 | ![lgdashdotdot.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/lgdashdotdot.96fa3b.png) |
| sysDash | 7 | ![sysDash.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/sysDash.e83bc0.png) |
| sysDot | 8 | ![sysDot.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/sysDot.5815aa.png) |
| sysDashDot | 9 | ![sysDashDot.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/sysDashDot.1e2eac.png) |
| sysDashDotDot | 10 | ![sysDashDotDot.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/sysDashDotDot.e8ee95.png) |

## **예시**

예를 들어, 웹 브라우저의 사용량을 꺾은선형 차트로 표시하는 비즈니스 애플리케이션을 사용하고 있다고 가정해보겠습니다. 이 경우, 차트 내 개별 포인트의 색상과 모양을 강조하거나, 차트의 다른 데이터를 변경하지 않고 계열의 모든 데이터 포인트를 수정하고 싶을 수 있습니다.
서로 다른 색상과 모양의 데이터 표식을 구성하면 차트가 다른 차트보다 돋보이게 되며, 비즈니스 분석가들이 중요한 정보를 빠르고 효과적으로 조작하고 강조하는 데 도움이 됩니다.
아래 이미지는 표식이 있는 꺾은선형 차트를 보여줍니다. 선 위의 각 포인트는 셀에 위치한 단일 데이터 값을 나타내는 데이터 표식입니다.

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/chart.jpg)

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

```javascript
$(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);
  };
});
```