Angular 차트 탐색
Ignite UI for Angular 하면 마우스, 키보드, 터치를 사용하여 대화형 팬 및 확대/축소가 가능합니다.
60 以上のリアルタイム Angular チャート を使用して、何百万ものデータ ポイントを描画し、視覚化を構築します。これは、あらゆるアプリケーション シナリオに対応する最も広範なチャート ライブラリです。
Angular 차트 탐색 예제
다음 예에서는 사용 가능한 모든 이동 및 확대/축소 옵션을 보여줍니다. 버튼을 사용하여 예제와 상호 작용하거나 드롭다운 또는 확인란을 사용하여 원하는 옵션을 선택할 수 있습니다.
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 { IgxDataChartCoreModule, IgxDataChartScatterCoreModule, IgxDataChartScatterModule, IgxLegendModule, IgxNumberAbbreviatorModule, IgxDataChartInteractivityModule } from "igniteui-angular-charts";
import { SampleScatterStats } from "./SampleScatterStats";
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent,
],
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxDataChartCoreModule,
IgxDataChartScatterCoreModule,
IgxDataChartScatterModule,
IgxLegendModule,
IgxNumberAbbreviatorModule,
IgxDataChartInteractivityModule
],
providers: [SampleScatterStats],
schemas: []
})
export class AppModule {}
tsimport { Component, OnInit, ViewChild } from "@angular/core";
import { IgxDataChartComponent } from "igniteui-angular-charts";
import { IgxNumericXAxisComponent } from "igniteui-angular-charts";
import { IgxNumericYAxisComponent } from "igniteui-angular-charts";
import { IgxBubbleSeriesComponent } from "igniteui-angular-charts";
import { IgxSizeScaleComponent } from "igniteui-angular-charts";
import { SampleScatterStats } from "./SampleScatterStats";
@Component({
standalone: false,
selector: "app-root",
styleUrls: ["./app.component.scss"],
templateUrl: "./app.component.html"
})
export class AppComponent implements OnInit {
public data: any[];
public isZoomEnabled: boolean = true;
public defaultInteraction: string = "DragZoom";
public panModifier: string = "None";
public zoomModifier: string = "None";
@ViewChild("xAxis", { static: true })
public xAxis: IgxNumericXAxisComponent;
@ViewChild("yAxis", { static: true })
public yAxis: IgxNumericYAxisComponent;
@ViewChild("chart", { static: true })
public chart: IgxDataChartComponent;
constructor() {
this.data = SampleScatterStats.getCountriesWithHighIncome();
}
public ngOnInit() {
this.createSeries();
this.chart.actualWindowScaleHorizontal = 0.6;
this.chart.actualWindowScaleVertical = 0.6;
this.chart.actualWindowPositionVertical = 0.2;
this.chart.actualWindowPositionHorizontal = 0.2;
}
public onPanUpClick() {
this.chart.actualWindowPositionVertical -= 0.05;
}
public onPanDownClick() {
this.chart.actualWindowPositionVertical += 0.05;
}
public onPanRightClick() {
this.chart.actualWindowPositionHorizontal += 0.05;
}
public onPanLeftClick() {
this.chart.actualWindowPositionHorizontal -= 0.05;
}
public createSeries() {
const sizeScale = new IgxSizeScaleComponent();
sizeScale.minimumValue = 10;
sizeScale.maximumValue = 60;
const series = new IgxBubbleSeriesComponent();
series.title = "Countries";
series.dataSource = SampleScatterStats.getCountries();
series.showDefaultTooltip = true;
series.xMemberPath = "population";
series.yMemberPath = "gdpTotal";
series.radiusMemberPath = "gdpPerCapita";
series.radiusScale = sizeScale;
series.xAxis = this.xAxis;
series.yAxis = this.yAxis;
this.chart.series.clear();
this.chart.series.add(series);
}
}
ts<div class="container vertical">
<div class="options horizontal">
<span class="options-item">Default Drag Option:</span>
<select [(ngModel)]="defaultInteraction">
<option>DragZoom</option>
<option>DragPan</option>
<option>None</option>
</select>
<span class="options-item">Pan Modifier:</span>
<select [(ngModel)]="panModifier">
<option>Alt</option>
<option>Control</option>
<option>Shift</option>
<option>Windows</option>
<option>Apple</option>
<option>None</option>
</select>
<span class="options-item">Zoom Modifier:</span>
<select [(ngModel)]="zoomModifier">
<option>Alt</option>
<option>Control</option>
<option>Shift</option>
<option>Windows</option>
<option>Apple</option>
<option>None</option>
</select>
</div>
<div class="options horizontal">
<label class="options-item"><input type="checkbox" [(ngModel)]="isZoomEnabled" /> Enable Zooming</label>
<button class="options-item" (click)="onPanUpClick()">Pan Up</button>
<button class="options-item" (click)="onPanDownClick()">Pan Down</button>
<button class="options-item" (click)="onPanLeftClick()">Pan Left</button>
<button class="options-item" (click)="onPanRightClick()">Pan Right</button>
</div>
<div class="container">
<igx-data-chart #chart [dataSource]="data"
width="100%"
height="100%"
[defaultInteraction]="defaultInteraction"
[dragModifier]="zoomModifier"
[panModifier]="panModifier"
[isHorizontalZoomEnabled]="isZoomEnabled"
[isVerticalZoomEnabled]="isZoomEnabled">
<igx-numeric-x-axis #xAxis
isLogarithmic=true
abbreviateLargeNumbers=true
title="Population">
</igx-numeric-x-axis>
<igx-numeric-y-axis #yAxis
isLogarithmic=true
abbreviateLargeNumbers=true
title="Total GDP ($)">
</igx-numeric-y-axis>
</igx-data-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 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.
이 샘플이 마음에 드시나요? 전체 Angular 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하세요. 무료로 다운로드하세요.
사용자 상호 작용을 통한 차트 탐색
확대/축소가 기본적으로 설정되어 있는지 여부는 사용 중인 차트에 따라 다릅니다. 사용하는 IgxCategoryChartComponent
경우 기본적으로 켜져 있지만 에는 IgxDataChartComponent
없습니다. UI에서 탐색을 활성화하거나 비활성화하려면 확대/축소를 활성화하거나 비활성화하려는 방향에 따라 차트의 및/또는 isVerticalZoomEnabled
속성을 설정해야 isHorizontalZoomEnabled
합니다.
마우스를 클릭하거나 터치를 사용하여 간단히 확대/축소하거나 이동하는 것도 가능합니다. 데이터 차트의 defaultInteraction
속성은 마우스 클릭 또는 터치 이벤트에서 발생하는 상황을 결정합니다. 이 속성의 기본값은 DragZoom
이며 확대/축소가 활성화된 상태에서 이 속성으로 설정되면 클릭하고 끌면 차트의 확대/축소된 영역이 될 플롯 영역 위에 미리 보기 직사각형이 배치됩니다. 이 defaultInteraction
속성을 DragPan
으로 설정하여 패닝을 허용하거나 None
으로 설정하여 이러한 작업을 방지할 수도 있습니다.
터치, 마우스, 키보드를 사용한 차트 탐색
Angular 데이터 차트의 탐색은 터치, 마우스 또는 키보드로 수행할 수 있습니다. 다음 작업은 기본적으로 터치, 마우스 또는 키보드 작업을 사용하여 호출할 수 있습니다.
- 패닝: 키보드의 🡐 🡒 🡑 🡓 방향키를 사용하거나, Shift 키를 누른 채 마우스로 클릭하고 드래그하거나, 터치를 통해 손가락을 누르고 이동합니다.
- 확대: 키보드의 Page Up 키를 이용하거나, 마우스 휠을 위로 굴리거나, 핀치 터치로 확대할 수 있습니다.
- 축소: 키보드의 Page Down 키를 사용하거나, 마우스 휠을 아래로 굴리거나, 핀치 터치를 통해 축소합니다.
- 차트 플롯 영역에 맞추기: 키보드의 Home 키를 사용합니다. 이에 대한 마우스나 터치 작업은 없습니다.
- 영역 확대/축소:
defaultInteraction
속성이 기본값인DragZoom
으로 설정된 플롯 영역 내에서 마우스를 클릭하고 드래그합니다.
dragModifier
및 panModifier
속성을 각각 설정하여 수정자 키를 사용하여 확대/축소 및 이동 작업을 활성화할 수도 있습니다. 이러한 속성은 다음 수정자 키로 설정할 수 있으며, 누르면 해당 작업이 실행됩니다.
수정자 값 | 해당 키 |
---|---|
Shift |
옮기다 |
Control |
Ctrl 키 |
Windows |
이기다 |
Apple |
사과 |
None |
열쇠 없음 |
스크롤 막대를 사용한 차트 탐색
verticalViewScrollbarMode
및 horizontalViewScrollbarMode
속성을 활성화하여 차트를 스크롤할 수 있습니다.
다음 옵션으로 구성할 수 있습니다.
Persistent
- 차트가 확대되는 동안 스크롤 막대는 항상 표시되고 완전히 축소되면 사라집니다.Fading
- 사용 후 스크롤바가 사라지고 마우스가 해당 위치 근처에 있으면 다시 나타납니다.FadeToLine
- 확대/축소를 사용하지 않을 때 스크롤 막대가 더 얇은 선으로 줄어듭니다.None
- 기본값, 스크롤바가 표시되지 않습니다.
다음 예에서는 스크롤 막대를 활성화하는 방법을 보여줍니다.
//begin async data
export class MultipleStocks extends Array<Array<StockItem>> {
public static async fetch(): Promise<MultipleStocks> {
const dataSources: any[] = [
//await this.getAmazonStock(),
await this.getGoogleStock(),
await this.getAmazonStock(),
//await this.getTeslaStock()
];
return new Promise<MultipleStocks>((resolve, reject) => {
resolve(dataSources);
});
}
/** gets Amazon stock OHLC prices from a .JSON file */
public static async 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 as any).__dataIntents = {
close: ["SeriesTitle/Amazon"]
};
// console.log("fetchAmazonStock: ", stockData.length);
return new Promise<StockItem[]>((resolve, reject) => {
resolve(stockData);
});
}
/** gets Tesla stock OHLC prices from a .JSON file */
public static async 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 as any).__dataIntents = {
close: ["SeriesTitle/Tesla"]
};
return new Promise<StockItem[]>((resolve, reject) => {
resolve(stockData);
});
}
/** gets Microsoft stock OHLC prices from a .JSON file */
public static async 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 as any).__dataIntents = {
close: ["SeriesTitle/Microsoft"]
};
return new Promise<StockItem[]>((resolve, reject) => {
resolve(stockData);
});
}
/** gets Google stock OHLC prices from a .JSON file */
public static async 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 as any).__dataIntents = {
close: ["SeriesTitle/Google"]
};
return new Promise<StockItem[]>((resolve, reject) => {
resolve(stockData);
});
}
public static 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 = new Date(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;
}
}
export class StockItem {
public open?: number;
public close?: number;
public high?: number;
public low?: number;
public volume?: number;
public date?: Date;
}
//end async data
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 { IgxFinancialChartModule, IgxDataChartInteractivityModule, IgxLegendModule } from 'igniteui-angular-charts';
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxFinancialChartModule,
IgxDataChartInteractivityModule,
IgxLegendModule
],
providers: [],
schemas: []
})
export class AppModule {}
tsimport { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { MultipleStocks } from './MultipleStocks';
import { IgxFinancialChartComponent } from 'igniteui-angular-charts';
@Component({
standalone: false,
selector: "app-root",
styleUrls: ["./app.component.scss"],
templateUrl: "./app.component.html",
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent implements AfterViewInit
{
@ViewChild("chart", { static: true } )
private chart: IgxFinancialChartComponent
private _multipleStocks: MultipleStocks = null;
private _isFetching: boolean = false;
public get multipleStocks(): MultipleStocks {
if (this._multipleStocks == null && !this._isFetching)
{
this._isFetching = true;
( async () => { this._multipleStocks = await (await MultipleStocks.fetch()); this._detector.markForCheck(); })();
}
return this._multipleStocks;
}
public constructor(private _detector: ChangeDetectorRef)
{
}
public ngAfterViewInit(): void
{
}
}
ts<div class="container vertical sample">
<div class="container fill">
<igx-financial-chart
name="chart"
#chart
isToolbarVisible="false"
isVerticalZoomEnabled="true"
isHorizontalZoomEnabled="true"
[dataSource]="multipleStocks"
verticalViewScrollbarMode="Fading"
horizontalViewScrollbarMode="Persistent"
zoomSliderType="None"
windowRect="0, 0, 0.5, 1">
</igx-financial-chart>
</div>
</div>
html/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scss
코드를 통한 차트 탐색
차트의 코드 탐색은 IgxDataChartComponent 컨트롤에만 사용할 수 있습니다.
Angular 데이터 차트는 차트에서 확대/축소 또는 팬 작업이 발생할 때마다 업데이트되는 여러 가지 탐색 속성을 제공합니다. 이러한 각 속성을 설정하여 데이터 차트를 프로그래밍 방식으로 확대/축소 또는 팬할 수도 있습니다. 다음은 이러한 속성의 목록입니다.
windowPositionHorizontal
: 데이터 차트에 표시되는 콘텐츠 뷰 직사각형의 X 부분을 설명하는 숫자 값입니다.windowPositionVertical
: 데이터 차트에 표시되는 콘텐츠 뷰 직사각형의 Y 부분을 설명하는 숫자 값입니다.windowRect
: 현재 표시된 차트 부분을 나타내는 직사각형을 나타내는Rect
객체입니다. 예를 들어 "0, 0, 1, 1"의windowRect
는 데이터 차트 전체가 됩니다.windowScaleHorizontal
: 데이터 차트에 표시되는 콘텐츠 뷰 직사각형의 너비 부분을 설명하는 숫자 값입니다.windowScaleVertical
: 데이터 차트에 표시되는 콘텐츠 뷰 직사각형의 높이 부분을 설명하는 숫자 값입니다.
추가 리소스
다음 항목에서 관련 차트 기능에 대한 자세한 내용을 확인할 수 있습니다.
API 참조
다음은 위 섹션에서 언급된 API 멤버 목록입니다.
defaultInteraction
dragModifier
isHorizontalZoomEnabled
isVerticalZoomEnabled
panModifier
IgxCategoryChartComponent
IgxDataChartComponent
IgxFinancialChartComponent