React Zoom Slider 개요
React ZoomSlider 컨트롤은 범위 활성화 컨트롤에 확대 기능을 제공합니다. ZoomSlider는 가로 스크롤 막대, 전체 범위의 축소판, 크기 조절이 가능한 확대 범위 창을 제공합니다. ZoomSlider는 독립형 컨트롤로 작동할 수 없으며 DataChart 또는 CategoryChart와 같은 범위 기반 컨트롤의 향상 기능으로 작동합니다.
React Zoom 슬라이더 예제
다음 샘플은 IgrZoomSlider 사용하여 IgrDataChart의 콘텐츠를 탐색하는 방법을 보여줍니다.
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 roundValue = Math.round(value);
const suffixNum = Math.floor(("" + roundValue).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; // / 1000000;
this.DptPerCapita = dpt;
this.PhonePer100 = phones;
}
public isValid(): boolean {
return this.GdpPerCapita > 0 && this.Population > 0 &&
this.DptPerCapita > 0 && this.PhonePer100 > 0
}
public getPopulation(): string {
return SampleScatterStats.abbreviate(this.Population);
}
public getGdpTotal(): string {
return SampleScatterStats.abbreviate(this.GdpTotal);
}
public getGdpPerCapita(): string {
return SampleScatterStats.abbreviate(this.GdpPerCapita);
}
}
tsimport React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrBubbleSeries, IgrSeriesViewer } from "@infragistics/igniteui-react-charts";
import { IgrAnnotationLayer } from "@infragistics/igniteui-react-charts";
import { IgrDataChartAnnotationModule } from "@infragistics/igniteui-react-charts";
import { IgrDataChartCategoryModule } from "@infragistics/igniteui-react-charts";
import { IgrDataChartInteractivityModule } from "@infragistics/igniteui-react-charts";
import { IgrDataChart } from "@infragistics/igniteui-react-charts";
// import { IgrCrosshairLayer } from "@infragistics/igniteui-react-charts";
import { IgrCrosshairLayerModule } from "@infragistics/igniteui-react-charts";
import { IgrNumberAbbreviatorModule } from "@infragistics/igniteui-react-charts";
import { IgrNumericXAxis } from "@infragistics/igniteui-react-charts";
import { IgrNumericYAxis } from "@infragistics/igniteui-react-charts";
import { IgrSizeScale } from "@infragistics/igniteui-react-charts";
import { MarkerType } from "@infragistics/igniteui-react-charts";
import { IgRect } from "@infragistics/igniteui-react-core";
import { IgrZoomSlider } from "@infragistics/igniteui-react-charts";
import { IgrChartCursorEventArgs } from "@infragistics/igniteui-react-charts";
import { IgrZoomSliderResolvingAxisValueEventArgs } from "@infragistics/igniteui-react-charts"
import { IgrRectChangedEventArgs } from "@infragistics/igniteui-react-core";
import { SampleScatterStats } from './SampleScatterStats';
IgrDataChartCategoryModule.register();
IgrDataChartInteractivityModule.register();
IgrDataChartAnnotationModule.register();
IgrNumberAbbreviatorModule.register();
IgrCrosshairLayerModule.register();
export default class ZoomSliderOverview extends React.Component<any, any> {
private mainChart: IgrDataChart = null;
private zoomChart: IgrDataChart = null;
private zoomSlider: IgrZoomSlider = null;
private charts: IgrDataChart[] = [];
private container: HTMLDivElement;
private isSynchronizingZoom: boolean = false;
private lastRect: IgRect = { left: -1, top: -1, width: -1, height: -1};
private regions: any[];
private countriesAll: any[];
private countriesByRegion: any;
constructor(props: any) {
super(props);
this.onMainChartRef = this.onMainChartRef.bind(this);
this.onZoomChartRef = this.onZoomChartRef.bind(this);
this.onZoomSliderRef = this.onZoomSliderRef.bind(this);
this.onActualWindowRectChanged = this.onActualWindowRectChanged.bind(this);
this.onZoomSliderWindowChanged = this.onZoomSliderWindowChanged.bind(this);
this.onGridAreaRectChanged = this.onGridAreaRectChanged.bind(this);
this.onContainerRef = this.onContainerRef.bind(this);
this.onCursorMove = this.onCursorMove.bind(this);
this.onResolvingAxisValue = this.onResolvingAxisValue.bind(this);
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);
}
this.countriesByRegion[name].push(country);
}
}
public render(): JSX.Element {
return (
<div ref={this.onContainerRef} style={{ width: "calc(100% - 10px)", height: "calc(100% - 10px)" }}>
<IgrDataChart
titleTopMargin="10"
chartTitle="World GDP vs Population"
ref={this.onMainChartRef}
width="100%"
height="calc(100% - 160px)"
isHorizontalZoomEnabled="true"
isVerticalZoomEnabled="false"
actualWindowRectChanged={this.onActualWindowRectChanged}
gridAreaRectChanged={this.onGridAreaRectChanged}
seriesCursorMouseMove={this.onCursorMove}>
<IgrNumericXAxis
name="mainXAxis"
isLogarithmic={true}
abbreviateLargeNumbers={true}
title="Population"/>
<IgrNumericYAxis name="mainYAxis"
isLogarithmic={true}
abbreviateLargeNumbers={true}
titleLeftMargin="10"
title="Total GDP ($)"/>
</IgrDataChart>
<div style={{ width: "100%", height:"160px", position: "relative" }}>
<div style={{ width: "100%", height:"160px", position: "absolute", top: "0px", left: "0px" }} >
<IgrDataChart
ref={this.onZoomChartRef}
width="100%"
height="160px"
isHorizontalZoomEnabled="true"
isVerticalZoomEnabled="true">
<IgrNumericXAxis
name="zoomXAxis"
isLogarithmic={true}
abbreviateLargeNumbers={true}
labelVisibility="collapsed"/>
<IgrNumericYAxis name="zoomYAxis"
isLogarithmic={true}
abbreviateLargeNumbers={true}
labelVisibility="collapsed" />
</IgrDataChart>
</div>
<div style={{ width: "100%", height:"160px", position: "absolute", top: "0px", left: "0px" }} >
<IgrZoomSlider
width="100%"
height="100%"
ref={this.onZoomSliderRef}
areThumbCalloutsEnabled="true"
windowRectChanged={this.onZoomSliderWindowChanged}
resolvingAxisValue={this.onResolvingAxisValue}/>
</div>
</div>
</div>
);
}
private onMainChartRef(chart: IgrDataChart) {
if (!chart) { return; }
this.charts.push(chart);
this.mainChart = chart;
this.createSeries(this.mainChart);
}
private onZoomChartRef(chart: IgrDataChart) {
if (!chart) { return; }
this.zoomChart = chart;
this.createSeries(this.zoomChart);
}
private onZoomSliderRef(slider: IgrZoomSlider) {
if (!slider) { return; }
this.zoomSlider = slider;
}
private onCursorMove(chart: IgrSeriesViewer, args: IgrChartCursorEventArgs) {
// console.log(this.container.offsetWidth);
this.charts.map(c => {
if (c !== chart) {
c.actualSeries.filter((s) => s.isAnnotationLayer)
.map((s) => {
let a = s as IgrAnnotationLayer;
a.moveCursorPoint(chart.crosshairPoint);
});
}
});
}
private onActualWindowRectChanged(chart: IgrSeriesViewer, args: IgrRectChangedEventArgs) {
if (!this.isSynchronizingZoom) {
this.syncZooms(chart);
}
}
private onZoomSliderWindowChanged(slider: IgrZoomSlider, args: IgrRectChangedEventArgs) {
if (!this.isSynchronizingZoom) {
this.syncZooms(slider);
}
}
private onContainerRef(div: HTMLDivElement) {
if (!div) { return; }
this.container = div;
}
private syncZooms(sender: any) {
window.setTimeout(() => {
try
{
this.isSynchronizingZoom = true;
const zoomWindow = this.zoomSlider.windowRect;
const chartWindow = sender === this.zoomSlider ? this.mainChart.actualWindowRect : (sender as IgrDataChart).actualWindowRect;
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);
}
private onResolvingAxisValue(slider: IgrZoomSlider, args: IgrZoomSliderResolvingAxisValueEventArgs) {
const xAxis = this.zoomChart.actualAxes.filter(a => a.isNumeric)[0] as IgrNumericXAxis;
if (xAxis) {
const range = (xAxis.actualMaximumValue - xAxis.actualMinimumValue)
const value = xAxis.actualMinimumValue + (args.position * range);
const str = SampleScatterStats.abbreviate(value)
// console.log("p=" + args.position + " r=" + range + " v=" + value + " str=" + str);
args.value = str;
}
// const index = Math.round(args.position * (this.countriesAll.length - 1));
// const item = this.countriesAll[index];
// if (item) {
// args.value = SampleScatterStats.abbreviate(item.population);
// }
}
private onGridAreaRectChanged(chart: IgrSeriesViewer, args: IgrRectChangedEventArgs) {
let newRect = 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 = (isNaN(this.mainChart.rightMargin) ? this.mainChart.autoMarginWidth : this.mainChart.rightMargin);
let width = newRect.left + newRect.width + rightMargin;
this.lastRect = newRect;
let right = newRect.left + newRect.width;
let insetLeft = newRect.left;
let insetRight = width - right;
this.zoomSlider.startInset = insetLeft - this.zoomSlider.trackStartInset;
this.zoomSlider.endInset = insetRight - this.zoomSlider.trackEndInset;
if (this.zoomSlider.endInset < 0) {
let inset = this.zoomSlider.endInset;
this.zoomSlider.endInset = 0;
this.charts.map(c => c.rightMargin += (inset * -1.0));
}
if (this.zoomSlider.startInset < 0) {
let 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;
}
}
private updateChartZoom(chart: IgrDataChart, zoom: IgRect) {
const data = this.countriesAll;
const yAxis = chart.actualAxes.filter(a => a.isNumeric)[0] as IgrNumericYAxis;
let indexStart = Math.floor((data.length - 1) * zoom.left);
let indexEnd = Math.ceil((data.length - 1) * (zoom.left + zoom.width));
// console.log("updateChartZoom");
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, data[i].GdpTotal);
max = Math.max(max, data[i].GdpTotal);
}
let yMin = (min - yAxis.actualMinimumValue) / (yAxis.actualMaximumValue - yAxis.actualMinimumValue);
let yMax = (max - yAxis.actualMinimumValue) / (yAxis.actualMaximumValue - yAxis.actualMinimumValue);
let newZoom = {
left: zoom.left,
width: zoom.width,
top: (1.0 - yMax),
// top: 0.0,
// height: 1.0
height: (yMax - yMin)
}
chart.windowRect = newZoom;
}
private createSeries(chart: IgrDataChart) {
const sizeScale1 = new IgrSizeScale({});
sizeScale1.minimumValue = 15;
sizeScale1.maximumValue = 40;
const sizeScale2 = new IgrSizeScale({});
sizeScale2.minimumValue = 5;
sizeScale2.maximumValue = 15;
const xAxis = chart.actualAxes.filter(a => a.isNumeric)[0] as IgrNumericXAxis;
const yAxis = chart.actualAxes.filter(a => a.isNumeric)[1] as IgrNumericYAxis;
const series1 = new IgrBubbleSeries({ name: "series1" });
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 IgrBubbleSeries({ name: "series2" });
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"];
}
}
// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<ZoomSliderOverview/>);
tsx
이 샘플이 마음에 드시나요? Ignite UI for React 전체에 액세스하고 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.
용법
| 기능 이름 | 설명 |
|---|---|
| 스크롤바 탐색 | 사용자는 ZoomSlider 스크롤 막대의 내장 기능을 사용하여 데이터 범위를 스크롤하고 규모를 변경할 수 있습니다. |
| 이동 및 확대/축소 | 사용자는 엄지 패드의 가장자리를 드래그하여 현재 디스플레이의 범위를 더 크게(축소) 또는 더 작은 범위(확대)로 만들어 디스플레이 배율을 조정할 수 있습니다. |
| 다양한 사용자 상호 작용 옵션 | 모든 마우스 사용자 상호 작용은 터치를 통해 중복 지원되며 대부분 키보드를 통해 지원됩니다. 자세한 내용은 사용자 상호 작용 및 유용성을 참조하세요. |
| 터치 지원 | 터치 지원 장치에서 사용자는 전체 ZoomSlider 기능을 즐길 수 있습니다. 모든 마우스 상호 작용은 터치 환경에서 지원됩니다. |
| 확장성 | ZoomSlider 컨트롤은 기본적으로 DataChart 컨트롤을 지원합니다. |
| 구성 가능한 줌 범위 창 | 초기 확대/축소 범위 창 너비와 위치, 최소 크기를 구성할 수 있습니다. |
종속성
React 차트 컴포넌트를 설치할 때 핵심 패키지도 설치해야 합니다.
npm install --save igniteui-react-core
npm install --save igniteui-react-charts
cmd컴포넌트 모듈
IgrZoomSlider 에는 다음 모듈이 필요합니다.
import { IgrZoomSliderModule } from 'igniteui-react-charts';
import { IgrZoomSlider } from 'igniteui-react-charts';
IgrDataChartInteractivityModule.register();
ts코드 조각
다음 코드는 ZoomSlider를 설정하는 방법을 보여줍니다.
<IgrZoomSlider
width="100%"
height="100%"
/>
tsx추가 리소스
차트 기능 항목에서 차트에 대한 자세한 내용을 확인할 수 있습니다.
API 참조
다음은 위 섹션에서 언급된 API 멤버 목록입니다.