Angular 확대 슬라이더 개요
Angular ZoomSlider 컨트롤은 범위 활성화 컨트롤에 확대 기능을 제공합니다. ZoomSlider는 가로 스크롤 막대, 전체 범위의 축소판, 크기 조절이 가능한 확대 범위 창을 제공합니다. ZoomSlider는 독립형 컨트롤로 작동할 수 없으며 DataChart 또는 CategoryChart와 같은 범위 기반 컨트롤의 향상 기능으로 작동합니다.
Angular 확대 슬라이더 예제
다음 샘플은 IgxZoomSliderComponent
사용하여 IgxDataChartComponent
의 콘텐츠를 탐색하는 방법을 보여줍니다.
import { Injectable } from "@angular/core";
@Injectable()
export class SampleScatterStats {
public static countries: Country[];
public static getCountries(count?: number): any[] {
if (this.countries === undefined) {
this.countries = this.initData();
}
if (count === undefined) {
count = 1000;
}
const items: Country[] = [];
for (let i = 0; i < this.countries.length; i++) {
const country = this.countries[i];
if (i < count) {
items.push(country);
}
}
// items = items.sort(this.sortByPopDescending);
return items;
}
public static getCountriesWithHighIncome(): any[] {
if (this.countries === undefined) {
this.countries = this.initData();
}
const items: any[] = [];
for (const country of this.countries) {
if (country.gdpPerCapita >= 10000) {
items.push(country);
}
}
return items;
}
public static getCountriesWithLowIncome(): any[] {
if (this.countries === undefined) {
this.countries = this.initData();
}
const items: any[] = [];
for (const country of this.countries) {
if (country.gdpPerCapita < 10000) {
items.push(country);
}
}
return items;
}
public static getCountriesWithLargePop(): any[] {
if (this.countries === undefined) {
this.countries = this.initData();
}
const items: any[] = [];
for (const country of this.countries) {
if (country.population >= 10000000) {
items.push(country);
}
}
return items;
}
public static getCountriesWithSmallPop(): any[] {
if (this.countries === undefined) {
this.countries = this.initData();
}
const items: any[] = [];
for (const country of this.countries) {
if (country.population < 10000000) {
items.push(country);
}
}
return items;
}
public static sortByPopDescending(a: Country, b: Country) {
if (a.population > b.population) { return 1; }
if (a.population < b.population) { return -1; }
return 0;
}
public static sortByPopAscending(a: Country, b: Country) {
if (a.population > b.population) { return -1; }
if (a.population < b.population) { return 1; }
return 0;
}
public static sortByGdpAscending(a: Country, b: Country) {
if (a.gdpPerCapita > b.gdpPerCapita) { return -1; }
if (a.gdpPerCapita < b.gdpPerCapita) { return 1; }
return 0;
}
public static sortByGdpDescending(a: Country, b: Country) {
if (a.gdpPerCapita > b.gdpPerCapita) { return 1; }
if (a.gdpPerCapita < b.gdpPerCapita) { return -1; }
return 0;
}
public static sortByDepDescending(a: Country, b: Country) {
if (a.dptPerCapita > b.dptPerCapita) { return 1; }
if (a.dptPerCapita < b.dptPerCapita) { return -1; }
return 0;
}
public static sortByDptAscending(a: Country, b: Country) {
if (a.dptPerCapita > b.dptPerCapita) { return -1; }
if (a.dptPerCapita < b.dptPerCapita) { return 1; }
return 0;
}
public static initData(): Country[] {
let data: Country[] = [];
// Code, Population, GDP per Capita, Debt per Capita, Mobile Phones (per 100 people), Name, Region
data.push(new Country("AFG", 29824536, 688, 92, 46, "Afghanistan", "Asia"));
data.push(new Country("ALB", 2801681, 4406, 882, 86, "Albania", "Europe"));
data.push(new Country("DZA", 38481705, 5310, 115, 88, "Algeria", "Africa"));
data.push(new Country("ADO", 78360, 40365, 15212, 84, "Andorra", "Europe"));
data.push(new Country("AGO", 20820525, 5539, 944, 48, "Angola", "Africa"));
data.push(new Country("ATG", 89069, 13406, 4388, 193, "Antigua and Barbuda", "North America"));
data.push(new Country("ARG", 41086927, 14680, 7759, 141, "Argentina", "South America"));
data.push(new Country("ARM", 2969081, 3354, 1584, 130, "Armenia", "Asia"));
data.push(new Country("ABW", 102384, 0, 4935, 130, "Aruba", "South America"));
data.push(new Country("AUS", 22723900, 67436, 52596, 100, "Australia", "Oceania"));
data.push(new Country("AUT", 8429991, 46792, 90128, 146, "Austria", "Europe"));
data.push(new Country("AZE", 9295784, 7394, 8513, 100, "Azerbaijan", "Asia"));
data.push(new Country("BHS", 371960, 21908, 1067, 119, "Bahamas", "North America"));
data.push(new Country("BHR", 1317827, 23040, 13261, 125, "Bahrain", "Asia"));
data.push(new Country("BGD", 154695368, 750, 149, 45, "Bangladesh", "Asia"));
data.push(new Country("BRB", 283221, 14917, 2456, 125, "Barbados", "North America"));
data.push(new Country("BLR", 9464000, 6722, 2629, 109, "Belarus", "Europe"));
data.push(new Country("BEL", 11128246, 43396, 113603, 111, "Belgium", "Europe"));
data.push(new Country("BLZ", 324060, 4852, 3079, 63, "Belize", "North America"));
data.push(new Country("BEN", 10050702, 751, 308, 74, "Benin", "Asia"));
data.push(new Country("BMU", 64798, 84471, 2575, 136, "Bermuda", "North America"));
data.push(new Country("BTN", 741822, 2509, 1193, 55, "Bhutan", "Asia"));
data.push(new Country("BOL", 10496285, 2576, 275, 71, "Bolivia", "South America"));
data.push(new Country("BIH", 3833916, 4396, 2052, 81, "Bosnia and Herzegovina", "Europe"));
data.push(new Country("BWA", 2003910, 7255, 1208, 120, "Botswana", "Africa"));
data.push(new Country("BRA", 198656019, 11320, 1608, 101, "Brazil", "South America"));
data.push(new Country("BRN", 412238, 41127, 0, 109, "Brunei", "Oceania"));
data.push(new Country("BGR", 7305888, 7022, 6261, 138, "Bulgaria", "Europe"));
data.push(new Country("BFA", 16460141, 652, 136, 37, "Burkina Faso", "Africa"));
data.push(new Country("BDI", 9849569, 251, 167, 18, "Burundi", "Africa"));
data.push(new Country("CPV", 494401, 3554, 714, 76, "Cabo Verde", "Africa"));
data.push(new Country("KHM", 14864646, 945, 304, 57, "Cambodia", "Asia"));
data.push(new Country("CMR", 21699631, 1220, 164, 42, "Cameroon", "Africa"));
data.push(new Country("CAN", 34754312, 52409, 29625, 76, "Canada", "North America"));
data.push(new Country("CYM", 57570, 0, 2078, 181, "Cayman Islands", "North America"));
data.push(new Country("CAF", 4525209, 479, 270, 23, "Central African Republic", "Africa"));
data.push(new Country("TCD", 12448175, 1035, 160, 25, "Chad", "Africa"));
data.push(new Country("CHL", 17464814, 15245, 5867, 116, "Chile", "South America"));
data.push(new Country("CHN", 1350695000, 6093, 2221, 63, "China", "Asia"));
data.push(new Country("COL", 47704427, 7763, 1269, 96, "Colombia", "South America"));
data.push(new Country("COM", 717503, 831, 430, 24, "Comoros", "Africa"));
data.push(new Country("ZAR", 65705093, 418, 197, 19, "Congo Dem. Rep.", "Africa"));
data.push(new Country("COG", 4337051, 3154, 1722, 90, "Congo Rep.", "Africa"));
data.push(new Country("CRI", 4805295, 9443, 1874, 67, "Costa Rica", "North America"));
data.push(new Country("CIV", 19839750, 1244, 527, 82, "Cote d'Ivoire", "Africa"));
data.push(new Country("HRV", 4267558, 13159, 13519, 114, "Croatia", "Europe"));
data.push(new Country("CUB", 11270957, 0, 1780, 9, "Cuba", "North America"));
data.push(new Country("CUW", 152056, 0, 0, 138, "Curacao", "North America"));
data.push(new Country("CYP", 1128994, 26352, 37812, 94, "Cyprus", "Europe"));
data.push(new Country("CZE", 10510785, 18690, 8260, 123, "Czech Republic", "Europe"));
data.push(new Country("DNK", 5591572, 56364, 101084, 116, "Denmark", "Europe"));
data.push(new Country("DJI", 859652, 1575, 573, 20, "Djibouti", "Africa"));
data.push(new Country("DMA", 71684, 6913, 3000, 148, "Dominica", "North America"));
data.push(new Country("DOM", 10276621, 5733, 1162, 89, "Dominican Republic", "North America"));
data.push(new Country("ECU", 15492264, 5425, 995, 99, "Ecuador", "South America"));
data.push(new Country("EGY", 80721874, 3256, 391, 91, "Egypt", "Africa"));
data.push(new Country("SLV", 6297394, 3782, 1953, 124, "El Salvador", "North America"));
data.push(new Country("GNQ", 736296, 22391, 634, 57, "Equatorial Guinea", "Africa"));
data.push(new Country("ERI", 6130922, 504, 195, 3, "Eritrea", "Africa"));
data.push(new Country("EST", 1325016, 16887, 16944, 127, "Estonia", "Europe"));
data.push(new Country("ETH", 91728849, 467, 51, 8, "Ethiopia", "Africa"));
data.push(new Country("EUU", 505640311, 32917, 0, 118, "Euroean Union", "Europe"));
data.push(new Country("FRO", 49506, 0, 0, 120, "Faeroe Islands", "Europe"));
data.push(new Country("FJI", 874742, 4613, 150, 81, "Fiji", "Oceania"));
data.push(new Country("FIN", 5413971, 45649, 68960, 156, "Finland", "Europe"));
data.push(new Country("FRA", 65676758, 39759, 74619, 91, "France", "Europe"));
data.push(new Country("GAB", 1632572, 10930, 1587, 103, "Gabon", "Africa"));
data.push(new Country("GMB", 1791225, 510, 306, 88, "Gambia", "Africa"));
data.push(new Country("GEO", 4490700, 3529, 1940, 91, "Georgia", "Asia"));
data.push(new Country("DEU", 80425823, 42598, 57755, 106, "Germany", "Europe"));
data.push(new Country("GHA", 25366462, 1646, 274, 72, "Ghana", "Africa"));
data.push(new Country("GRC", 11092771, 22395, 47636, 111, "Greece", "Europe"));
data.push(new Country("GRL", 56810, 0, 1035, 101, "Greenland", "Europe"));
data.push(new Country("GRD", 105483, 7598, 3402, 116, "Grenada", "North America"));
data.push(new Country("GTM", 15082831, 3341, 1216, 126, "Guatemala", "North America"));
data.push(new Country("GIN", 11451273, 493, 305, 37, "Guinea", "Asia"));
data.push(new Country("GNB", 1663558, 494, 722, 43, "Guinea-Bissau", "Asia"));
data.push(new Country("GUY", 795369, 3585, 1049, 71, "Guyana", "South America"));
data.push(new Country("HTI", 10173775, 776, 36, 40, "Haiti", "North America"));
data.push(new Country("HND", 7935846, 2339, 465, 125, "Honduras", "North America"));
data.push(new Country("HKG", 7154600, 36708, 105420, 196, "Hong Kong", "Asia"));
data.push(new Country("HUN", 9920362, 12560, 14821, 120, "Hungary", "Europe"));
data.push(new Country("ISL", 320716, 42362, 362942, 107, "Iceland", "Europe"));
data.push(new Country("IND", 1236686732, 1503, 240, 62, "India", "Asia"));
data.push(new Country("IDN", 246864191, 3551, 837, 88, "Indonesia", "Asia"));
data.push(new Country("IRN", 76424443, 6578, 170, 73, "Iran", "Asia"));
data.push(new Country("IRQ", 32578209, 6625, 1641, 75, "Iraq", "Asia"));
data.push(new Country("IRL", 4586897, 45922, 512083, 105, "Ireland", "Europe"));
data.push(new Country("ISR", 7910500, 32567, 12070, 123, "Israel", "Asia"));
data.push(new Country("ITA", 59539717, 33814, 36841, 155, "Italy", "Europe"));
data.push(new Country("JAM", 2707805, 5464, 4660, 116, "Jamaica", "North America"));
data.push(new Country("JPN", 127561489, 46548, 24000, 97, "Japan", "Asia"));
data.push(new Country("JOR", 6318000, 4909, 903, 103, "Jordan", "Asia"));
data.push(new Country("KAZ", 16791425, 12120, 6060, 122, "Kazakhstan", "Asia"));
data.push(new Country("KEN", 43178141, 933, 200, 61, "Kenya", "Africa"));
data.push(new Country("KIR", 100786, 1736, 120, 11, "Kiribati", "Oceania"));
data.push(new Country("PRK", 24763188, 0, 544, 2, "Korea North", "Asia"));
data.push(new Country("KOR", 50004441, 24454, 7567, 105, "Korea South", "Asia"));
data.push(new Country("KSV", 1807106, 3567, 0, 0, "Kosovo", "Europe"));
data.push(new Country("KWT", 3250496, 56367, 15754, 133, "Kuwait", "Asia"));
data.push(new Country("KGZ", 5607200, 1178, 699, 99, "Kyrgyzstan", "Asia"));
data.push(new Country("LAO", 6645827, 1412, 900, 63, "Laos", "Asia"));
data.push(new Country("LVA", 2034319, 13947, 18527, 110, "Latvia", "Europe"));
data.push(new Country("LBN", 4424888, 9764, 8815, 66, "Lebanon", "Asia"));
data.push(new Country("LSO", 2051545, 1135, 255, 49, "Lesotho", "Africa"));
data.push(new Country("LBR", 4190435, 414, 65, 40, "Liberia", "Africa"));
data.push(new Country("LBY", 6154623, 13303, 972, 180, "Libya", "Africa"));
data.push(new Country("LIE", 36656, 0, 0, 98, "Liechtenstein", "Europe"));
data.push(new Country("LTU", 2987773, 14172, 9995, 159, "Lithuania", "Europe"));
data.push(new Country("LUX", 530946, 103859, 3696467, 143, "Luxembourg", "Europe"));
data.push(new Country("MAC", 556783, 77196, 0, 210, "Macao", "Asia"));
data.push(new Country("MKD", 2105575, 4548, 2668, 102, "Macedonia", "Europe"));
data.push(new Country("MDG", 22293914, 443, 140, 37, "Madagascar", "Africa"));
data.push(new Country("MWI", 15906483, 267, 77, 21, "Malawi", "Africa"));
data.push(new Country("MYS", 29239927, 10432, 2570, 120, "Malaysia", "Asia"));
data.push(new Country("MDV", 338442, 6244, 2947, 152, "Maldives", "Oceania"));
data.push(new Country("MLI", 14853572, 696, 254, 53, "Mali", "Africa"));
data.push(new Country("MLT", 419455, 20839, 14233, 107, "Malta", "Europe"));
data.push(new Country("MHL", 52555, 3292, 1377, 0, "Marshall Islands", "Oceania"));
data.push(new Country("MRT", 3796141, 1043, 831, 77, "Mauritania", "Africa"));
data.push(new Country("MUS", 1291167, 8862, 3937, 97, "Mauritius", "Africa"));
data.push(new Country("MEX", 120847477, 9818, 1956, 78, "Mexico", "North America"));
data.push(new Country("FSM", 103395, 3155, 556, 27, "Micronesia", "Oceania"));
data.push(new Country("MDA", 3559519, 2047, 1296, 71, "Moldova", "Europe"));
data.push(new Country("MCO", 37579, 0, 471428, 64, "Monaco", "Europe"));
data.push(new Country("MNG", 2796484, 3691, 686, 93, "Mongolia", "Asia"));
data.push(new Country("MNE", 621081, 6514, 939, 189, "Montenegro", "Europe"));
data.push(new Country("MAR", 32521143, 2902, 712, 101, "Morocco", "Africa"));
data.push(new Country("MOZ", 25203395, 570, 231, 30, "Mozambique", "Africa"));
data.push(new Country("MMR", 52797319, 0, 117, 1, "Myanmar", "Asia"));
data.push(new Country("NAM", 2259393, 5931, 1131, 90, "Namibia", "Africa"));
data.push(new Country("NPL", 27474377, 699, 161, 34, "Nepal", "Asia"));
data.push(new Country("NLD", 16754962, 45961, 226503, 115, "Netherlands", "Europe"));
data.push(new Country("NCL", 258000, 0, 385, 90, "New Caledonia", "Oceania"));
data.push(new Country("NZL", 4433000, 38680, 52300, 108, "New Zealand", "Oceania"));
data.push(new Country("NIC", 5991733, 1777, 693, 68, "Nicaragua", "North America"));
data.push(new Country("NER", 17157042, 395, 178, 23, "Niger", "Africa"));
data.push(new Country("NGA", 168833776, 2722, 71, 55, "Nigeria", "Africa"));
data.push(new Country("NAC", 348692795, 51826, 0, 90, "North America", "North America"));
data.push(new Country("NOR", 5018573, 99636, 131220, 114, "Norway", "Europe"));
data.push(new Country("OMN", 3314001, 23624, 2962, 164, "Oman", "Asia"));
data.push(new Country("PAK", 179160111, 1255, 366, 57, "Pakistan", "Asia"));
data.push(new Country("PLW", 20754, 11202, 0, 71, "Palau", "Oceania"));
data.push(new Country("PAN", 3802281, 9982, 3927, 181, "Panama", "North America"));
data.push(new Country("PNG", 7167010, 2184, 238, 28, "Papua New Guinea", "Oceania"));
data.push(new Country("PRY", 6687361, 3680, 382, 92, "Paraguay", "South America"));
data.push(new Country("PER", 29987800, 6424, 1126, 100, "Peru", "South America"));
data.push(new Country("PHL", 96706764, 2587, 636, 89, "Philippines", "Asia"));
data.push(new Country("POL", 38535873, 12721, 6586, 123, "Poland", "Europe"));
data.push(new Country("PRT", 10514844, 20175, 47835, 115, "Portugal", "Europe"));
data.push(new Country("PRI", 3651545, 27795, 15692, 79, "Puerto Rico", "North America"));
data.push(new Country("QAT", 2050514, 92633, 41988, 125, "Qatar", "Asia"));
data.push(new Country("ROM", 20076727, 8437, 5082, 111, "Romania", "Europe"));
data.push(new Country("RUS", 143178000, 14091, 3634, 166, "Russian", "Asia"));
data.push(new Country("RWA", 11457801, 623, 284, 33, "Rwanda", "Africa"));
data.push(new Country("WSM", 188889, 3623, 968, 0, "Samoa", "Oceania"));
data.push(new Country("SMR", 31247, 0, 8388, 99, "San Marino", "Europe"));
data.push(new Country("STP", 188098, 1400, 2193, 58, "Sao Tome and Principe", "Oceania"));
data.push(new Country("SAU", 28287855, 25946, 3176, 189, "Saudi Arabia", "Asia"));
data.push(new Country("SEN", 13726021, 1023, 296, 64, "Senegal", "Africa"));
data.push(new Country("SRB", 7199077, 5294, 4178, 125, "Serbia", "Europe"));
data.push(new Country("SYC", 88303, 11689, 15614, 129, "Seychelles", "Africa"));
data.push(new Country("SLE", 5978727, 633, 340, 35, "Sierra Leone", "Africa"));
data.push(new Country("SGP", 5312400, 54007, 0, 145, "Singapore", "Asia"));
data.push(new Country("SVK", 5407579, 16893, 10926, 109, "Slovakia", "Europe"));
data.push(new Country("SVN", 2057159, 22059, 25555, 103, "Slovenia", "Europe"));
data.push(new Country("SLB", 549598, 1819, 355, 22, "Solomon Islands", "Oceania"));
data.push(new Country("SOM", 10195134, 0, 386, 7, "Somalia", "Africa"));
data.push(new Country("ZAF", 52274945, 7314, 1613, 98, "South Africa", "Africa"));
data.push(new Country("SAS", 1649249388, 1396, 0, 60, "South Asia", "South Asia"));
data.push(new Country("SSD", 10837527, 974, 0, 0, "South Sudan", "Africa"));
data.push(new Country("ESP", 46761264, 28282, 52045, 111, "Spain", "Europe"));
data.push(new Country("LKA", 20328000, 2922, 881, 84, "Sri Lanka", "Asia"));
data.push(new Country("KNA", 53584, 13658, 6408, 153, "St. Kitts and Nevis", "North America"));
data.push(new Country("LCA", 180870, 7288, 1586, 112, "St. Lucia", "North America"));
data.push(new Country("VCT", 109373, 6349, 4477, 121, "St. Vincent and the Grenadines", "North America"));
data.push(new Country("SXM", 30959, 0, 0, 0, "Sint Maarten", "North America"));
data.push(new Country("SDN", 37195349, 1695, 946, 42, "Sudan", "Africa"));
data.push(new Country("SUR", 534541, 9376, 1011, 99, "Suriname", "South America"));
data.push(new Country("SWZ", 1230985, 3290, 428, 61, "Swaziland", "Africa"));
data.push(new Country("SWE", 9519374, 55039, 91487, 117, "Sweden", "Europe"));
data.push(new Country("CHE", 7996861, 78929, 154063, 123, "Switzerland", "Europe"));
data.push(new Country("SYR", 22399254, 0, 373, 54, "Syria", "Asia"));
data.push(new Country("TJK", 8008990, 953, 262, 78, "Tajikistan", "Asia"));
data.push(new Country("TZA", 47783107, 609, 183, 47, "Tanzania", "Africa"));
data.push(new Country("THA", 66785001, 5480, 1292, 108, "Thailand", "Asia"));
data.push(new Country("TMP", 1148958, 1179, 0, 44, "East Timor", "Oceania"));
data.push(new Country("TGO", 6642928, 589, 0, 41, "Togo", "Africa"));
data.push(new Country("TON", 104941, 4494, 799, 52, "Tonga", "Africa"));
data.push(new Country("TTO", 1337439, 17523, 3502, 143, "Trinidad and Tobago", "North America"));
data.push(new Country("TUN", 10777500, 4197, 1779, 105, "Tunisia", "Africa"));
data.push(new Country("TUR", 73997128, 10661, 3794, 86, "Turkey", "Asia"));
data.push(new Country("TKM", 5172931, 6798, 978, 63, "Turkmenistan", "Asia"));
data.push(new Country("TUV", 9860, 4044, 0, 16, "Tuvalu", "Oceania"));
data.push(new Country("UGA", 36345860, 551, 85, 38, "Uganda", "Africa"));
data.push(new Country("UKR", 45593300, 3873, 2144, 117, "Ukraine", "Europe"));
data.push(new Country("ARE", 9205651, 41692, 24273, 129, "United Arab Emirates", "Asia"));
data.push(new Country("GBR", 63695687, 38649, 160158, 124, "United Kingdom", "Europe"));
data.push(new Country("USA", 313873685, 51755, 52170, 91, "United States", "North America"));
data.push(new Country("URY", 3395253, 14728, 3989, 132, "Uruguay", "South America"));
data.push(new Country("UZB", 29774500, 1719, 150, 76, "Uzbekistan", "Asia"));
data.push(new Country("VUT", 247262, 3183, 389, 72, "Vanuatu", "Oceania"));
data.push(new Country("VEN", 29954782, 12729, 1906, 96, "Venezuela", "South America"));
data.push(new Country("VNM", 88772900, 1755, 379, 125, "Vietnam", "Asia"));
data.push(new Country("WBG", 4046901, 2530, 414, 65, "Palestine", "Asia"));
data.push(new Country("YEM", 23852409, 1341, 293, 49, "Yemen Rep.", "Asia"));
data.push(new Country("ZMB", 14075099, 1463, 264, 41, "Zambia", "Africa"));
data.push(new Country("ZWE", 13724317, 909, 609, 59, "Zimbabwe", "Africa"));
// data = data.sort(this.sortByPopAscending);
data = data.sort(this.sortByPopDescending);
const countries: Country[] = [];
for (const country of data) {
if (country.isValid()) {
countries.push(country);
}
}
return countries;
}
public static abbreviate(value: number): string {
const suffixes = ["", "K", "M", "B", "T"];
const suffixNum = Math.floor(("" + value).length / 3);
const shortValue = parseFloat((suffixNum !== 0 ? (value / Math.pow(1000, suffixNum)) : value).toFixed(1));
return shortValue + suffixes[suffixNum];
}
}
class Country {
public population: number;
public gdpPerCapita: number;
public gdpTotal: number;
public dptPerCapita: number;
public phonePer100: number;
public code: string;
public name: string;
public region: string;
constructor(code: string, pop: number, gdp: number, dpt: number, phones: number, name: string, region: string) {
this.code = code;
this.region = region;
this.name = name;
this.population = pop;
this.gdpPerCapita = gdp;
this.gdpTotal = gdp * pop;
this.dptPerCapita = dpt;
this.phonePer100 = phones;
}
public getPopulation(): string {
return SampleScatterStats.abbreviate(this.population);
}
public getGdpTotal(): string {
return SampleScatterStats.abbreviate(this.gdpTotal);
}
public getGdpPerCapita(): string {
return SampleScatterStats.abbreviate(this.gdpPerCapita);
}
public isValid(): boolean {
return this.gdpPerCapita > 0 && this.population > 0 &&
this.dptPerCapita > 0 && this.phonePer100 > 0;
}
}
tsimport { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { IgxZoomSliderDynamicModule, IgxNumericYAxisModule, IgxNumericXAxisModule, IgxCrosshairLayerModule, IgxDataChartScatterModule, IgxDataChartScatterCoreModule, IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartCategoryCoreModule, IgxDataChartAnnotationModule, IgxDataChartInteractivityModule, IgxBubbleSeriesModule } from "igniteui-angular-charts";
import { IgxNumberAbbreviatorModule } from "igniteui-angular-charts";
import { SampleScatterStats } from "./SampleScatterStats";
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent,
],
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxZoomSliderDynamicModule,
IgxNumberAbbreviatorModule,
IgxNumericYAxisModule,
IgxNumericXAxisModule,
IgxCrosshairLayerModule,
IgxDataChartScatterModule,
IgxDataChartScatterCoreModule,
IgxDataChartCoreModule,
IgxDataChartCategoryModule,
IgxDataChartCategoryCoreModule,
IgxDataChartAnnotationModule,
IgxDataChartInteractivityModule,
IgxBubbleSeriesModule
],
providers: [SampleScatterStats],
schemas: []
})
export class AppModule {}
ts// tslint:disable:max-line-length
import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core";
import { IgxBubbleSeriesComponent } from "igniteui-angular-charts";
import { IgxDataChartComponent } from "igniteui-angular-charts";
import { IgxNumericXAxisComponent } from "igniteui-angular-charts";
import { IgxNumericYAxisComponent } from "igniteui-angular-charts";
import { IgxSizeScaleComponent } from "igniteui-angular-charts";
import { IgxZoomSliderComponent } from "igniteui-angular-charts";
import { MarkerType } from "igniteui-angular-charts";
import { IgRect } from "igniteui-angular-core";
import { IgxRectChangedEventArgs } from "igniteui-angular-core";
import { SampleScatterStats } from "./SampleScatterStats";
@Component({
standalone: false,
providers: [ SampleScatterStats ],
selector: "app-root",
styleUrls: ["./app.component.scss"],
templateUrl: "./app.component.html"
})
export class AppComponent implements AfterViewInit {
public charts: IgxDataChartComponent[] = [];
@ViewChild("mainChart", { static: true })
public mainChart: IgxDataChartComponent = null;
@ViewChild("zoomChart", { static: true })
public zoomChart: IgxDataChartComponent = null;
@ViewChild("zoomSlider", { static: true })
public zoomSlider: IgxZoomSliderComponent = null;
@ViewChild("seriesTooltip", { static: true })
public seriesTooltip: TemplateRef<any>;
@ViewChild("container", { static: true })
public container: HTMLDivElement;
public isSynchronizingZoom: boolean = false;
public lastRect: IgRect = { left: -1, top: -1, width: -1, height: -1};
public regions: any[];
public countriesAll: any[];
public countriesByRegion: any;
constructor(private dataService: SampleScatterStats) {
this.regions = [];
this.countriesAll = SampleScatterStats.getCountries();
this.countriesByRegion = {};
for (const country of this.countriesAll) {
const name = country.region;
if (!this.countriesByRegion[name]) {
this.countriesByRegion[name] = [];
this.regions.push(name);
console.log("region " + name);
}
this.countriesByRegion[name].push(country);
}
}
public ngAfterViewInit(): void {
if (this.mainChart !== undefined || this.container !== undefined) {
// console.log("ngAfterViewInit mainChart");
this.createSeries(this.mainChart);
this.mainChart.actualWindowRectChanged.subscribe((e: IgxRectChangedEventArgs) =>
this.onActualWindowRectChanged(this.mainChart, e)
);
this.charts.push(this.mainChart);
}
if (this.zoomChart !== undefined) {
// console.log("ngAfterViewInit zoomChart");
this.createSeries(this.zoomChart);
}
if (this.zoomSlider !== undefined) {
// console.log("ngAfterViewInit zoomSlider");
this.zoomSlider.windowRectChanged.subscribe((e: IgxRectChangedEventArgs) =>
this.onZoomSliderWindowChanged(this.zoomSlider, e)
);
this.zoomSlider.resolvingAxisValue.subscribe((e: IgxRectChangedEventArgs) =>
this.onZoomSliderResolveAxisValue(this.zoomSlider, e)
);
}
if (this.mainChart !== undefined ||
this.container !== undefined ||
this.zoomChart !== undefined ||
this.zoomSlider !== undefined) {
this.mainChart.gridAreaRectChanged.subscribe((e: IgxRectChangedEventArgs) =>
this.onGridAreaRectChanged(this.mainChart, e)
);
}
}
public onActualWindowRectChanged(chart: IgxDataChartComponent, args: IgxRectChangedEventArgs) {
if (!this.isSynchronizingZoom) {
this.syncZooms(chart);
}
}
public onZoomSliderWindowChanged(slider: IgxZoomSliderComponent, args: IgxRectChangedEventArgs) {
if (!this.isSynchronizingZoom) {
this.syncZooms(slider);
}
}
public syncZooms(sender: any) {
window.setTimeout(() => {
try {
this.isSynchronizingZoom = true;
const zoomWindow = this.zoomSlider.windowRect;
const datanChart = sender as IgxDataChartComponent;
let chartWindow: any;
if (sender === this.zoomSlider) {
chartWindow = this.mainChart.actualWindowRect;
} else {
chartWindow = datanChart.actualWindowRect;
}
// console.log("chart " + this.getRect(this.mainChart.actualWindowRect));
// console.log("zoom " + this.getRect(zoomWindow));
if (sender === this.zoomSlider) {
this.charts.map((chart) => {
this.updateChartZoom(chart, {
top: chartWindow.top,
left: zoomWindow.left,
width: zoomWindow.width,
height: chartWindow.height });
});
} else {
this.zoomSlider.windowRect = {
top: zoomWindow.top,
left: chartWindow.left,
width: chartWindow.width,
height: zoomWindow.height };
this.charts.map((chart) => {
this.updateChartZoom(chart, {
top: zoomWindow.top,
left: chartWindow.left,
width: chartWindow.width,
height: zoomWindow.height });
});
}
} finally {
this.isSynchronizingZoom = false;
}
}, 0);
}
public onZoomSliderResolveAxisValue(slider: IgxZoomSliderComponent, args: any) {
// console.log("onZoomSliderResolveAxisValue");
const index = Math.round(args.position * (this.countriesAll.length - 1));
const item = this.countriesAll[index];
if (item) {
args.value = SampleScatterStats.abbreviate(item.population);
}
}
public onGridAreaRectChanged(chart: IgxDataChartComponent, e: any) {
const newRect = e.args.newRect;
if (!this.container) {
return;
}
if (newRect.left !== this.lastRect.left ||
newRect.top !== this.lastRect.top ||
newRect.width !== this.lastRect.width ||
newRect.height !== this.lastRect.height) {
let rightMargin = this.mainChart.rightMargin;
if (isNaN(rightMargin)) {
rightMargin = this.mainChart.autoMarginWidth;
}
const width = newRect.left + newRect.width + rightMargin;
const right = newRect.left + newRect.width;
const insetLeft = newRect.left;
const insetRight = width - right;
this.lastRect = newRect;
this.zoomSlider.startInset = insetLeft - this.zoomSlider.trackStartInset;
this.zoomSlider.endInset = insetRight - this.zoomSlider.trackEndInset;
if (this.zoomSlider.endInset < 0) {
const inset = this.zoomSlider.endInset;
this.zoomSlider.endInset = 0;
this.charts.map(c => c.rightMargin += (inset * -1.0));
}
if (this.zoomSlider.startInset < 0) {
const inset = this.zoomSlider.startInset;
this.zoomSlider.startInset = 0;
this.charts.map(c => c.leftMargin += (inset * -1.0));
}
this.zoomChart.leftMargin = insetLeft;
this.zoomChart.rightMargin = insetRight;
this.zoomChart.bottomMargin = this.zoomSlider.barExtent;
}
}
public updateChartZoom(chart: IgxDataChartComponent, zoom: IgRect) {
const yAxis = chart.actualAxes.filter(a => a.isNumeric)[0] as IgxNumericYAxisComponent;
let indexEnd = Math.ceil((this.countriesAll.length - 1) * (zoom.left + zoom.width));
let indexStart = Math.floor((this.countriesAll.length - 1) * zoom.left);
let min = Number.MAX_VALUE;
let max = Number.MIN_VALUE;
if (indexStart < 0) {
indexStart = 0;
}
indexEnd = Math.min(indexEnd, this.countriesAll.length - 1);
for (let i = indexStart; i <= indexEnd; i++) {
min = Math.min(min, this.countriesAll[i].gdpTotal);
max = Math.max(max, this.countriesAll[i].gdpTotal);
}
// console.log("data min " + min + " max " + max);
// console.log("axis min " + yAxis.actualMinimumValue + " max " + yAxis.actualMaximumValue);
const yMin = (min - yAxis.actualMinimumValue) / (yAxis.actualMaximumValue - yAxis.actualMinimumValue);
const yMax = (max - yAxis.actualMinimumValue) / (yAxis.actualMaximumValue - yAxis.actualMinimumValue);
const newZoom = {
left: zoom.left,
width: zoom.width,
top: (1.0 - yMax),
height: (yMax - yMin)
};
// console.log("updateChartZoom " + this.getRect(newZoom));
chart.windowRect = newZoom;
}
public createSeries(chart: IgxDataChartComponent) {
const sizeScale1 = new IgxSizeScaleComponent();
sizeScale1.minimumValue = 15;
sizeScale1.maximumValue = 40;
const sizeScale2 = new IgxSizeScaleComponent();
sizeScale2.minimumValue = 5;
sizeScale2.maximumValue = 15;
const xAxis = chart.actualAxes.filter(a => a.isNumeric)[0] as IgxNumericXAxisComponent;
const yAxis = chart.actualAxes.filter(a => a.isNumeric)[1] as IgxNumericYAxisComponent;
const series1 = new IgxBubbleSeriesComponent();
series1.title = "High Income Country";
series1.dataSource = SampleScatterStats.getCountriesWithHighIncome();
series1.showDefaultTooltip = false;
series1.xMemberPath = "population";
series1.yMemberPath = "gdpTotal";
series1.radiusMemberPath = "gdpPerCapita";
series1.radiusScale = sizeScale1;
series1.markerType = MarkerType.Circle;
series1.xAxis = xAxis;
series1.yAxis = yAxis;
series1.tooltipTemplate = this.seriesTooltip;
const series2 = new IgxBubbleSeriesComponent();
series2.title = "Low Income Country";
series2.dataSource = SampleScatterStats.getCountriesWithLowIncome();
series2.showDefaultTooltip = false;
series2.xMemberPath = "population";
series2.yMemberPath = "gdpTotal";
series2.radiusMemberPath = "gdpPerCapita";
series2.radiusScale = sizeScale2;
series2.markerType = MarkerType.Circle;
series2.xAxis = xAxis;
series2.yAxis = yAxis;
series2.tooltipTemplate = this.seriesTooltip;
chart.series.add(series1);
chart.series.add(series2);
// chart.markerOutlines = [ "#7446B9", "#9FB328", "#2E9CA6", "#525251", "#dcbf3f", "#F96232"];
// chart.brushes = [ "#7446B9", "#9FB328", "#2E9CA6", "#525251", "#dcbf3f", "#F96232"];
}
public getRect(rect: any) {
const str = "T " + rect.top.toFixed(1) + " L " + rect.left.toFixed(1)
+ " W " + rect.width.toFixed(1)
+ " H " + rect.height.toFixed(1);
return str;
}
}
ts<div #container class="container"
width="100%" height="calc(100% - 200px)">
<igx-data-chart #mainChart name="mainChart"
width="100%"
height="calc(100% - 200px)"
isHorizontalZoomEnabled="true"
isVerticalZoomEnabled="false"
[dataSource]="countriesAll"
chartTitle="World GDP vs Population"
titleTopMargin="10">
<igx-numeric-x-axis #mainXAxis
isLogarithmic=true
abbreviateLargeNumbers=true
title="Population">
</igx-numeric-x-axis>
<igx-numeric-y-axis #mainYAxis
isLogarithmic=true
abbreviateLargeNumbers=true
titleLeftMargin="10"
title="Total GDP ($)">
</igx-numeric-y-axis>
</igx-data-chart>
<div class="zoomPane" width="100%" height="160px" >
<div class="zoomChart" width="100%" height="160px" >
<igx-data-chart
#zoomChart name="zoomChart"
width="100%"
height="160px"
isHorizontalZoomEnabled="true"
isVerticalZoomEnabled="true"
[dataSource]="countriesAll">
<igx-numeric-x-axis #zoomXAxis
isLogarithmic=true
abbreviateLargeNumbers=true
labelVisibility="collapsed" >
</igx-numeric-x-axis>
<igx-numeric-y-axis #zoomYAxis
isLogarithmic=true
abbreviateLargeNumbers=true
labelVisibility="collapsed" >
</igx-numeric-y-axis>
</igx-data-chart>
</div>
<div class="zoomSlider" width="100%" height="160px" >
<igx-zoom-slider
#zoomSlider name="zoomSlider"
width="100%"
height="160px" >
</igx-zoom-slider>
</div>
</div>
<ng-template let-series="series" let-item="item" #seriesTooltip>
<div>
<span>Region: {{item.region}}<br/></span>
<span>Country: {{item.name}}<br/></span>
<span>Population: {{item.getPopulation()}}<br/></span>
<span>GDP Total: {{item.getGdpTotal()}}<br/></span>
<span [style.color]="series.actualBrush">GDP Per Capita: {{item.getGdpPerCapita()}}<br/></span>
<span [style.color]="series.actualBrush">{{series.title}}<br/></span>
</div>
</ng-template>
</div>
html.container {
display: block;
height: 100%;
}
.zoomPane {
position: relative;
height: 160px;
}
.zoomChart {
width: 100%;
position: absolute;
top: 0px;
left: 0px;
}
.zoomSlider {
width: 100%;
position: absolute;
top: 0px;
left: 0px;
}
scss
이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.
용법
기능 이름 | 설명 |
---|---|
스크롤바 탐색 | 사용자는 ZoomSlider 스크롤 막대의 내장 기능을 사용하여 데이터 범위를 스크롤하고 규모를 변경할 수 있습니다. |
이동 및 확대/축소 | 사용자는 엄지 패드의 가장자리를 드래그하여 현재 디스플레이의 범위를 더 크게(축소) 또는 더 작은 범위(확대)로 만들어 디스플레이 배율을 조정할 수 있습니다. |
다양한 사용자 상호 작용 옵션 | 모든 마우스 사용자 상호 작용은 터치를 통해 중복 지원되며 대부분 키보드를 통해 지원됩니다. 자세한 내용은 사용자 상호 작용 및 유용성을 참조하세요. |
터치 지원 | 터치 지원 장치에서 사용자는 전체 ZoomSlider 기능을 즐길 수 있습니다. 모든 마우스 상호 작용은 터치 환경에서 지원됩니다. |
확장성 | ZoomSlider 컨트롤은 기본적으로 DataChart 컨트롤을 지원합니다. |
구성 가능한 줌 범위 창 | 초기 확대/축소 범위 창 너비와 위치, 최소 크기를 구성할 수 있습니다. |
종속성
Angular 차트 구성 요소를 설치할 때 핵심 패키지도 설치해야 합니다.
npm install --save igniteui-angular-core
npm install --save igniteui-angular-charts
cmd
컴포넌트 모듈
IgxZoomSliderComponent
에는 다음 모듈이 필요합니다.
import { IgxZoomSliderModule } from 'igniteui-angular-charts';
import { IgxZoomSliderComponent } from 'igniteui-angular-charts';
@NgModule({
imports: [
// ...
IgxZoomSliderModule,
// ...
]
})
export class AppModule {}
ts
코드 조각
다음 코드는 ZoomSlider를 설정하는 방법을 보여줍니다.
<igx-zoom-slider
width="100%"
height="150px">
</igx-zoom-slider>
html
추가 리소스
차트 기능 항목에서 차트에 대한 자세한 내용을 확인할 수 있습니다.
API 참조
다음은 위 섹션에서 언급된 API 멤버 목록입니다.