[{"id":"5f98443c-9d59-4351-81ad-0910eb2535e7","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"50134b23-c8f4-4c83-8c49-4f7a4d307585","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"61551de1-9a9f-4a08-b71e-49ca882827f5","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"ebf0ce82-0782-496c-bd66-90f5433e31f2","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"50e4fa24-000f-45f0-8f09-9026e40c30ca","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"64f01bad-a9ca-47a2-b134-b485adffed2c","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"57569d12-0bea-4995-9743-1b5efb7dfda6","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"712bddae-c316-4524-add9-6dd487152146","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"afb74359-e66d-40e1-a5e2-f7a22468165d","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"cccfa340-c8a6-43ef-b2cd-f9fe44ce22dc","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"d404d4eb-0b25-4650-be78-033cc4aa3445","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"d778e74c-622b-47d6-b0b1-32e741ee6d1a","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"3103635f-71c9-4a28-8786-45ae6de6a49f","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"0d56fe97-9840-41da-931f-ad23201cd9e2","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"c90cdefc-81dd-4d8d-b8fa-ed93585c4b23","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"5d5d62ca-5108-4421-a925-f2c187eb2aeb","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"e588ca95-4aba-4e50-a99f-833a98531489","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"cc378615-c853-4f3e-994b-9a2260cc06a2","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"4a60e156-0f10-43a2-88bc-9d9691f15137","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"938d62d7-9526-479f-9798-31d0f9f58588","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"9e4f342b-5dcb-4548-a84c-afe71cf5d736","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"0d50ab1e-81c0-49b2-b8cb-1f50a6f3e12b","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"0a0c904c-bbb2-4abe-a626-a06200fb57fe","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"224e6263-b410-4f17-8822-e19f965c509d","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"74546345-b13f-4465-a716-7bc0f9c19730","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"60452ec3-5f68-4e01-b8f0-22ea893bf4ce","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"8c3493e9-e62c-45b7-9268-825db731f79b","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]}]
        
(Showing Draft Content)

차트 오버레이

오버레이

데이터를 나타내는 열, 막대 또는 선과 같은 기하학적 모양 외에도 플롯에는 데이터에 대한 메타 정보를 나타내는 '오버레이'라는 추가 항목이 포함될 수 있습니다. 대표적인 예시는 아래 그림과 같이 데이터의 선형 회귀를 보여주는 '추세선'입니다.


https://documentsitestorage.blob.core.windows.net/document-site-files/images/7dc91a50-d66f-4ec3-8bc4-a23349b770e6/image.4af73c.png


플롯을 선택하고 속성 관리자에서 '오버레이' 컬렉션을 편집하여 오버레이를 추가할 수 있습니다.

모든 오버레이에는 다음과 같은 공통 속성이 있습니다.

  • 이름– 오버레이의 이름

  • 유형 – 오버레이 유형

  • 표시Front 값은 오버레이가 플롯의 앞면에 표시됨을 나타내고, Back 값은 오버레이가 플롯의 뒷면에 표시됨을 나타냅니다.

ActiveReportsJS 차트는 아래에서 자세히 설명하는 여러 오버레이 유형을 지원합니다.




참조선(ReferenceLine)

참조선을 사용하여 주어진 지점에서 데이터 값을 표시할 수 있습니다. 아래 차트는 각 판매 채널의 평균 판매 금액에 해당하는 값에서 y축에 참조선을 가집니다.


image.png


참조선 오버레이는 다음과 같은 특정 속성을 표시합니다.

  • 선 스타일은 참조선의 모양을 설정합니다.

  • Axis 속성은 참조선이 연결된 축을 지정합니다.

  • 속성은 선택한 축의 참조선 값을 지정합니다. 정적 값에 사용할 수 있습니다.

  • 필드 속성은 참조선이 연결된 선택된 축의 데이터 값을 지정합니다.

  • 집계 유형(Aggregation Type) 속성은 필드에 적용되는 집계 유형을 지정하여 참조선의 값을 계산합니다.

  • 범례 표시 속성은 범례에 표시되고 참조선과 연결된 텍스트를 지정합니다.

  • 세부 단계 속성은 참조선이 플롯당 한 번(Total) 또는 detail encoding 인스턴스(Group)당 한 번 표시되는지 여부를 지정합니다.

Reference bands

ReferenceBand를 사용하여 주어진 포인트 사이의 데이터 값 범위를 표시할 수 있습니다. ReferenceBand 오버레이는 다음과 같은 특정 속성을 노출합니다.

  • 선 스타일배경 색상은 모양을 설정합니다.

  • Axis 속성은 참조 밴드가 연결된 축을 지정합니다.

  • 시작종료 속성은 선택한 축에서 참조 밴드의 시작 및 종료 값을 지정합니다. 정적 값에 사용할 수 있습니다.

선형 추세선

선형 추세선을 사용하여 데이터 값이 일정한 속도로 증가하거나 감소하는 방법을 보여주는 최적의 직선을 표시할 수 있습니다. 아래 차트에는 3년 연속 판매액의 추세를 보여주는 선형 추세선이 있습니다.


image.png


선형 추세선 오버레이는 다음과 같은 특정 속성을 표시합니다.

  • 선 스타일은 추세선의 모양을 설정합니다.

  • Intercept 속성은 추세선이 'Y' 축과 교차해야 하는 지점을 지정합니다. 정적 값에 사용할 수 있습니다.

  • Forward ForecastBackward Forecast 속성은 각각 마지막 및 첫 번째 데이터 값을 기준으로 추세선이 앞뒤로 확장되는 데이터 포인트의 수를 지정합니다.

  • 필드 속성은 추세선이 연결된 데이터 값을 지정합니다.

  • 범례 표시 속성은 범례에 표시되고 추세선과 연결된 텍스트를 지정합니다.

  • 세부 단계 속성은 추세선이 플롯당 한 번(Total) 또는 detail encoding 인스턴스(Group)당 한 번 표시되는지 여부를 지정합니다.

지수 추세선

지수 추세선을 사용하여 데이터 값이 증가하거나 감소한 다음 평준화되는 방식을 보여주는 최적의 지수 곡선을 표시할 수 있습니다. 이 추세선은 0보다 큰 데이터 값에만 사용할 수 있습니다. 지수 추세선 오버레이는 선형 추세선 오버레이와 동일한 속성을 노출합니다.

거듭제곱 추세선

거듭제곱 추세선을 사용하여 특정 비율로 증가하는 측정 값을 비교하기 위해 최적 곡선을 표시할 수 있습니다. 이 추세선은 0보다 큰 데이터 값에만 사용할 수 있습니다. 거듭제곱 추세선 오버레이는 Intercept 속성을 제외하고 선형 추세선 오버레이와 동일한 속성을 노출합니다.

로그 추세선

로그 추세선을 사용하여 데이터 값이 증가/감소한 다음 어떻게 평준화되는지 보여주는 최적의 지수 곡선을 표시할 수 있습니다. 로그 추세선 오버레이는 Intercept 속성을 제외하고 선형 추세선 오버레이와 동일한 속성을 노출합니다.

다항식 추세선

다항식 추세선을 사용하여 데이터 값의 변동을 보여주는 최적 곡선을 표시할 수 있습니다. 아래 차트에는 월별 매출 추세를 보여주는 다항식 추세선이 있습니다.


image.png


다항식 추세선 오버레이는 선형 추세선 오버레이와 동일한 속성을 노출합니다. 2부터 6까지 유효한 값을 갖는 Order 속성은 다항식 추세선을 정의하는 방정식의 차수를 나타냅니다.

푸리에 급수 추세선

푸리에 급수 추세선을 사용하여 데이터 값의 변동을 보여주는 최적의 푸리에 급수 선을 표시할 수 있습니다. 푸리에 급수 추세선 오버레이는 선형 추세선 오버레이와 동일한 속성을 노출합니다. 2부터 6까지 유효한 값을 갖는 Order 속성은 푸리에 급수 추세선을 정의하는 방정식의 차수를 나타냅니다.

이동 평균 추세선

이동 평균 추세선을 사용하여 데이터 값의 변동을 완화하는 선을 표시하여 패턴이나 추세를 더 명확하게 표시할 수 있습니다.


ActiveReportsJS는 다음과 같은 이동 평균 추세선 유형을 지원합니다.

이동 평균 추세선 오버레이는 다음과 같은 속성들을 보여줍니다.

  • 선 스타일은 추세선의 모양을 설정합니다.

  • 필드 속성은 추세선이 연결된 데이터 값을 지정합니다.

  • 범례 표시 속성은 범례에 표시되고 추세선과 연결된 텍스트를 지정합니다.

  • 세부 단계 속성은 추세선이 플롯당 한 번(Total) 또는 detail encoding 인스턴스(Group)당 한 번 표시되는지 여부를 지정합니다.

  • 2부터 데이터 값의 양까지 유효한 값을 갖는 Period 속성은 이동 평균을 계산하는 데 사용되는 데이터 포인트의 수를 나타냅니다.

아래 차트에서는 Period = 2인 단순 이동 평균 추세선이 있으며 월별 매출 추세를 보여줍니다.

image.png