Descripción general del control deslizante de zoom Web Components
El control ZoomSlider Web Components proporciona funcionalidad de zoom a controles habilitados para rango. ZoomSlider presenta una barra de desplazamiento horizontal, una miniatura de todo el rango y una ventana de rango de zoom de tamaño variable. ZoomSlider no puede funcionar como un control independiente y actúa como una mejora para controles basados en rangos como DataChart o CategoryChart.
Ejemplo de control deslizante de zoom Web Components
El siguiente ejemplo demuestra cómo usar IgcZoomSliderComponent
para navegar por el contenido en IgcDataChartComponent
.
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,"Ivory Coast","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,"European 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 { IgcBubbleSeriesModule } from 'igniteui-webcomponents-charts';
import { IgcBubbleSeriesComponent } from 'igniteui-webcomponents-charts';
import { IgcAnnotationLayerComponent } from 'igniteui-webcomponents-charts';
import { IgcDataChartAnnotationModule } from 'igniteui-webcomponents-charts';
import { IgcCrosshairLayerModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartScatterModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartScatterCoreModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartCategoryModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { IgcNumberAbbreviatorModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartCoreModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartComponent } from 'igniteui-webcomponents-charts';
import { IgcZoomSliderModule } from 'igniteui-webcomponents-charts';
import { IgcNumericXAxisModule } from 'igniteui-webcomponents-charts';
import { IgcNumericYAxisModule } from 'igniteui-webcomponents-charts';
import { IgcNumericXAxisComponent } from 'igniteui-webcomponents-charts';
import { IgcNumericYAxisComponent } from 'igniteui-webcomponents-charts';
import { IgcSizeScaleComponent } from 'igniteui-webcomponents-charts';
import { IgcSizeScaleModule } from 'igniteui-webcomponents-charts';
import { IgcZoomSliderComponent } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';
import { IgRect } from 'igniteui-webcomponents-core';
import { SampleScatterStats } from './SampleScatterStats';
import { MarkerType } from 'igniteui-webcomponents-charts';
import { IgcChartCursorEventArgs } from 'igniteui-webcomponents-charts';
import { IgcRectChangedEventArgs } from 'igniteui-webcomponents-core';
import { IgcZoomSliderResolvingAxisValueEventArgs } from 'igniteui-webcomponents-charts';
ModuleManager.register(
IgcZoomSliderModule,
IgcDataChartCoreModule,
IgcDataChartCategoryModule,
IgcDataChartInteractivityModule,
IgcDataChartAnnotationModule,
IgcNumberAbbreviatorModule,
IgcDataChartScatterModule,
IgcDataChartScatterCoreModule,
IgcCrosshairLayerModule,
IgcSizeScaleModule,
IgcNumericXAxisModule,
IgcNumericYAxisModule,
IgcBubbleSeriesModule
);
export class ZoomSliderOverview {
private mainChart: IgcDataChartComponent;
private zoomChart: IgcDataChartComponent;
private zoomSlider: IgcZoomSliderComponent;
private charts: IgcDataChartComponent[] = [];
private container: HTMLDivElement;
private isSynchronizingZoom: boolean = false;
private lastRect: IgRect = { left: -1, top: -1, width: -1, height: -1};
private countriesAll: any[] = [];
constructor() {
this.onActualWindowRectChanged = this.onActualWindowRectChanged.bind(this);
this.onZoomSliderWindowChanged = this.onZoomSliderWindowChanged.bind(this);
this.onGridAreaRectChanged = this.onGridAreaRectChanged.bind(this);
this.createSeries = this.createSeries.bind(this);
this.onCursorMove = this.onCursorMove.bind(this);
this.onResolvingAxisValue = this.onResolvingAxisValue.bind(this);
this.countriesAll = SampleScatterStats.getCountries();
this.zoomSlider = document.getElementById('zoomSlider') as IgcZoomSliderComponent;
this.mainChart = document.getElementById('mainChart') as IgcDataChartComponent;
this.zoomChart = document.getElementById('zoomChart') as IgcDataChartComponent;
this.createSeries(this.mainChart);
this.charts.push(this.mainChart);
this.createSeries(this.zoomChart);
this.mainChart.actualWindowRectChanged = this.onActualWindowRectChanged;
this.mainChart.gridAreaRectChanged = this.onGridAreaRectChanged;
this.mainChart.seriesCursorMouseMove = this.onCursorMove;
this.zoomSlider.windowRectChanged = this.onZoomSliderWindowChanged;
this.zoomSlider.resolvingAxisValue = this.onResolvingAxisValue;
}
private onCursorMove(chart: IgcDataChartComponent, args: IgcChartCursorEventArgs) {
console.log(this.container.offsetWidth);
this.charts.map(c => {
if (c !== chart) {
c.actualSeries.filter((s) => s.isAnnotationLayer)
.map((s) => {
let a = s as IgcAnnotationLayerComponent;
a.moveCursorPoint(chart.crosshairPoint);
});
}
});
}
private onActualWindowRectChanged(chart: IgcDataChartComponent, args: IgcRectChangedEventArgs) {
if (!this.isSynchronizingZoom) {
this.syncZooms(chart);
}
}
private onZoomSliderWindowChanged(slider: IgcZoomSliderComponent, args: IgcRectChangedEventArgs) {
if (!this.isSynchronizingZoom) {
this.syncZooms(slider);
}
}
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 IgcDataChartComponent).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: IgcZoomSliderComponent, args: IgcZoomSliderResolvingAxisValueEventArgs) {
const xAxis = this.zoomChart.actualAxes.filter(a => a.isNumeric)[0] as IgcNumericXAxisComponent;
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 = null;
}
// 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: IgcDataChartComponent, args: IgcRectChangedEventArgs) {
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: IgcDataChartComponent, zoom: IgRect) {
const data = this.countriesAll;
const yAxis = chart.actualAxes.filter(a => a.isNumeric)[0] as IgcNumericYAxisComponent;
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, data.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: IgcDataChartComponent) {
let sizeScale1 = new IgcSizeScaleComponent();
sizeScale1.minimumValue = 15;
sizeScale1.maximumValue = 40;
let sizeScale2 = new IgcSizeScaleComponent();
sizeScale2.minimumValue = 5;
sizeScale2.maximumValue = 15;
let xAxis: IgcNumericXAxisComponent;
let yAxis: IgcNumericYAxisComponent;
if (chart.id === 'mainChart') {
xAxis = document.getElementById('mainXAxis') as IgcNumericXAxisComponent;
yAxis = document.getElementById('mainYAxis') as IgcNumericYAxisComponent;
}
else {
xAxis = document.getElementById('zoomXAxis') as IgcNumericXAxisComponent;
yAxis = document.getElementById('zoomYAxis') as IgcNumericYAxisComponent;
}
let series1 = new IgcBubbleSeriesComponent();
series1.name = 'series1' + chart.id;
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.xAxisName = xAxis.name;
series1.yAxisName = yAxis.name;
// series1.tooltipTemplate = this.seriesTooltip;
const series2 = new IgcBubbleSeriesComponent();
series2.name = 'series2' + chart.id;
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.xAxisName = xAxis.name;
series2.yAxisName = yAxis.name;
// series2.tooltipTemplate = this.seriesTooltip;
chart.series.add(series1);
chart.series.add(series2);
}
}
new ZoomSliderOverview();
ts<!DOCTYPE html>
<html>
<head>
<title>ZoomSliderOverview</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<div id="container" style="width: calc(100% - 10px); height: calc(100% - 10px)">
<igc-data-chart id="mainChart"
width="100%" height="calc(100% - 160px)"
title-top-margin="10"
chart-title="World GDP vs Population"
is-horizontal-zoom-enabled="true"
is-vertical-zoom-enabled="false">
<igc-numeric-x-axis
name="mainXAxis" id="mainXAxis"
is-logarithmic="true"
abbreviate-large-numbers="true"
title="Population">
</igc-numeric-x-axis>
<igc-numeric-y-axis
name="mainYAxis" id="mainYAxis"
is-logarithmic="true"
abbreviate-large-numbers="true"
title-left-margin="10"
title="Total GDP ($)"
label-extent="60">
</igc-numeric-y-axis>
</igc-data-chart>
<div style="width: calc(100% - 70px);
height: 160px;
position: relative;
margin-left: 55px;
margin-right: 15px;">
<div style="width: 100%; height: 160px; position: absolute; top: 0px; left: 0px">
<igc-data-chart
id="zoomChart"
width="100%"
height="160px"
is-horizontal-zoom-enabled="true"
is-vertical-zoom-enabled="true" >
<igc-numeric-x-axis id="zoomXAxis" name="zoomXAxis"
is-logarithmic="true"
abbreviate-large-numbers="true"
label-visibility="collapsed">
</igc-numeric-x-axis>
<igc-numeric-y-axis id="zoomYAxis" name="zoomYAxis"
is-logarithmic="true"
abbreviate-large-numbers="true"
label-visibility="collapsed" >
</igc-numeric-x-axis>
</igc-data-chart>
</div>
<div style="width: 100%; height: 160px; position: absolute; top: 0px; left: 0px">
<igc-zoom-slider id="zoomSlider"
width="100%"
height="100%"
are-thumb-callouts-enabled="true" >
</igc-zoom-slider>
</div>
</div>
</div>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>
html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
¿Te gusta esta muestra? Obtenga acceso a nuestro completo kit de herramientas Ignite UI for Web Components y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Uso
Nombre de la característica | Descripción |
---|---|
Navegación con barra de desplazamiento | Los usuarios pueden cambiar la escala y desplazarse por rangos de datos utilizando las capacidades integradas de la barra de desplazamiento ZoomSlider. |
Panorámica y zoom | Los usuarios pueden ajustar la escala de visualización arrastrando los bordes del control para el pulgar para hacer que la visualización actual cubra un rango mayor (alejar) o un rango más pequeño (acercar). |
Múltiples opciones de interacción del usuario | Todas las interacciones del usuario del mouse se admiten de manera redundante a través del tacto y la mayoría de ellas, a través del teclado. Para obtener más información, consulte Interacciones del usuario y usabilidad. |
Soporte táctil | En dispositivos táctiles, los usuarios pueden disfrutar de la funcionalidad completa de ZoomSlider. Todas las interacciones del mouse son compatibles en un entorno táctil. |
Extensibilidad | El control ZoomSlider admite el control DataChart listo para usar. |
Ventana de rango de zoom configurable | El ancho y la posición inicial de la ventana del rango de zoom, así como su tamaño mínimo, son configurables. |
dependencias
Al instalar el componente gráfico Web Components, también se debe instalar el paquete principal.
npm install --save igniteui-webcomponents-core
npm install --save igniteui-webcomponents-charts
cmd
Módulos de componentes
El IgcZoomSliderComponent
requiere los siguientes módulos:
import { IgcZoomSliderModule } from 'igniteui-webcomponents-charts';
import { IgcZoomSliderComponent } from "igniteui-webcomponents-charts";
IgcZoomSliderModule.register();
ts
Fragmento de código
El siguiente código demuestra cómo configurar ZoomSlider.
<igc-zoom-slider
name="zoomSlider"
width="100%"
height="160px" >
</igc-zoom-slider>
html
Recursos adicionales
Puede encontrar más información sobre los gráficos en el tema Características de los gráficos.
Referencias de API
La siguiente es una lista de miembros de API mencionados en las secciones anteriores: