Ignite UI for Angular 변경 내역
각 버전의 Ignite UI for Angular에 대한 모든 주목할 만한 변경 사항은 이 페이지에 설명되어 있습니다.
이 항목에서는 igniteui-angular 패키지에 포함되지 않은 구성 요소에 대한 변경 사항만 설명합니다. igniteui-angular 구성 요소와 관련된 변경 사항은 CHANGELOG를 참조하십시오. 메릴랜드.
19.1.0
igniteui-angular-charts (차트)
-
- 데이터 주석 밴드 레이어(베타)
- 데이터 주석 라인 레이어(베타)
- 데이터 주석 사각형 계층(베타)
- 데이터 주석 슬라이스 레이어(베타)
- 데이터 주석 스트립 레이어(베타)
데이터 도구 설명 및 데이터 범례는 도구 설명 또는 범례의 내용을 테이블 또는 세로 레이아웃 구조로 레이아웃하는 데 사용할 수 있는 새
LayoutMode
속성을 노출합니다.
defaultInteraction
차트의 속성이 새로운 열거형을 포함하도록 업데이트되었으며,DragSelect
여기서 드래그된 미리보기 Rect는 그 안에 포함된 점을 선택합니다. (베타)위에 나열된 새로운 차트 데이터 주석 외에도 ValueOverlay 및 ValueLayer는 이제 그림 영역에서 추가 주석 텍스트를 오버레이하는 데 사용할 수 있는 속성을 노출
OverlayText
합니다. 이러한 주석의 모양은 많은 OverlayText 접두사 속성을 사용하여 구성할 수 있습니다. 예를 들어, 속성은OverlayTextBrush
오버레이 텍스트의 색상을 구성합니다. (베타)새로운 추세선 레이어 계열 유형: 추세선 레이어당 단일 추세선을 특정 계열에 적용할 수 있습니다. 이렇게 하면 차트에 여러 TrendlineLayer 계열 유형이 있을 수 있으므로 단일 계열에서 여러 추세선을 사용할 수 있습니다.
igniteui-angular-dashboards(대시보드)
-
DashboardTile
이제 DataGrid 보기에서 정렬, 그룹화, 필터링 및 선택과 같은 차트 시각화로 집계를 전파할 수 있습니다. 이것은 현재 ofDataSource
theDashboardTile
를 instance ofLocalDataSource
에 바인딩하여 지원됩니다 .
igniteui-각도
주요 변경 내용
- 'igniteui-angular-grids' 패키지의 이름이 'igniteui-angular-data-grids'로 변경되었습니다.
향상
툴바
- 이제 도구 모음에서 추가된 값 레이어가 범례에 나타납니다.
- 확대/축소 재설정 도구가 확대/축소 드롭다운으로 이동되었습니다.
데이터 파이 차트
- 이제 차트에서 메서드를 노출합니다
GetOthersContext()
. 그러면 "others" 슬라이스의 내용이 반환됩니다.
버그 수정
버그 번호 | 제어 | 설명 |
---|---|---|
37023 | IgxDataChart | 툴팁은 overflow hidden이 설정된 경우 잘리거나 화면에서 벗겨집니다. |
37244 | 뛰어나다 | 사용자 지정 데이터 유효성 검사가 작동하지 않습니다. |
37685 | Igx스프레드시트 | Arial 글꼴로 서식이 지정된 숫자의 렌더링 불량. |
19.0.1(2025년 2월)
향상
툴바
- 새로 추가됨
GroupHeaderTextStyle
속성을IgxToolbarComponent
그리고IgxToolPanelComponent
. 설정하면 모든 항목에 적용됩니다.IgxToolActionGroupHeaderComponent
작업. - 제목 텍스트의 수평 정렬을 제어하는 called
titleHorizontalAlignment
에IgxToolActionComponent
새로운 속성을 추가했습니다. - 에 새 속성을 추가했습니다.
IgxToolActionSubPanelComponent
호출ItemSpacing
패널 내부의 항목 사이의 간격을 제어합니다.
버그 수정
다음 표에는 이 릴리스의 Ignite UI for Angular 도구 집합에 대한 버그 수정이 나열되어 있습니다.
버그 번호 | 제어 | 설명 |
---|---|---|
26218 | 엑셀 라이브러리 | 차트의 플롯 영역 오른쪽 여백이 좁아지고 채우기 패턴과 채우기 전경이 Excel 파일을로드하는 것만으로 사라집니다. |
30286 | IgxDataChart | 거품 시리즈 도구 설명 내용이 거품을 클릭하면 근처의 거품 데이터 내용으로 전환됩니다. |
32906 | IgxDataChart | IgxDataChart는 상단에 두 개의 xAxis를 표시합니다. |
33605 | IgxDataChart | ScatterLineSeries가 범례에서 선의 색을 올바르게 표시하지 않습니다. |
34053 | IgxRadial게이지 | 축척 레이블의 위치가 이동됩니다. |
34083 | 엑셀 라이브러리 | TextOperatorConditionalFormat's가 제대로 로드/저장되지 않음: 텍스트에 템플릿에 =가 포함되어 있으면 |
34776 | IgxDataChart | IgxDataChart를 반복적으로 표시하거나 숨기면 JS 힙에서 메모리 누수가 발생합니다. |
35495 | 엑셀 라이브러리 | 템플릿 파일이 로드될 때 셀의 그림이 손실됩니다. |
35496 | Igx스프레드시트 | Excel에서 이미지를 사용하여 스타일을 설정할 때 오류 발생 |
35498 | IgxDataChart | IncludedSeries에 지정된 계열에 대한 도구 설명이 표시되지 않습니다. |
36176 | 엑셀 라이브러리 | LET 함수가 있는 Excel 통합 문서를 로드할 때 예외가 발생합니다. |
36379 | 엑셀 라이브러리 | Excel 통합 문서에서 알파 채널이 있는 색상이 로드되지 않음 |
19.0.0(2025년 1월)
- Angular 19 지원.
18.2.0(2024년 12월)
igniteui-angular-charts (차트)
DashboardTile(베타)
- 새 대시보드 타일 구성 요소는 바인딩된 ItemsSource 컬렉션 또는 단일 요소를 분석 및 시각화하고 데이터의 스키마 및 개수에 따라 적절한 데이터 시각화를 반환하는 컨테이너 컨트롤입니다. 이 컨트롤은 기본 제공 Toolbar 구성 요소를 활용하여 런타임에 시각화를 변경할 수 있도록 하므로 최소한의 코드로 데이터의 다양한 시각화를 볼 수 있습니다.
igniteui-angular-charts (입력)
- 새로운 ColorEditor (베타) & 툴바 툴액션 (베타)
이 새로운 색상 편집기는 독립형 색상 선택기로 사용할 수 있으며 이제 런타임 시 시각화를 업데이트하기 위해 도구 모음 구성 요소에 통합되었습니다.
18.1.0(2024년 9월)
Data 파이 차트-
IgxDataPieChartComponent
원형 차트를 렌더링하는 새로운 구성 요소입니다. 이 구성 요소는 기본 데이터 모델의 속성을 자동으로 감지하는 동시에 ItemLegend 구성 요소를 통해 선택, 강조 표시, 애니메이션 및 범례 지원을 허용한다는 점에서 유사IgxCategoryChartComponent
하게 작동합니다.New Proportional Category Angle Axis- 원형 차트와 유사한 슬라이스를 그리기 위해 원형 그래프 내에서 데이터 포인트가 세그먼트로 표시되는 데이터 시각화 유형인 Radial Pie Series
IgxDataChartComponent
의 새 축입니다.-
New ToolActionCheckboxList: 선택할 수 있는 확인란이 있는 항목 컬렉션을 표시하는 새로운 CheckboxList: ToolAction입니다. ToolAction CheckboxList 내의 그리드는 높이가 최대 5개 항목까지 증가한 다음 스크롤 막대가 표시됩니다. IgxCheckboxListModule을 등록해야 합니다.
새로운 필터링 지원
축 필드 변경 사항: CategoryChart를 대상으로 할 때 도구 모음의 새로운 기본 IconMenu. 레이블 필드는 X축에 매핑되고 값 필드는 Y축에 매핑됩니다. 대상 차트는 변경 사항에 실시간으로 반응합니다. 차트에 ItemsSource가 설정되어 있지 않으면 IconMenu가 숨겨집니다.
18.0.0(2024년 6월)
- Angular 18 지원.
igniteui-angular-charts (차트)
- 데이터 범례 그룹화 및 데이터 툴팁 그룹화- 새로운 그룹화 기능이 추가되었습니다. 이 속성은
GroupRowVisible
각 시리즈로 그룹화를 전환하고 옵트인하면 속성을 통해 그룹 텍스트를 할당할 수 있습니다dataLegendGroup
. 동일한 값이 둘 이상의 시리즈에 적용되면 그룹화되어 표시됩니다. 모든 사용자에 대해 분류하고 구성해야 하는 대규모 데이터 세트에 유용합니다.
차트 선택- 새로운 시리즈 선택 스타일링. 이것은 모든 범주, 금융 및 방사형 시리즈
IgxCategoryChartComponent
에 걸쳐 광범위하게 채택됩니다IgxDataChartComponent
. 시리즈를 클릭하면 다른 색상, 밝아지거나 흐려지기, 초점 윤곽선이 표시될 수 있습니다. 개별 계열 또는 전체 데이터 항목을 통해 영향을 받는 항목을 관리합니다. 여러 시리즈 및 마커가 지원됩니다. partcular dataitem의 값 간의 다양한 차이점 또는 유사점을 설명하는 데 유용합니다. 또한SelectedSeriesItemsChanged
이벤트를 진행하고selectedSeriesItems
팝업 또는 기타 화면과 같이 응용 프로그램 내에서 발생할 수 있는 다른 작업을 포함하는 강력한 비즈니스 요구 사항을 구축하기 위한 추가 도움말을 제공하며, 선택을 기반으로 하는 데이터 분석을 수행할 수 있습니다.Treemap Highlighting- 이제 트리 맵에
highlightingMode
있는 항목의 마우스 오버 강조 표시를 구성할 수 있는 속성을 노출합니다. 이 속성은 두 가지 옵션을 사용합니다 :Brighten
강조 표시는 마우스를 올려 놓은 항목에만 적용되고FadeOthers
, 호버 된 항목의 강조 표시는 동일하게 유지되지만 다른 모든 항목은 페이드 아웃됩니다. 이 강조 표시는 애니메이션되며 속성을 사용하여highlightingTransitionDuration
제어할 수 있습니다.트리맵 퍼센트 기반 강조 표시 - 새로운 퍼센트 기반 하이라이트를 통해 노드가 컬렉션의 진행 상황 또는 하위 집합을 나타낼 수 있습니다. 모양은 데이터 항목의 멤버에 의해 또는 새
highlightedDataSource
멤버를 제공하여 특정 값까지 배경색의 채우기로 표시됩니다. 비아를 통해highlightedValuesDisplayMode
전환하고 스타일을 지정할FillBrushes
수 있습니다.IgxToolbarComponent
- 선택한 특정 도구 주위의 테두리를 윤곽선으로 표시하기 위한 ToolAction에 대한 새로운IsHighlighted
옵션.
igniteui-angular-gauges (게이지)
IgxRadialGaugeComponent
- 강조 표시 바늘의 새 레이블입니다.
highlightLabelText
그리고highlightLabelSnapsToNeedlePivot
HighlightLabel에 대한 다른 많은 스타일 관련 속성이 추가되었습니다.
- 강조 표시 바늘의 새 레이블입니다.
18.0.0(2024년 6월)
- Angular 18 지원.
igniteui-angular-charts (차트)
- 데이터 범례 그룹화 및 데이터 툴팁 그룹화- 새로운 그룹화 기능이 추가되었습니다. 이 속성은
GroupRowVisible
각 시리즈로 그룹화를 전환하고 옵트인하면 속성을 통해 그룹 텍스트를 할당할 수 있습니다dataLegendGroup
. 동일한 값이 둘 이상의 시리즈에 적용되면 그룹화되어 표시됩니다. 모든 사용자에 대해 분류하고 구성해야 하는 대규모 데이터 세트에 유용합니다.
차트 선택- 새로운 시리즈 선택 스타일링. 이것은 모든 범주, 금융 및 방사형 시리즈
IgxCategoryChartComponent
에 걸쳐 광범위하게 채택됩니다IgxDataChartComponent
. 시리즈를 클릭하면 다른 색상, 밝아지거나 흐려지기, 초점 윤곽선이 표시될 수 있습니다. 개별 계열 또는 전체 데이터 항목을 통해 영향을 받는 항목을 관리합니다. 여러 시리즈 및 마커가 지원됩니다. partcular dataitem의 값 간의 다양한 차이점 또는 유사점을 설명하는 데 유용합니다. 또한SelectedSeriesItemsChanged
이벤트를 진행하고selectedSeriesItems
팝업 또는 기타 화면과 같이 응용 프로그램 내에서 발생할 수 있는 다른 작업을 포함하는 강력한 비즈니스 요구 사항을 구축하기 위한 추가 도움말을 제공하며, 선택을 기반으로 하는 데이터 분석을 수행할 수 있습니다.Treemap Highlighting- 이제 트리 맵에
highlightingMode
있는 항목의 마우스 오버 강조 표시를 구성할 수 있는 속성을 노출합니다. 이 속성은 두 가지 옵션을 사용합니다 :Brighten
강조 표시는 마우스를 올려 놓은 항목에만 적용되고FadeOthers
, 호버 된 항목의 강조 표시는 동일하게 유지되지만 다른 모든 항목은 페이드 아웃됩니다. 이 강조 표시는 애니메이션되며 속성을 사용하여highlightingTransitionDuration
제어할 수 있습니다.트리맵 퍼센트 기반 강조 표시 - 새로운 퍼센트 기반 하이라이트를 통해 노드가 컬렉션의 진행 상황 또는 하위 집합을 나타낼 수 있습니다. 모양은 데이터 항목의 멤버에 의해 또는 새
highlightedDataSource
멤버를 제공하여 특정 값까지 배경색의 채우기로 표시됩니다. 비아를 통해highlightedValuesDisplayMode
전환하고 스타일을 지정할FillBrushes
수 있습니다.IgxToolbarComponent
- 선택한 특정 도구 주위의 테두리를 윤곽선으로 표시하기 위한 ToolAction에 대한 새로운IsHighlighted
옵션.
igniteui-angular-gauges (게이지)
IgxRadialGaugeComponent
- 강조 표시 바늘의 새 레이블입니다.
highlightLabelText
그리고highlightLabelSnapsToNeedlePivot
HighlightLabel에 대한 다른 많은 스타일 관련 속성이 추가되었습니다.
- 강조 표시 바늘의 새 레이블입니다.
17.3.0(2024년 3월)
점화 ui 각도 차트
속성을 통한 새 데이터 필터링.
initialFilter
필터 표현식을 적용하여 차트 데이터를 레코드의 하위 집합으로 필터링합니다. 대용량 데이터를 드릴다운하는 데 사용할 수 있습니다.XamRadialChart
- 새 레이블 모드
IgxCategoryAngleAxisComponent
for the now는labelMode
레이블의 위치를 추가로 구성할 수 있는 속성을 노출합니다. 이렇게 하면 열거형을 선택하여Center
기본 모드 사이를 전환하거나 새 모드를ClosestPoint
사용하여 레이블을 원형 플롯 영역에 더 가깝게 만들 수 있습니다.
- 새 레이블 모드
igniteui 각도 게이지
IgxRadialGaugeComponent
- 새로운 제목/자막 속성.
titleText
,subtitleText
게이지 아래쪽에 나타납니다. 또한 다음과 같은 다양한 제목/부제목 글꼴 속성이 추가되었습니다.TitleFontSize
,TitleFontFamily
,TitleFontStyle
,TitleFontWeight
그리고titleExtent
. 마지막으로, 새로운titleDisplaysValue
값이 바늘의 위치와 일치할 수 있습니다. - 에 대한 새로운
opticalScalingEnabled
속성opticalScalingSize
.IgxRadialGaugeComponent
이 새로운 기능은 게이지의 레이블, 제목 및 자막에 100% 광학 배율이 적용되는 크기를 관리합니다. 이 새로운 기능에 대한 자세한 내용은 여기에서 확인할 수 있습니다 - 새로운 하이라이트 바늘이 추가되었습니다.
highlightValue
highlightValueDisplayMode
둘 다 값과 '오버레이' 설정이 제공되면 주 바늘이 흐리게 보이고 새 바늘이 나타납니다.
- 새로운 제목/자막 속성.
IgxLinearGaugeComponent
- 새로운 하이라이트 바늘이 추가되었습니다.
highlightValue
highlightValueDisplayMode
둘 다 값과 '오버레이' 설정이 제공되면 주 바늘이 흐리게 보이고 새 바늘이 나타납니다.
- 새로운 하이라이트 바늘이 추가되었습니다.
IgxBulletGraphComponent
- 이제 성능 표시줄에 '오버레이' 설정에 적용될 때
highlightValueDisplayMode
값과 새highlightValue
값의 차이가 반영됩니다. 하이라이트 값에는 필터링된/하위 집합 완료된 측정 백분율이 채워진 색상으로 표시되고 나머지 막대의 모양은 할당된 값으로 흐리게 표시되어 실시간으로 성능을 보여줍니다.
- 이제 성능 표시줄에 '오버레이' 설정에 적용될 때
17.2.0(2024년 1월)
igniteui-angular-charts (차트)
- 차트 강조 표시 필터-
IgxCategoryChartComponent
이제 데이터IgxDataChartComponent
하위 집합 안팎으로 강조 표시하고 애니메이션하는 방법을 노출합니다. 이 강조 표시는 시리즈 유형에 따라 다릅니다. 열 및 영역 계열의 경우 하위 집합은 전체 데이터 집합 위에 표시되며 하위 집합은 계열의 실제 브러시로 색상이 지정되고 전체 집합의 불투명도가 감소합니다. 라인 시리즈의 경우 하위 집합이 점선으로 표시됩니다.
17.0.0(2023년 11월)
igniteui-angular (도구 모음 - 베타)
- 클립보드를 통해 차트를 이미지로 저장하는 저장 도구 작업이 추가되었습니다.
- 수직 방향은 도구 모음의
orientation
속성을 통해 추가되었습니다. 기본적으로 도구 모음은 수평이며, 이제 도구 모음을 수직 방향으로 표시할 수 있으며 여기서 도구는 왼쪽/오른쪽으로 정중하게 팝업됩니다. - 도구 모음의 방법을 통해 사용자 지정 SVG 아이콘 지원이 추가되어 사용자 지정 도구 생성이 더욱 향상되었습니다
renderImageFromText
.
16.1.0(2023년 6월)
새로운 구성 요소
- 툴바- 베타. 이 구성 요소는 주로 차트 구성 요소와 함께 사용되는 UI 작업을 위한 컴패니언 컨테이너입니다. 도구 모음은
IgxDataChartComponent
또는IgxCategoryChartComponent
구성 요소에 연결될 때 속성 및 도구 항목의 사전 설정으로 동적으로 업데이트됩니다. 최종 사용자가 변경 사항을 제공할 수 있도록 프로젝트에 대한 사용자 정의 도구를 생성하여 끝없는 사용자 정의를 제공할 수 있습니다.
igniteui-angular-charts (차트)
ValueLayer- 이제
IgxValueLayerComponent
라는 새로운 계열 유형이 노출되어 최대, 최소 및 평균과 같이 플롯된 데이터의 다양한 초점에 대한 오버레이를 렌더링할 수 있습니다. 이는 새valueLines
컬렉션에 추가하여IgxCategoryChartComponent
및IgxFinancialChartComponent
에 적용됩니다.이제 대시 배열 시리즈의 다른 부분으로
IgxDataChartComponent
. 이것을 다음에 적용할 수 있습니다. 시리즈 차트에 표시된 눈금선 차트의 추세선 차트에 표시된 시리즈의
16.0.0(2023년 5월)
- Angular 16 지원.
15.0.0(2022년 12월)
- Angular 15 지원.
14.2.0(2022년 11월)
기본 동작에 대한 상당한 개선 사항이 추가되었으며 카테고리 차트 API를 더 쉽게 사용할 수 있도록 개선되었습니다. 이러한 새로운 차트 개선 사항은 다음과 같습니다.
- 브라우저/화면 크기에 따라 수평 라벨 회전을 위한 반응형 레이아웃.
- 모든 플랫폼에서 둥근 레이블에 대한 향상된 렌더링.
- StackedFragmentSeries에 마커 속성을 추가했습니다.
-
shouldPanOnMaximumZoom
속성을 추가했습니다. - 새 범주 축 속성:
- ZoomMaximumCategoryRange
- ZoomMaximumItemSpan
- ZoomToCategoryRange
- ZoomToItemSpan
- 범주 문자열 및 숫자 값을 그룹화, 정렬 및 요약하기 위한 새로운 차트 집계 API로 차트 데이터를 미리 집계하거나 계산할 필요가 없습니다.
- 초기 정렬 설명
- 초기 정렬
- 정렬 설명
- 초기 그룹
- 초기 그룹 설명
- 그룹 설명
- 초기 요약
- 초기 요약 설명
- 요약설명
- 초기 그룹 정렬 설명
- 그룹 정렬
- 그룹 정렬 설명
includedProperties를 사용할 때 차트의 집계가 작동하지 않습니다 | 이러한 속성은 집계되지 않은 데이터를 위한 것이기 때문입니다. 데이터 집계를 시도하면 이러한 속성을 더 이상 사용하지 않아야 합니다. 작동하지 않는 이유는 집계가 렌더링을 위해 차트로 전달되는 컬렉션을 대체하기 때문입니다. 포함/제외 속성은 해당 데이터의 속성을 필터링하도록 설계되었으며 해당 속성은 더 이상 새 집계 컬렉션에 존재하지 않습니다.
13.2.0(2022년 6월)
igniteui-angular-charts (차트)
- 고도로 구성 가능한 추가 데이터 범례와 매우 유사하게 작동하는 구성요소
IgxLegendComponent
, 하지만 계열 값을 표시하고 계열 행 및 값 열 필터링, 값 스타일 지정 및 서식 지정을 위한 많은 구성 속성을 제공합니다. - 도구 설명에 시리즈의 범례 배지뿐만 아니라 시리즈의 값과 제목을 표시하는 고도로 구성 가능한 DataToolTip을 추가했습니다. 이것은 이제 모든 차트 유형에 대한 기본 도구 설명입니다.
- Stacked Series에 대한 애니메이션 및 전환 지원이 추가되었습니다. 애니메이션은
isTransitionInEnabled
속성을 true로 설정하여 활성화할 수 있습니다. 여기에서transitionInDuration
속성을 설정하여 애니메이션을 완료하는 데 걸리는 시간을 결정하고transitionInMode
하여 발생하는 애니메이션 유형을 결정할 수 있습니다. - 추가된
AssigningCategoryStyle
이벤트는 이제 모든 시리즈에서 사용할 수 있습니다IgxDataChartComponent
. 이 이벤트는 background-color 및 highlighting과 같은Fill
계열 항목의 측면을 조건부로 구성하려는 경우에 처리됩니다. - CalloutLayer에 대한 새로운
allowedPositions
열거형입니다. 설명선이 차트 내에서 배치되는 위치를 제한하는 데 사용됩니다. 기본적으로 콜아웃은 지능적으로 최상의 위치에 배치되지만 예를 들어TopLeft
,TopRight
,BottomLeft
또는BottomRight
강제하는 데 사용됩니다. - 주석 레이어에 대한 새로운 모서리 반경 속성이 추가되었습니다. 각 콜아웃의 모서리를 둥글게 만드는 데 사용됩니다. 이제 코너 반경이 기본적으로 추가되었습니다.
- CalloutLayer의
calloutCornerRadius
- FinalValueLayer의
axisAnnotationBackgroundCornerRadius
xAxisAnnotationBackgroundCornerRadius
및yAxisAnnotationBackgroundCornerRadius
for CrosshairLayer
- CalloutLayer의
- 다양한 방식으로 스크롤 막대를 활성화하는 새로운
horizontalViewScrollbarMode
및verticalViewScrollbarMode
열거형.isVerticalZoomEnabled
또는isHorizontalZoomEnabled
와 함께 사용하면 차트를 탐색하기 위해 축을 따라 스크롤 막대를 지속하거나 페이드 인 및 아웃할 수 있습니다. - 새
FavorLabellingScaleEnd
는 축이 스케일 끝에서 레이블을 내보내는 것을 선호할지 여부를 결정합니다. 숫자 축(예:IgxNumericXAxisComponent
,IgxNumericYAxisComponent
,PercentChangeAxis
)과만 호환됩니다. - 새로운
isSplineShapePartOfRange
축의 요청된 축 범위에 스플라인 모양을 포함할지 여부를 결정합니다. - 새로운
xAxisMaximumGap
xAxisGap
사용할 때 플롯된 시리즈에 허용되는 최대값을 결정합니다. 간격은 플롯된 계열의 열 또는 막대 사이의 간격을 결정합니다. - 새
xAxisMinimumGapSize
xAxisGap
사용할 때 플롯된 계열에 대해 허용되는 최소 픽셀 기반 값을 결정하여 각 범주 사이에 항상 약간의 간격이 있도록 합니다.
13.1.0(2021년 11월)
최적의 호환성을 위해 패키지 "lit-html": "^2.0.0" 이상이 프로젝트에 추가되었는지 확인하십시오.
igniteui-angular-charts (차트)
이 릴리스에서는 지리적 맵 및 모든 차트 구성 요소에 대한 시각적 디자인 및 구성 옵션에 대한 몇 가지 개선 사항 및 단순화를 소개합니다.
- 변경됨
yAxisLabelLocation
속성 유형 YAxisLabelLocation ~에서 AxisLabelLocation ~에IgxFinancialChartComponent
그리고IgxCategoryChartComponent
- 변경됨
xAxisLabelLocation
속성 유형 XAxisLabelLocation ~에서 AxisLabelLocation ~에IgxFinancialChartComponent
-
IgxCategoryChartComponent
에xAxisLabelLocation
속성을 추가했습니다. - 범례에서
IgxGeographicMapComponent
의 지리적 계열을 나타내기 위한 지원이 추가되었습니다. -
IgxFinancialChartComponent
및IgxCategoryChartComponent
에서 기본적으로 십자선을 추가했습니다. -
IgxFinancialChartComponent
및IgxCategoryChartComponent
에서 기본적으로 십자선 주석을 추가했습니다. -
IgxFinancialChartComponent
에서 기본적으로 최종 값 주석을 추가했습니다. - 카테고리 차트 및 금융 차트에 새 속성이 추가되었습니다.
crosshairsLineThickness
및 십자선 사용자 지정을 위한 기타 속성crosshairsAnnotationXAxisBackground
및 십자선 주석을 사용자 지정하기 위한 기타 속성- 최종 값 주석을 사용자 지정하기 위한
finalValueAnnotationsBackground
및 기타 속성 - 시리즈 채우기의 불투명도를 변경할 수 있는
areaFillOpacity
(예: 영역 차트) - 마커 두께 변경을 허용하는
markerThickness
- 카테고리 차트, 금융 차트, 데이터 차트 및 지리 지도에 새 속성을 추가했습니다.
- 동일한 차트의 여러 계열에 어떤 표식 유형을 할당할 수 있는지를 허용하는
markerAutomaticBehavior
legendItemBadgeShape
범례에 표시된 모든 계열의 배지 모양을 설정하기 위한 것입니다.- 범례의 모든 계열에 배지 복잡도를 설정하기 위한
legendItemBadgeMode
- 동일한 차트의 여러 계열에 어떤 표식 유형을 할당할 수 있는지를 허용하는
- 데이터 차트 및 지리 지도의 계열에 새 속성이 추가되었습니다.
legendItemBadgeShape
범례에 표시된 특정 시리즈에 배지 모양을 설정하기 위한 것입니다.- 범례의 특정 시리즈에 배지 복잡도를 설정하기 위한
legendItemBadgeMode
- 범주 차트 및 시리즈에서 기본 수직 십자선 선 획을 #000000에서 #BBBBBB로 변경했습니다.
- 동일한 차트에 그려진 모든 시리즈의 마커 모양이 원으로 변경되었습니다. 이것은 차트의
markerAutomaticBehavior
속성을SmartIndexed
enum 값으로 설정하여 되돌릴 수 있습니다. - 원, 선 또는 사각형만 표시하도록 차트 범례의 계열 모양을 단순화했습니다. 이것은 차트의
legendItemBadgeMode
속성을MatchSeries
enum 값으로 설정하여 되돌릴 수 있습니다. - 접근성을 개선하기 위해 모든 차트에 표시되는 시리즈 및 마커의 색상 팔레트 변경
오래된 브러시/윤곽선 | 새로운 아웃라인/브러시 |
---|---|
#8BDC5C #8B5BB1 #6DB1FF #F8A15F #EE5879 #735656 #F7D262 #8CE7D9 #E051A9 #A8A8B7 |
#8BDC5C #8961A9 #6DB1FF #82E9D9 #EA3C63 #735656 #F8CE4F #A8A8B7 #E051A9 #FF903B |
11.2.0(2021년 4월)
igniteui-angular-charts (차트)
이 릴리스에서는 모든 차트 구성 요소에 대한 몇 가지 새롭고 향상된 시각적 디자인 및 구성 옵션(예: IgxDataChartComponent
, IgxCategoryChartComponent
, and IgxFinancialChartComponent
)을 소개합니다.
- Bar/Column/Waterfall 시리즈가 둥근 모서리 대신 정사각형 모서리를 갖도록 변경됨
- Scatter High Density 시리즈의 heat min 속성 색상을 #8a5bb1에서 #000000으로 변경
- Scatter High Density 시리즈의 heat max 속성 색상이 #ee5879에서 #ee5879로 변경되었습니다.
- 금융/폭포 시리즈의
NegativeBrush
및NegativeOutline
속성이 #C62828에서 #ee5879로 변경되었습니다. - 마커의 두께를 1px에서 2px로 변경
-
IgxPointSeriesComponent
,IgxBubbleSeriesComponent
,IgxScatterSeriesComponent
,IgxPolarScatterSeriesComponent
에 대한 마커의 아웃라인과 일치하도록 마커 채우기를 변경했습니다.markerFillMode
속성을 Normal로 설정하여 이 변경 사항을 취소할 수 있습니다. -
IgxTimeXAxisComponent
및IgxOrdinalTimeXAxisComponent
에 대한 압축 레이블 지정 - 새 마커 속성:
- 시리즈.
markerFillMode
- 마커가 윤곽선에 따라 달라지도록MatchMarkerOutline
으로 설정할 수 있습니다. - 시리즈.
markerFillOpacity
- 0에서 1 사이의 값으로 설정할 수 있습니다. - 시리즈.
markerOutlineMode
-MatchMarkerBrush
로 설정할 수 있으므로 마커의 윤곽선이 채우기 브러시 색상에 따라 달라집니다.
- 시리즈.
- 새 시리즈 속성:
- 시리즈.
outlineMode
- 시리즈 개요 표시 여부를 전환하도록 설정할 수 있습니다. 데이터 차트의 경우 속성은 시리즈에 있습니다.
- 시리즈.
- 차트가 기본 확대/축소 수준일 때 뷰포트에 도입된 블리드 오버 영역을 정의하는 새로운 차트 속성입니다. 일반적인 사용 사례는 축과 첫 번째/마지막 데이터 포인트 사이에 공간을 제공하는 것입니다. 아래에 나열된
computedPlotAreaMarginMode
는 마커가 활성화되면 자동으로 여백을 설정합니다. 다른 것들은 두께를 나타내기 위해Double
을 지정하도록 설계되었으며 PlotAreaMarginLeft 등은 차트의 네 면 모두에 대한 공간을 조정합니다. - 새 하이라이트 속성
- 차트.
highlightingMode
- 호버링 또는 호버링되지 않은 시리즈를 희미하게 하거나 밝게 할지 여부를 설정합니다. - 차트.
highlightingBehavior
- 마우스 위치(예: 바로 위 항목 또는 가장 가까운 항목)에 따라 계열이 강조 표시되는지 여부를 설정합니다. - 참고로 이전 릴리스에서는 강조 표시가 호버 시 페이드되는 것으로 제한되었습니다.
- 차트.
- 스택형, 분산형, 극좌표, 방사형 및 도형 시리즈 강조 표시 추가:
- Stacked, Scatter, Polar, Radial 및 Shape 시리즈에 주석 레이어를 추가했습니다.
- 누적 시리즈 내에서 개별 스택 조각의 데이터 소스를 재정의하기 위한 지원이 추가되었습니다.
- Stacked, Scatter, Range, Polar, Radial 및 Shape 시리즈에 사용자 정의 스타일 이벤트 추가
- 세로 확대/축소를 시리즈 콘텐츠에 자동으로 동기화하는 지원 추가
- 표시된 초기 레이블을 기반으로 차트의 가로 여백을 자동으로 확장하는 지원이 추가되었습니다.
- 계열 및 마커의 재설계된 색상 팔레트:
오래된 브러시/윤곽선 | 새로운 아웃라인/브러시 |
---|---|
#7446B9 #9FB328 #F96232 #2E9CA6 #DC3F76 #FF9800 #3F51B5 #439C47 #795548 #9A9A9A |
#8bdc5c #8b5bb1 #6db1ff #f8a15f #ee5879 #735656 #f7d262 #8ce7d9 #e051a9 #a8a8b7 |
예를 들어:
![]() |
![]() |
![]() |
![]() |
차트 범례
- ItemLegend에 Bubble, Donut, 파이 차트와 함께 사용할 수 있는 horizontal
orientation
속성을 추가했습니다. - 추가
legendHighlightingMode
속성 - 범례 항목 위로 마우스를 가져갈 때 계열 강조 표시를 활성화합니다.
igniteui-angular-maps(GeoMap)
이러한 기능은 CTP
- 지도의 랩 어라운드 표시에 대한 지원 추가(가로 무한 스크롤)
- 좌표 원점을 둘러싸는 동안 일부 지도 시리즈의 디스플레이 이동에 대한 지원이 추가되었습니다.
- 도형 계열 강조 표시 지원 추가
- 모양 시리즈의 일부 주석 레이어에 대한 지원 추가
8.2.12
- 변경된 수입 명세서
API 클래스 및 열거형에 대한 전체 경로 대신 패키지 이름만 사용하도록 가져오기 문이 간소화되었습니다.
이러한 주요 변경 사항은 다음 패키지 및 구성 요소에만 도입되었습니다.
영향을 받는 패키지 | 영향을 받는 구성 요소 |
---|---|
igniteui-앵귤러-엑셀 | 엑셀 라이브러리 |
igniteui-앵귤러-스프레드시트 | 스프레드시트 |
igniteui-앵귤러-맵 | 지역 지도, 트리맵 |
igniteui-앵귤러-게이지 | 불릿 그래프, 선형 계기, 방사형 게이지 |
igniteui-앵귤러-차트 | 카테고리 차트, 데이터 차트, 도넛 차트, 금융 차트], 파이 차트, 확대/축소 슬라이더 |
igniteui-앵귤러-코어 | 모든 클래스와 열거형 |
- 변경 후 코드
이제 API 클래스 및 열거형에 대한 전체 경로 대신 패키지 이름만 사용해야 합니다.
Data Grid 구성 요소 및 해당 모듈의 이름도 변경되었습니다.
// gauges:
import { IgxLinearGauge } from "igniteui-angular-gauges";
import { IgxLinearGaugeModule } from "igniteui-angular-gauges";
import { IgxLinearGraphRange } from "igniteui-angular-gauges";
import { IgxRadialGauge } from 'igniteui-angular-gauges}';
import { IgxRadialGaugeModule } from 'igniteui-angular-gauges';
import { IgxRadialGaugeRange } from 'igniteui-angular-gauges';
import { SweepDirection } from 'igniteui-angular-core';
// charts:
import { IgxFinancialChartComponent } from "igniteui-angular-charts";
import { IgxFinancialChartModule } from "igniteui-angular-charts";
import { IgxDataChartComponent } from "igniteui-angular-charts";
import { IgxDataChartCoreModule } from "igniteui-angular-charts";
// maps:
import { IgxGeographicMapComponent } from "igniteui-angular-maps";
import { IgxGeographicMapModule } from "igniteui-angular-maps";
ts
- 변경 전 코드
이전에는 API 클래스 및 열거형에 대한 전체 경로를 사용하여 가져와야 했습니다.
// gauges:
import { IgxLinearGaugeComponent } from 'igniteui-angular-gauges/ES5/igx-linear-gauge-component';
import { IgxLinearGaugeModule } from 'igniteui-angular-gauges/ES5/igx-linear-gauge-module';
import { IgxLinearGraphRange } from 'igniteui-angular-gauges/ES5/igx-linear-graph-range';
import { IgxRadialGaugeComponent } from "igniteui-angular-gauges/ES5/igx-radial-gauge-component";
import { IgxRadialGaugeModule } from "igniteui-angular-gauges/ES5/igx-radial-gauge-module";
import { IgxRadialGaugeRange } from "igniteui-angular-gauges/ES5/igx-radial-gauge-range";
import { SweepDirection } from "igniteui-angular-core/ES5/SweepDirection";
// charts:
import { IgxFinancialChartComponent } from "igniteui-angular-charts/ES5/igx-financial-chart-component";
import { IgxFinancialChartModule } from "igniteui-angular-charts/ES5/igx-financial-chart-module";
import { IgxDataChartComponent } from "igniteui-angular-charts/ES5/igx-data-chart-component";
import { IgxDataChartCoreModule } from "igniteui-angular-charts/ES5/igx-data-chart-core-module";
// maps:
import { IgxGeographicMapComponent } from "igniteui-angular-maps/ES5/igx-geographic-map-component";
import { IgxGeographicMapModule } from "igniteui-angular-maps/ES5/igx-geographic-map-module";
ts