<divclass="container vertical sample"><divclass="legend-title">
Highest Grossing Movie Franchises
</div><divclass="container fill"><igx-category-chartname="chart"
#chartchartType="Column"
[dataSource]="highestGrossingMovies"toolTipType="Data"xAxisInterval="1"yAxisTitle="Billions of U.S. Dollars"yAxisTitleLeftMargin="10"yAxisTitleRightMargin="5"yAxisLabelLeftMargin="0"isHorizontalZoomEnabled="false"isVerticalZoomEnabled="false"crosshairsDisplayMode="None"isCategoryHighlightingEnabled="true"highlightingMode="FadeOthersSpecific"highlightingBehavior="NearestItemsAndSeries"></igx-category-chart></div></div>html
/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/scss
이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.
단위 열에는 약어 기호 및/또는 단위 텍스트가 표시되며, 이는 다음 중 하나에서 설정할 수 있습니다. 데이터툴팁 설정하여 dataToolTipUnitsText 모든 열에 대해 또는 차트의 각 계열에 대해 다음 속성을 사용합니다.
카테고리 계열(예: ColumnSeries)
ValueMemberAsLegendUnit="K"
금융 가격 시리즈:
OpenMemberAsLegendUnit="K"
LowMemberAsLegendUnit="K"
HighMemberAsLegendUnit="K"
CloseMemberAsLegendUnit="K"
Range Series:
LowMemberAsLegendUnit="K"
HighMemberAsLegendUnit="K"
Radial Series:
ValueMemberAsLegendUnit="km"
Polar Series:
RadiusMemberAsLegendUnit="km"
AngleMemberAsLegendUnit="degrees"
위에 나열된 속성의 경우 이전에 언급한 레이블 열의 텍스트를 결정하기 위해 MemberAsLegendLabel로 끝나는 해당 속성이 있습니다.
dataToolTipIncludedColumns 및 dataToolTipExcludedColumns 컬렉션에 포함된 열은 일반적으로 기본 데이터 항목의 값 경로에 해당하지만 금융 계열에는 High, Low, Open 및 Close 경로에 필요한 특수 경로를 포함하는 옵션이 있습니다. 금융 시리즈를 올바르게 플롯합니다. 툴팁 내에서 TypicalPrice, Change 및 Volume 옵션을 표시할 수 있습니다.
다음 예에서는 시가, 고가, 저가, 종가 및 변경 열이 추가된 데이터 도구 설명을 보여줍니다.
EXAMPLE
DATA
MODULES
TS
HTML
SCSS
//begin async dataexportclassMultipleStocksextendsArray<Array<StockItem>> {
publicstaticasync fetch(): Promise<MultipleStocks> {
const dataSources: any[] = [
//await this.getAmazonStock(),awaitthis.getGoogleStock(),
awaitthis.getAmazonStock(),
//await this.getTeslaStock()
];
returnnewPromise<MultipleStocks>((resolve, reject) => {
resolve(dataSources);
});
}
/** gets Amazon stock OHLC prices from a .JSON file */publicstaticasync getAmazonStock(): Promise<StockItem[]> {
let url = "https://static.infragistics.com/xplatform/data/stocks/stockAmazon.json";
let response = await fetch(url);
let jsonData = await response.json();
let stockData = this.convertData(jsonData);
// setting data intent for Series Title, e.g. FinancialChart usage
(stockData asany).__dataIntents = {
close: ["SeriesTitle/Amazon"]
};
// console.log("fetchAmazonStock: ", stockData.length);returnnewPromise<StockItem[]>((resolve, reject) => {
resolve(stockData);
});
}
/** gets Tesla stock OHLC prices from a .JSON file */publicstaticasync getTeslaStock(): Promise<StockItem[]> {
let url = "https://static.infragistics.com/xplatform/data/stocks/stockTesla.json";
let response = await fetch(url);
let jsonData = await response.json();
let stockData = this.convertData(jsonData);
// setting data intent for Series Title, e.g. FinancialChart usage
(stockData asany).__dataIntents = {
close: ["SeriesTitle/Tesla"]
};
returnnewPromise<StockItem[]>((resolve, reject) => {
resolve(stockData);
});
}
/** gets Microsoft stock OHLC prices from a .JSON file */publicstaticasync getMicrosoftStock(): Promise<StockItem[]> {
let url = "https://static.infragistics.com/xplatform/data/stocks/stockMicrosoft.json";
let response = await fetch(url);
let jsonData = await response.json();
let stockData = this.convertData(jsonData);
// setting data intent for Series Title, e.g. FinancialChart usage
(stockData asany).__dataIntents = {
close: ["SeriesTitle/Microsoft"]
};
returnnewPromise<StockItem[]>((resolve, reject) => {
resolve(stockData);
});
}
/** gets Google stock OHLC prices from a .JSON file */publicstaticasync getGoogleStock(): Promise<StockItem[]> {
let url = "https://static.infragistics.com/xplatform/data/stocks/stockGoogle.json";
let response = await fetch(url);
let jsonData = await response.json();
let stockData = this.convertData(jsonData);
// setting data intent for Series Title, e.g. FinancialChart usage
(stockData asany).__dataIntents = {
close: ["SeriesTitle/Google"]
};
returnnewPromise<StockItem[]>((resolve, reject) => {
resolve(stockData);
});
}
publicstatic convertData(jsonData: any[]): StockItem[] {
let stockItems: StockItem[] = [];
for (let json of jsonData) {
let parts = json.date.split("-"); // "2020-01-01"let item = new StockItem();
item.date = newDate(parts[0], parts[1], parts[2]);
item.open = json.open;
item.high = json.high;
item.low = json.low;
item.close = json.close;
item.volume = json.volume;
stockItems.push(item);
}
return stockItems;
}
}
exportclassStockItem{
public open?: number;
public close?: number;
public high?: number;
public low?: number;
public volume?: number;
public date?: Date;
}
//end async datats
/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/scss
데이터 차트 위한 Angular Data Tooltip 그룹화
dataLegendGroup 모든 유형의 시리즈에서 Data Legend에서 계열 그룹을 분류하는 문자열로 설정할 수 있습니다. 각 그룹에는 다른 계열 그룹이 표시되기 전에 표시되는 고유한 요약 행이 있습니다. 기본적으로 DataLegend는 그룹 이름을 숨기지만 속성을 true로 설정하여 groupRowVisible 그룹 이름을 표시할 수 있습니다. groupingMode "Grouped" labelDisplayMode로 설정되어야 하며 Data Tooltip Layer에서 "Visible"로 설정되어야 합니다.
<divclass="container vertical sample"><divclass="container fill"><igx-data-chartshouldAutoExpandMarginForInitialLabels="true"computedPlotAreaMarginMode="Series"name="chart"
#chart><igx-category-x-axisname="xAxis"
#xAxis
[dataSource]="olympicMedalsTopCountriesWithTotals"label="year"></igx-category-x-axis><igx-numeric-y-axisname="yAxis"
#yAxis></igx-numeric-y-axis><igx-column-seriesname="ColumnSeries1"
#columnSeries1
[xAxis]="xAxis"
[yAxis]="yAxis"
[dataSource]="olympicMedalsTopCountriesWithTotals"title="America"valueMemberPath="america"dataLegendGroup="Medals by Country"></igx-column-series><igx-column-seriesname="ColumnSeries2"
#columnSeries2
[xAxis]="xAxis"
[yAxis]="yAxis"
[dataSource]="olympicMedalsTopCountriesWithTotals"title="China"valueMemberPath="china"dataLegendGroup="Medals by Country"></igx-column-series><igx-column-seriesname="ColumnSeries3"
#columnSeries3
[xAxis]="xAxis"
[yAxis]="yAxis"
[dataSource]="olympicMedalsTopCountriesWithTotals"title="Russia"valueMemberPath="russia"dataLegendGroup="Medals by Country"></igx-column-series><igx-data-tool-tip-layername="dataToolTipLayer"
#dataToolTipLayergroupRowVisible="true"groupingMode="Grouped"></igx-data-tool-tip-layer></igx-data-chart></div></div>html
/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/scss
카테고리 차트 및 금융 차트 위한 Angular Data Tooltip 그룹화 및 위치 지정
dataToolTipGroupingMode 속성을 Grouped 또는 Individual로 설정하여 여러 시리즈의 콘텐츠를 단일 도구 설명으로 그룹화하거나 여러 도구 설명의 각 시리즈에 대한 별도의 콘텐츠를 그룹화할 수 있습니다. Grouped 모드에서는 dataToolTipGroupedPositionModeX 및 dataToolTipGroupedPositionModeY 속성을 설정하여 도구 설명이 표시되는 위치를 사용자 정의할 수 있습니다. 이를 통해 기본적으로 도구 설명의 가로 및 세로 정렬을 사용자 정의할 수 있으며 도구 설명이 마우스 위치에 가장 가까운 계열 포인트를 추적할지 아니면 도구 설명을 플롯 영역 가장자리에 고정할지 여부를 지정할 수 있습니다.
<divclass="container vertical sample"><divclass="legend-title">
Highest Grossing Movie Franchises
</div><divclass="container fill"><igx-category-chartname="chart"
#chartchartType="Column"
[dataSource]="highestGrossingMovies"toolTipType="Data"dataToolTipUnitsText="B"dataToolTipValueFormatMode="Decimal"dataToolTipValueFormatMinFractions="2"xAxisInterval="1"yAxisTitle="Billions of U.S. Dollars"yAxisTitleLeftMargin="10"yAxisTitleRightMargin="5"yAxisLabelLeftMargin="0"isCategoryHighlightingEnabled="true"crosshairsDisplayMode="None"highlightingMode="FadeOthersSpecific"highlightingBehavior="NearestItemsAndSeries"></igx-category-chart></div></div>html
/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/scss