Web Components ツリーマップ
Ignite UI for Web Components ツリーマップ チャートは、ネストされた一連のノードとして階層 (ツリー構造) データを表示します。ツリーの各ブランチにはツリーマップ ノードが提供されて、サブマップを表す小さなノードでタイル化されます。各ノードの長方形には、データ上の指定されたディメンションに比例した領域があります。多くの場合、ノードは色分けされて、データの個別のディメンションを示します。
Web Components ツリーマップの例
次の例では、IgcTreemapComponent
は世界の最大総面積の上位 30 の国を示しています。
export class CountyHierarchicalDataItem {
public constructor(init: Partial<CountyHierarchicalDataItem>) {
Object.assign(this, init);
}
public code: string;
public parent: string;
public name: string;
public population: number;
}
export class CountyHierarchicalData extends Array<CountyHierarchicalDataItem> {
public constructor(items: Array<CountyHierarchicalDataItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new CountyHierarchicalDataItem(
{
code: `AFC`,
parent: null,
name: `Africa`,
population: null
}),
new CountyHierarchicalDataItem(
{
code: `ASA`,
parent: null,
name: `Asia`,
population: null
}),
new CountyHierarchicalDataItem(
{
code: `EUR`,
parent: null,
name: `Europe`,
population: null
}),
new CountyHierarchicalDataItem(
{
code: `MDE`,
parent: null,
name: `Middle East`,
population: null
}),
new CountyHierarchicalDataItem(
{
code: `NAM`,
parent: null,
name: `North America`,
population: null
}),
new CountyHierarchicalDataItem(
{
code: `CAM`,
parent: null,
name: `Central America`,
population: null
}),
new CountyHierarchicalDataItem(
{
code: `SAM`,
parent: null,
name: `South America`,
population: null
}),
new CountyHierarchicalDataItem(
{
code: `OCE`,
parent: null,
name: `Oceania`,
population: null
}),
new CountyHierarchicalDataItem(
{
code: `ANG`,
parent: `Africa`,
name: `Angola`,
population: 19618432
}),
new CountyHierarchicalDataItem(
{
code: `BEN`,
parent: `Africa`,
name: `Benin`,
population: 9099922
}),
new CountyHierarchicalDataItem(
{
code: `BOT`,
parent: `Africa`,
name: `Botswana`,
population: 2030738
}),
new CountyHierarchicalDataItem(
{
code: `BUR`,
parent: `Africa`,
name: `Burkina Faso`,
population: 16967845
}),
new CountyHierarchicalDataItem(
{
code: `BUR`,
parent: `Africa`,
name: `Burundi`,
population: 8575172
}),
new CountyHierarchicalDataItem(
{
code: `CAM`,
parent: `Africa`,
name: `Cameroon`,
population: 20030362
}),
new CountyHierarchicalDataItem(
{
code: `CPV`,
parent: `Africa`,
name: `Cape Verde`,
population: 500585
}),
new CountyHierarchicalDataItem(
{
code: `CAR`,
parent: `Africa`,
name: `Central African Republic`,
population: 4486837
}),
new CountyHierarchicalDataItem(
{
code: `CHD`,
parent: `Africa`,
name: `Chad`,
population: 11525496
}),
new CountyHierarchicalDataItem(
{
code: `COM`,
parent: `Africa`,
name: `Comoros`,
population: 753943
}),
new CountyHierarchicalDataItem(
{
code: `DRC`,
parent: `Africa`,
name: `Congo DRC`,
population: 67757577
}),
new CountyHierarchicalDataItem(
{
code: `CRP`,
parent: `Africa`,
name: `Congo Republic`,
population: 4139748
}),
new CountyHierarchicalDataItem(
{
code: `CIR`,
parent: `Africa`,
name: `Cote Ivoire`,
population: 20152894
}),
new CountyHierarchicalDataItem(
{
code: `DBT`,
parent: `Africa`,
name: `Djibouti`,
population: 905564
}),
new CountyHierarchicalDataItem(
{
code: `ETG`,
parent: `Africa`,
name: `Equatorial Guinea`,
population: 720213
}),
new CountyHierarchicalDataItem(
{
code: `ERT`,
parent: `Africa`,
name: `Eritrea`,
population: 5415280
}),
new CountyHierarchicalDataItem(
{
code: `ETH`,
parent: `Africa`,
name: `Ethiopia`,
population: 84734262
}),
new CountyHierarchicalDataItem(
{
code: `GBN`,
parent: `Africa`,
name: `Gabon`,
population: 1534262
}),
new CountyHierarchicalDataItem(
{
code: `GMB`,
parent: `Africa`,
name: `Gambia`,
population: 1776103
}),
new CountyHierarchicalDataItem(
{
code: `GHN`,
parent: `Africa`,
name: `Ghana`,
population: 24965816
}),
new CountyHierarchicalDataItem(
{
code: `GUN`,
parent: `Africa`,
name: `Guinea`,
population: 10221808
}),
new CountyHierarchicalDataItem(
{
code: `GNB`,
parent: `Africa`,
name: `Guinea-Bissau`,
population: 1547061
}),
new CountyHierarchicalDataItem(
{
code: `KEN`,
parent: `Africa`,
name: `Kenya`,
population: 41609728
}),
new CountyHierarchicalDataItem(
{
code: `LES`,
parent: `Africa`,
name: `Lesotho`,
population: 2193843
}),
new CountyHierarchicalDataItem(
{
code: `LBR`,
parent: `Africa`,
name: `Liberia`,
population: 4128572
}),
new CountyHierarchicalDataItem(
{
code: `MDG`,
parent: `Africa`,
name: `Madagascar`,
population: 21315135
}),
new CountyHierarchicalDataItem(
{
code: `MLW`,
parent: `Africa`,
name: `Malawi`,
population: 15380888
}),
new CountyHierarchicalDataItem(
{
code: `MAL`,
parent: `Africa`,
name: `Mali`,
population: 15839538
}),
new CountyHierarchicalDataItem(
{
code: `MRT`,
parent: `Africa`,
name: `Mauritania`,
population: 3541540
}),
new CountyHierarchicalDataItem(
{
code: `MUS`,
parent: `Africa`,
name: `Mauritius`,
population: 1286051
}),
new CountyHierarchicalDataItem(
{
code: `MOZ`,
parent: `Africa`,
name: `Mozambique`,
population: 23929708
}),
new CountyHierarchicalDataItem(
{
code: `NMB`,
parent: `Africa`,
name: `Namibia`,
population: 2324004
}),
new CountyHierarchicalDataItem(
{
code: `NER`,
parent: `Africa`,
name: `Niger`,
population: 16068994
}),
new CountyHierarchicalDataItem(
{
code: `NGA`,
parent: `Africa`,
name: `Nigeria`,
population: 162470737
}),
new CountyHierarchicalDataItem(
{
code: `RWD`,
parent: `Africa`,
name: `Rwanda`,
population: 10942950
}),
new CountyHierarchicalDataItem(
{
code: `STM`,
parent: `Africa`,
name: `Sao Tome`,
population: 168526
}),
new CountyHierarchicalDataItem(
{
code: `SEN`,
parent: `Africa`,
name: `Senegal`,
population: 12767556
}),
new CountyHierarchicalDataItem(
{
code: `SYC`,
parent: `Africa`,
name: `Seychelles`,
population: 86000
}),
new CountyHierarchicalDataItem(
{
code: `SRL`,
parent: `Africa`,
name: `Sierra Leone`,
population: 5997486
}),
new CountyHierarchicalDataItem(
{
code: `ZAF`,
parent: `Africa`,
name: `South Africa`,
population: 50586757
}),
new CountyHierarchicalDataItem(
{
code: `SSD`,
parent: `Africa`,
name: `South Sudan`,
population: 10314021
}),
new CountyHierarchicalDataItem(
{
code: `SDN`,
parent: `Africa`,
name: `Sudan`,
population: 34318385
}),
new CountyHierarchicalDataItem(
{
code: `SWZ`,
parent: `Africa`,
name: `Swaziland`,
population: 1067773
}),
new CountyHierarchicalDataItem(
{
code: `TNZ`,
parent: `Africa`,
name: `Tanzania`,
population: 46218486
}),
new CountyHierarchicalDataItem(
{
code: `TOG`,
parent: `Africa`,
name: `Togo`,
population: 6154813
}),
new CountyHierarchicalDataItem(
{
code: `UGN`,
parent: `Africa`,
name: `Uganda`,
population: 34509205
}),
new CountyHierarchicalDataItem(
{
code: `ZMB`,
parent: `Africa`,
name: `Zambia`,
population: 13474959
}),
new CountyHierarchicalDataItem(
{
code: `ZWE`,
parent: `Africa`,
name: `Zimbabwe`,
population: 12754378
}),
new CountyHierarchicalDataItem(
{
code: `AFG`,
parent: `Asia`,
name: `Afghanistan`,
population: 35320445
}),
new CountyHierarchicalDataItem(
{
code: `BAN`,
parent: `Asia`,
name: `Bangladesh`,
population: 150493658
}),
new CountyHierarchicalDataItem(
{
code: `BHT`,
parent: `Asia`,
name: `Bhutan`,
population: 738267
}),
new CountyHierarchicalDataItem(
{
code: `BRN`,
parent: `Asia`,
name: `Brunei`,
population: 405938
}),
new CountyHierarchicalDataItem(
{
code: `CAM`,
parent: `Asia`,
name: `Cambodia`,
population: 14305183
}),
new CountyHierarchicalDataItem(
{
code: `CHI`,
parent: `Asia`,
name: `China`,
population: 1344130000
}),
new CountyHierarchicalDataItem(
{
code: `HNK`,
parent: `Asia`,
name: `Hong Kong`,
population: 7071600
}),
new CountyHierarchicalDataItem(
{
code: `IND`,
parent: `Asia`,
name: `India`,
population: 1241491960
}),
new CountyHierarchicalDataItem(
{
code: `IDN`,
parent: `Asia`,
name: `Indonesia`,
population: 242325638
}),
new CountyHierarchicalDataItem(
{
code: `JPN`,
parent: `Asia`,
name: `Japan`,
population: 127817277
}),
new CountyHierarchicalDataItem(
{
code: `KZH`,
parent: `Asia`,
name: `Kazakhstan`,
population: 16558676
}),
new CountyHierarchicalDataItem(
{
code: `NKO`,
parent: `Asia`,
name: `North Korea`,
population: 24451285
}),
new CountyHierarchicalDataItem(
{
code: `SKO`,
parent: `Asia`,
name: `South Korea`,
population: 49779000
}),
new CountyHierarchicalDataItem(
{
code: `KGZ`,
parent: `Asia`,
name: `Kyrgyzstan`,
population: 5514600
}),
new CountyHierarchicalDataItem(
{
code: `LAO`,
parent: `Asia`,
name: `Lao PDR`,
population: 6288037
}),
new CountyHierarchicalDataItem(
{
code: `MAC`,
parent: `Asia`,
name: `Macao`,
population: 555731
}),
new CountyHierarchicalDataItem(
{
code: `MYS`,
parent: `Asia`,
name: `Malaysia`,
population: 28859154
}),
new CountyHierarchicalDataItem(
{
code: `MDV`,
parent: `Asia`,
name: `Maldives`,
population: 320081
}),
new CountyHierarchicalDataItem(
{
code: `MNG`,
parent: `Asia`,
name: `Mongolia`,
population: 2800114
}),
new CountyHierarchicalDataItem(
{
code: `MYM`,
parent: `Asia`,
name: `Myanmar`,
population: 48336763
}),
new CountyHierarchicalDataItem(
{
code: `NPL`,
parent: `Asia`,
name: `Nepal`,
population: 30485798
}),
new CountyHierarchicalDataItem(
{
code: `PHP`,
parent: `Asia`,
name: `Philippines`,
population: 94852030
}),
new CountyHierarchicalDataItem(
{
code: `SNG`,
parent: `Asia`,
name: `Singapore`,
population: 5183700
}),
new CountyHierarchicalDataItem(
{
code: `SRL`,
parent: `Asia`,
name: `Sri Lanka`,
population: 20869000
}),
new CountyHierarchicalDataItem(
{
code: `TKS`,
parent: `Asia`,
name: `Tajikistan`,
population: 6976958
}),
new CountyHierarchicalDataItem(
{
code: `THL`,
parent: `Asia`,
name: `Thailand`,
population: 69518555
}),
new CountyHierarchicalDataItem(
{
code: `TRK`,
parent: `Asia`,
name: `Turkmenistan`,
population: 5105301
}),
new CountyHierarchicalDataItem(
{
code: `UZB`,
parent: `Asia`,
name: `Uzbekistan`,
population: 29341200
}),
new CountyHierarchicalDataItem(
{
code: `VTN`,
parent: `Asia`,
name: `Vietnam`,
population: 87840000
}),
new CountyHierarchicalDataItem(
{
code: `ANT`,
parent: `Central America`,
name: `Antigua`,
population: 89612
}),
new CountyHierarchicalDataItem(
{
code: `ARB`,
parent: `Central America`,
name: `Aruba`,
population: 108141
}),
new CountyHierarchicalDataItem(
{
code: `BHM`,
parent: `Central America`,
name: `Bahamas`,
population: 347176
}),
new CountyHierarchicalDataItem(
{
code: `BRB`,
parent: `Central America`,
name: `Barbados`,
population: 273925
}),
new CountyHierarchicalDataItem(
{
code: `BLZ`,
parent: `Central America`,
name: `Belize`,
population: 356600
}),
new CountyHierarchicalDataItem(
{
code: `BRM`,
parent: `Central America`,
name: `Bermuda`,
population: 64700
}),
new CountyHierarchicalDataItem(
{
code: `CYI`,
parent: `Central America`,
name: `Cayman Islands`,
population: 56729
}),
new CountyHierarchicalDataItem(
{
code: `CSR`,
parent: `Central America`,
name: `Costa Rica`,
population: 4726575
}),
new CountyHierarchicalDataItem(
{
code: `CUB`,
parent: `Central America`,
name: `Cuba`,
population: 11253665
}),
new CountyHierarchicalDataItem(
{
code: `CUR`,
parent: `Central America`,
name: `Curacao`,
population: 145619
}),
new CountyHierarchicalDataItem(
{
code: `DMA`,
parent: `Central America`,
name: `Dominica`,
population: 67675
}),
new CountyHierarchicalDataItem(
{
code: `DOM`,
parent: `Central America`,
name: `Dominican Republic`,
population: 10056181
}),
new CountyHierarchicalDataItem(
{
code: `SLV`,
parent: `Central America`,
name: `El Salvador`,
population: 6227491
}),
new CountyHierarchicalDataItem(
{
code: `FIS`,
parent: `Central America`,
name: `Faeroe Islands`,
population: 48863
}),
new CountyHierarchicalDataItem(
{
code: `GND`,
parent: `Central America`,
name: `Grenada`,
population: 104890
}),
new CountyHierarchicalDataItem(
{
code: `GUA`,
parent: `Central America`,
name: `Guam`,
population: 182111
}),
new CountyHierarchicalDataItem(
{
code: `GTM`,
parent: `Central America`,
name: `Guatemala`,
population: 14757316
}),
new CountyHierarchicalDataItem(
{
code: `HAT`,
parent: `Central America`,
name: `Haiti`,
population: 10123787
}),
new CountyHierarchicalDataItem(
{
code: `HON`,
parent: `Central America`,
name: `Honduras`,
population: 7754687
}),
new CountyHierarchicalDataItem(
{
code: `JAM`,
parent: `Central America`,
name: `Jamaica`,
population: 2706500
}),
new CountyHierarchicalDataItem(
{
code: `NCR`,
parent: `Central America`,
name: `Nicaragua`,
population: 5869859
}),
new CountyHierarchicalDataItem(
{
code: `NMI`,
parent: `Central America`,
name: `Northern Mariana Islands`,
population: 61174
}),
new CountyHierarchicalDataItem(
{
code: `PAN`,
parent: `Central America`,
name: `Panama`,
population: 3571185
}),
new CountyHierarchicalDataItem(
{
code: `PRT`,
parent: `Central America`,
name: `Puerto Rico`,
population: 3706690
}),
new CountyHierarchicalDataItem(
{
code: `STK`,
parent: `Central America`,
name: `St. Kitts`,
population: 53051
}),
new CountyHierarchicalDataItem(
{
code: `STL`,
parent: `Central America`,
name: `St. Lucia`,
population: 176000
}),
new CountyHierarchicalDataItem(
{
code: `STV`,
parent: `Central America`,
name: `St. Vincent`,
population: 109365
}),
new CountyHierarchicalDataItem(
{
code: `TAB`,
parent: `Central America`,
name: `Trinidad and Tobago`,
population: 1346350
}),
new CountyHierarchicalDataItem(
{
code: `RCI`,
parent: `Central America`,
name: `Turks and Caicos Islands`,
population: 39184
}),
new CountyHierarchicalDataItem(
{
code: `ISV`,
parent: `Central America`,
name: `US Virgin Islands`,
population: 109666
}),
new CountyHierarchicalDataItem(
{
code: `ALB`,
parent: `Europe`,
name: `Albania`,
population: 3215988
}),
new CountyHierarchicalDataItem(
{
code: `AND`,
parent: `Europe`,
name: `Andorra`,
population: 86165
}),
new CountyHierarchicalDataItem(
{
code: `ARM`,
parent: `Europe`,
name: `Armenia`,
population: 3100236
}),
new CountyHierarchicalDataItem(
{
code: `AUT`,
parent: `Europe`,
name: `Austria`,
population: 8423635
}),
new CountyHierarchicalDataItem(
{
code: `BER`,
parent: `Europe`,
name: `Belarus`,
population: 9473000
}),
new CountyHierarchicalDataItem(
{
code: `BEL`,
parent: `Europe`,
name: `Belgium`,
population: 11020952
}),
new CountyHierarchicalDataItem(
{
code: `BIH`,
parent: `Europe`,
name: `Bosnia`,
population: 3752228
}),
new CountyHierarchicalDataItem(
{
code: `BUL`,
parent: `Europe`,
name: `Bulgaria`,
population: 7348328
}),
new CountyHierarchicalDataItem(
{
code: `CHI`,
parent: `Europe`,
name: `Channel Islands`,
population: 153876
}),
new CountyHierarchicalDataItem(
{
code: `CRO`,
parent: `Europe`,
name: `Croatia`,
population: 4403000
}),
new CountyHierarchicalDataItem(
{
code: `CYP`,
parent: `Europe`,
name: `Cyprus`,
population: 1116564
}),
new CountyHierarchicalDataItem(
{
code: `CZE`,
parent: `Europe`,
name: `Czechia`,
population: 10496088
}),
new CountyHierarchicalDataItem(
{
code: `DEN`,
parent: `Europe`,
name: `Denmark`,
population: 5570572
}),
new CountyHierarchicalDataItem(
{
code: `EST`,
parent: `Europe`,
name: `Estonia`,
population: 1339928
}),
new CountyHierarchicalDataItem(
{
code: `FIN`,
parent: `Europe`,
name: `Finland`,
population: 5388272
}),
new CountyHierarchicalDataItem(
{
code: `FRA`,
parent: `Europe`,
name: `France`,
population: 65433714
}),
new CountyHierarchicalDataItem(
{
code: `GEO`,
parent: `Europe`,
name: `Georgia`,
population: 4486000
}),
new CountyHierarchicalDataItem(
{
code: `DEU`,
parent: `Europe`,
name: `Germany`,
population: 81797673
}),
new CountyHierarchicalDataItem(
{
code: `GRC`,
parent: `Europe`,
name: `Greece`,
population: 11300410
}),
new CountyHierarchicalDataItem(
{
code: `HUN`,
parent: `Europe`,
name: `Hungary`,
population: 9971727
}),
new CountyHierarchicalDataItem(
{
code: `ICE`,
parent: `Europe`,
name: `Iceland`,
population: 319014
}),
new CountyHierarchicalDataItem(
{
code: `IRE`,
parent: `Europe`,
name: `Ireland`,
population: 4576317
}),
new CountyHierarchicalDataItem(
{
code: `IOM`,
parent: `Europe`,
name: `Isle of Man`,
population: 83327
}),
new CountyHierarchicalDataItem(
{
code: `ITA`,
parent: `Europe`,
name: `Italy`,
population: 60723603
}),
new CountyHierarchicalDataItem(
{
code: `KOS`,
parent: `Europe`,
name: `Kosovo`,
population: 1802765
}),
new CountyHierarchicalDataItem(
{
code: `LAT`,
parent: `Europe`,
name: `Latvia`,
population: 2058184
}),
new CountyHierarchicalDataItem(
{
code: `LVA`,
parent: `Europe`,
name: `Liechtenstein`,
population: 36304
}),
new CountyHierarchicalDataItem(
{
code: `LTU`,
parent: `Europe`,
name: `Lithuania`,
population: 3030173
}),
new CountyHierarchicalDataItem(
{
code: `LUX`,
parent: `Europe`,
name: `Luxembourg`,
population: 518252
}),
new CountyHierarchicalDataItem(
{
code: `MKD`,
parent: `Europe`,
name: `North Macedonia`,
population: 2063893
}),
new CountyHierarchicalDataItem(
{
code: `MLT`,
parent: `Europe`,
name: `Malta`,
population: 415654
}),
new CountyHierarchicalDataItem(
{
code: `MDA`,
parent: `Europe`,
name: `Moldova`,
population: 3559000
}),
new CountyHierarchicalDataItem(
{
code: `MON`,
parent: `Europe`,
name: `Monaco`,
population: 35427
}),
new CountyHierarchicalDataItem(
{
code: `MNE`,
parent: `Europe`,
name: `Montenegro`,
population: 632261
}),
new CountyHierarchicalDataItem(
{
code: `MLD`,
parent: `Europe`,
name: `Netherlands`,
population: 16693074
}),
new CountyHierarchicalDataItem(
{
code: `NOR`,
parent: `Europe`,
name: `Norway`,
population: 4953088
}),
new CountyHierarchicalDataItem(
{
code: `POL`,
parent: `Europe`,
name: `Poland`,
population: 38534157
}),
new CountyHierarchicalDataItem(
{
code: `POR`,
parent: `Europe`,
name: `Portugal`,
population: 10556999
}),
new CountyHierarchicalDataItem(
{
code: `ROM`,
parent: `Europe`,
name: `Romania`,
population: 21384832
}),
new CountyHierarchicalDataItem(
{
code: `RUS`,
parent: `Europe`,
name: `Russia`,
population: 142960000
}),
new CountyHierarchicalDataItem(
{
code: `SMR`,
parent: `Europe`,
name: `San Marino`,
population: 31735
}),
new CountyHierarchicalDataItem(
{
code: `SBR`,
parent: `Europe`,
name: `Serbia`,
population: 7258745
}),
new CountyHierarchicalDataItem(
{
code: `STM`,
parent: `Europe`,
name: `Sint Maarten`,
population: 36609
}),
new CountyHierarchicalDataItem(
{
code: `SVK`,
parent: `Europe`,
name: `Slovakia`,
population: 5398384
}),
new CountyHierarchicalDataItem(
{
code: `SLO`,
parent: `Europe`,
name: `Slovenia`,
population: 2052843
}),
new CountyHierarchicalDataItem(
{
code: `ESP`,
parent: `Europe`,
name: `Spain`,
population: 46174601
}),
new CountyHierarchicalDataItem(
{
code: `STM`,
parent: `Europe`,
name: `St. Martin`,
population: 30615
}),
new CountyHierarchicalDataItem(
{
code: `SWE`,
parent: `Europe`,
name: `Sweden`,
population: 9449213
}),
new CountyHierarchicalDataItem(
{
code: `CHE`,
parent: `Europe`,
name: `Switzerland`,
population: 7912398
}),
new CountyHierarchicalDataItem(
{
code: `UKR`,
parent: `Europe`,
name: `Ukraine`,
population: 45706100
}),
new CountyHierarchicalDataItem(
{
code: `GBR`,
parent: `Europe`,
name: `United Kingdom`,
population: 62744081
}),
new CountyHierarchicalDataItem(
{
code: `DZA`,
parent: `Middle East`,
name: `Algeria`,
population: 35980193
}),
new CountyHierarchicalDataItem(
{
code: `AZE`,
parent: `Middle East`,
name: `Azerbaijan`,
population: 9173082
}),
new CountyHierarchicalDataItem(
{
code: `BHR`,
parent: `Middle East`,
name: `Bahrain`,
population: 1323535
}),
new CountyHierarchicalDataItem(
{
code: `EGY`,
parent: `Middle East`,
name: `Egypt`,
population: 82536770
}),
new CountyHierarchicalDataItem(
{
code: `IRN`,
parent: `Middle East`,
name: `Iran`,
population: 74798599
}),
new CountyHierarchicalDataItem(
{
code: `IRQ`,
parent: `Middle East`,
name: `Iraq`,
population: 32961959
}),
new CountyHierarchicalDataItem(
{
code: `ISR`,
parent: `Middle East`,
name: `Israel`,
population: 7765900
}),
new CountyHierarchicalDataItem(
{
code: `JOR`,
parent: `Middle East`,
name: `Jordan`,
population: 6181000
}),
new CountyHierarchicalDataItem(
{
code: `KWT`,
parent: `Middle East`,
name: `Kuwait`,
population: 2818042
}),
new CountyHierarchicalDataItem(
{
code: `LBN`,
parent: `Middle East`,
name: `Lebanon`,
population: 4259405
}),
new CountyHierarchicalDataItem(
{
code: `LBY`,
parent: `Middle East`,
name: `Libya`,
population: 6422772
}),
new CountyHierarchicalDataItem(
{
code: `MAR`,
parent: `Middle East`,
name: `Morocco`,
population: 32272974
}),
new CountyHierarchicalDataItem(
{
code: `OMN`,
parent: `Middle East`,
name: `Oman`,
population: 2846145
}),
new CountyHierarchicalDataItem(
{
code: `PKS`,
parent: `Middle East`,
name: `Pakistan`,
population: 176745364
}),
new CountyHierarchicalDataItem(
{
code: `QTR`,
parent: `Middle East`,
name: `Qatar`,
population: 1870041
}),
new CountyHierarchicalDataItem(
{
code: `SAR`,
parent: `Middle East`,
name: `Saudi Arabia`,
population: 28082541
}),
new CountyHierarchicalDataItem(
{
code: `SOM`,
parent: `Middle East`,
name: `Somalia`,
population: 9556873
}),
new CountyHierarchicalDataItem(
{
code: `SYR`,
parent: `Middle East`,
name: `Syria`,
population: 20820311
}),
new CountyHierarchicalDataItem(
{
code: `TUN`,
parent: `Middle East`,
name: `Tunisia`,
population: 10673800
}),
new CountyHierarchicalDataItem(
{
code: `TUR`,
parent: `Middle East`,
name: `Turkey`,
population: 73639596
}),
new CountyHierarchicalDataItem(
{
code: `UAE`,
parent: `Middle East`,
name: `United Arab Emirates`,
population: 7890924
}),
new CountyHierarchicalDataItem(
{
code: `WTB`,
parent: `Middle East`,
name: `West Bank`,
population: 3927051
}),
new CountyHierarchicalDataItem(
{
code: `YEM`,
parent: `Middle East`,
name: `Yemen`,
population: 24799880
}),
new CountyHierarchicalDataItem(
{
code: `CAN`,
parent: `North America`,
name: `Canada`,
population: 34483975
}),
new CountyHierarchicalDataItem(
{
code: `GRL`,
parent: `North America`,
name: `Greenland`,
population: 56840
}),
new CountyHierarchicalDataItem(
{
code: `MEX`,
parent: `North America`,
name: `Mexico`,
population: 114793341
}),
new CountyHierarchicalDataItem(
{
code: `USA`,
parent: `North America`,
name: `United States`,
population: 311591917
}),
new CountyHierarchicalDataItem(
{
code: `AMS`,
parent: `Oceania`,
name: `American Samoa`,
population: 69543
}),
new CountyHierarchicalDataItem(
{
code: `AUS`,
parent: `Oceania`,
name: `Australia`,
population: 22323900
}),
new CountyHierarchicalDataItem(
{
code: `FIJ`,
parent: `Oceania`,
name: `Fiji`,
population: 868406
}),
new CountyHierarchicalDataItem(
{
code: `FRP`,
parent: `Oceania`,
name: `French Polynesia`,
population: 273777
}),
new CountyHierarchicalDataItem(
{
code: `KIR`,
parent: `Oceania`,
name: `Kiribati`,
population: 101093
}),
new CountyHierarchicalDataItem(
{
code: `MIS`,
parent: `Oceania`,
name: `Marshall Islands`,
population: 54816
}),
new CountyHierarchicalDataItem(
{
code: `MCR`,
parent: `Oceania`,
name: `Micronesia`,
population: 111542
}),
new CountyHierarchicalDataItem(
{
code: `NCD`,
parent: `Oceania`,
name: `New Caledonia`,
population: 254024
}),
new CountyHierarchicalDataItem(
{
code: `NZL`,
parent: `Oceania`,
name: `New Zealand`,
population: 4405200
}),
new CountyHierarchicalDataItem(
{
code: `PAL`,
parent: `Oceania`,
name: `Palau`,
population: 20609
}),
new CountyHierarchicalDataItem(
{
code: `PNG`,
parent: `Oceania`,
name: `Papua New Guinea`,
population: 7013829
}),
new CountyHierarchicalDataItem(
{
code: `SAM`,
parent: `Oceania`,
name: `Samoa`,
population: 183874
}),
new CountyHierarchicalDataItem(
{
code: `SIS`,
parent: `Oceania`,
name: `Solomon Islands`,
population: 552267
}),
new CountyHierarchicalDataItem(
{
code: `TML`,
parent: `Oceania`,
name: `Timor-Leste`,
population: 1175880
}),
new CountyHierarchicalDataItem(
{
code: `TON`,
parent: `Oceania`,
name: `Tonga`,
population: 104509
}),
new CountyHierarchicalDataItem(
{
code: `TUV`,
parent: `Oceania`,
name: `Tuvalu`,
population: 9847
}),
new CountyHierarchicalDataItem(
{
code: `VNT`,
parent: `Oceania`,
name: `Vanuatu`,
population: 245619
}),
new CountyHierarchicalDataItem(
{
code: `ARG`,
parent: `South America`,
name: `Argentina`,
population: 40764561
}),
new CountyHierarchicalDataItem(
{
code: `BOL`,
parent: `South America`,
name: `Bolivia`,
population: 10088108
}),
new CountyHierarchicalDataItem(
{
code: `BRA`,
parent: `South America`,
name: `Brazil`,
population: 196655014
}),
new CountyHierarchicalDataItem(
{
code: `CHI`,
parent: `South America`,
name: `Chile`,
population: 17269525
}),
new CountyHierarchicalDataItem(
{
code: `COL`,
parent: `South America`,
name: `Colombia`,
population: 46927125
}),
new CountyHierarchicalDataItem(
{
code: `ECU`,
parent: `South America`,
name: `Ecuador`,
population: 14666055
}),
new CountyHierarchicalDataItem(
{
code: `GUY`,
parent: `South America`,
name: `Guyana`,
population: 756040
}),
new CountyHierarchicalDataItem(
{
code: `PAR`,
parent: `South America`,
name: `Paraguay`,
population: 6568290
}),
new CountyHierarchicalDataItem(
{
code: `PER`,
parent: `South America`,
name: `Peru`,
population: 29399817
}),
new CountyHierarchicalDataItem(
{
code: `SUR`,
parent: `South America`,
name: `Suriname`,
population: 529419
}),
new CountyHierarchicalDataItem(
{
code: `URG`,
parent: `South America`,
name: `Uruguay`,
population: 3368595
}),
new CountyHierarchicalDataItem(
{
code: `VEN`,
parent: `South America`,
name: `Venezuela`,
population: 29278000
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcTreemapModule } from 'igniteui-webcomponents-charts';
import { IgcTreemapComponent } from 'igniteui-webcomponents-charts';
import { CountyHierarchicalDataItem, CountyHierarchicalData } from './CountyHierarchicalData';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcTreemapModule
);
export class Sample {
private treemap: IgcTreemapComponent
private _bind: () => void;
constructor() {
var treemap = this.treemap = document.getElementById('treemap') as IgcTreemapComponent;
this._bind = () => {
treemap.dataSource = this.countyHierarchicalData;
}
this._bind();
}
private _countyHierarchicalData: CountyHierarchicalData = null;
public get countyHierarchicalData(): CountyHierarchicalData {
if (this._countyHierarchicalData == null)
{
this._countyHierarchicalData = new CountyHierarchicalData();
}
return this._countyHierarchicalData;
}
}
new Sample();
ts<!DOCTYPE html>
<html>
<head>
<title>Sample | Ignite UI | Web Components | infragistics</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" />
<link rel="stylesheet" href="/src/index.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<div class="legend-title">
Comparing Population of Countries
</div>
<div class="container fill">
<igc-treemap
name="treemap"
id="treemap"
parent-id-member-path="parent"
id-member-path="name"
label-member-path="name"
value-member-path="population"
fill-scale-mode="Value"
fill-scale-minimum-value="0"
fill-scale-maximum-value="1500000000"
fill-brushes="rgba(78, 98, 207, 1) rgba(138, 88, 214, 1)"
is-fill-scale-logarithmic="true"
root-title="Countries"
header-display-mode="Overlay"
parent-node-bottom-padding="0"
parent-node-left-padding="0"
parent-node-right-padding="0"
parent-node-top-padding="0"
outline="black"
stroke-thickness="1">
</igc-treemap>
</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
このサンプルが気に入りましたか? 完全な Ignite UI for Web Componentsツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
ツリーマップの推奨事項
Web Components ツリーマップはプロジェクトに適していますか?
色とサイズのディメンションが何らかの方法でツリー構造と関連付けられている場合、他の方法では見つけにくいパターンを簡単に識別できます。ツリーマップは、より効率的にスペースを使用します。このため、数千の項目を同時に画面に表示することが可能となります。
- ツリーマップは、データ ポイントの分類とそれらの値の相対的な違いの伝達に苦手なときが多い円チャートや他の形式のエリア チャートよりも効果的です。
- ツリーマップは、ドリルダウン シナリオ用に設計されています。より効率的なデータ分析のために、小さな長方形で表されるデータ セットに継続的にドリルダウンできます。
- ツリーマップは、数値の表示ではなく相対的順位の表示に向いています。
他のデータの視覚化と同様に、ツリーマップ チャートの視覚化は特定のシナリオで使用する必要があります。棒チャートや折れ線チャートのような視覚化と同じ問題は解決されません。これは、より複雑で豊富なデータ表示を目的としています。
ツリーマップのユース ケース
ツリーマップを選択するための一般的なユース ケースがいくつかあります:
- 階層データ (ブランチとサブブランチを持つツリーとして構成されたデータ) をドリルダウンする場合。
- カテゴリ (ブランチ) とサブカテゴリ (サブブランチ) 間の相対的な重みと比較値の階層を説明したい場合。
- コンパクトで効率の良い視覚化が必要な大規模なデータ セットを表示したい場合。
- 正確な値を使用せずに、一目で迅速なデータ分析を提供したい場合長方形の相対的なサイズは、パターンや外れ値を非常に迅速に識別するのに役立ちます。
- スペースを有効に使用したい場合ツリーマップは、数千の項目を同時に画面に表示することが可能となります。
以下の場合にツリーマップを使用しないでください:
- 正確な値を必要とするデータ ストーリーを説明している場合。
- 負のデータ値がある場合。
- フラットで非階層的なデータがある場合。
- データのサイズが類似している場合。
ツリーマップのデータ構造
- データ ソースはデータ項目の配列またはリストである必要があります。
- データ ソースにはデータ項目を少なくとも 1 つ含む必要があり、含まれない場合はマップでノードがレンダリングされません。
- すべてのデータ項目には、
labelMemberPath
プロパティにマッピングする必要があるデータ列 (文字列など) を少なくとも 1 列含める必要があります。 - すべてのデータ項目には、
valueMemberPath
プロパティにマッピングする必要がある数値データ列を少なくとも 1 列含める必要があります。 - データを整理されたタイルに分類するには、オプションで
parentIdMemberPath
およびidMemberPath
を使用できます。
Web Components ツリーマップの構成
次の例では、ツリーマップは、layoutType
プロパティと layoutOrientation
プロパティを変更することにより、アルゴリズム構造を変更する機能を示しています。
export class CountyHierarchicalDataItem {
public constructor(init: Partial<CountyHierarchicalDataItem>) {
Object.assign(this, init);
}
public code: string;
public parent: string;
public name: string;
public population: number;
}
export class CountyHierarchicalData extends Array<CountyHierarchicalDataItem> {
public constructor(items: Array<CountyHierarchicalDataItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new CountyHierarchicalDataItem(
{
code: `AFC`,
parent: null,
name: `Africa`,
population: null
}),
new CountyHierarchicalDataItem(
{
code: `ASA`,
parent: null,
name: `Asia`,
population: null
}),
new CountyHierarchicalDataItem(
{
code: `EUR`,
parent: null,
name: `Europe`,
population: null
}),
new CountyHierarchicalDataItem(
{
code: `MDE`,
parent: null,
name: `Middle East`,
population: null
}),
new CountyHierarchicalDataItem(
{
code: `NAM`,
parent: null,
name: `North America`,
population: null
}),
new CountyHierarchicalDataItem(
{
code: `CAM`,
parent: null,
name: `Central America`,
population: null
}),
new CountyHierarchicalDataItem(
{
code: `SAM`,
parent: null,
name: `South America`,
population: null
}),
new CountyHierarchicalDataItem(
{
code: `OCE`,
parent: null,
name: `Oceania`,
population: null
}),
new CountyHierarchicalDataItem(
{
code: `ANG`,
parent: `Africa`,
name: `Angola`,
population: 19618432
}),
new CountyHierarchicalDataItem(
{
code: `BEN`,
parent: `Africa`,
name: `Benin`,
population: 9099922
}),
new CountyHierarchicalDataItem(
{
code: `BOT`,
parent: `Africa`,
name: `Botswana`,
population: 2030738
}),
new CountyHierarchicalDataItem(
{
code: `BUR`,
parent: `Africa`,
name: `Burkina Faso`,
population: 16967845
}),
new CountyHierarchicalDataItem(
{
code: `BUR`,
parent: `Africa`,
name: `Burundi`,
population: 8575172
}),
new CountyHierarchicalDataItem(
{
code: `CAM`,
parent: `Africa`,
name: `Cameroon`,
population: 20030362
}),
new CountyHierarchicalDataItem(
{
code: `CPV`,
parent: `Africa`,
name: `Cape Verde`,
population: 500585
}),
new CountyHierarchicalDataItem(
{
code: `CAR`,
parent: `Africa`,
name: `Central African Republic`,
population: 4486837
}),
new CountyHierarchicalDataItem(
{
code: `CHD`,
parent: `Africa`,
name: `Chad`,
population: 11525496
}),
new CountyHierarchicalDataItem(
{
code: `COM`,
parent: `Africa`,
name: `Comoros`,
population: 753943
}),
new CountyHierarchicalDataItem(
{
code: `DRC`,
parent: `Africa`,
name: `Congo DRC`,
population: 67757577
}),
new CountyHierarchicalDataItem(
{
code: `CRP`,
parent: `Africa`,
name: `Congo Republic`,
population: 4139748
}),
new CountyHierarchicalDataItem(
{
code: `CIR`,
parent: `Africa`,
name: `Cote Ivoire`,
population: 20152894
}),
new CountyHierarchicalDataItem(
{
code: `DBT`,
parent: `Africa`,
name: `Djibouti`,
population: 905564
}),
new CountyHierarchicalDataItem(
{
code: `ETG`,
parent: `Africa`,
name: `Equatorial Guinea`,
population: 720213
}),
new CountyHierarchicalDataItem(
{
code: `ERT`,
parent: `Africa`,
name: `Eritrea`,
population: 5415280
}),
new CountyHierarchicalDataItem(
{
code: `ETH`,
parent: `Africa`,
name: `Ethiopia`,
population: 84734262
}),
new CountyHierarchicalDataItem(
{
code: `GBN`,
parent: `Africa`,
name: `Gabon`,
population: 1534262
}),
new CountyHierarchicalDataItem(
{
code: `GMB`,
parent: `Africa`,
name: `Gambia`,
population: 1776103
}),
new CountyHierarchicalDataItem(
{
code: `GHN`,
parent: `Africa`,
name: `Ghana`,
population: 24965816
}),
new CountyHierarchicalDataItem(
{
code: `GUN`,
parent: `Africa`,
name: `Guinea`,
population: 10221808
}),
new CountyHierarchicalDataItem(
{
code: `GNB`,
parent: `Africa`,
name: `Guinea-Bissau`,
population: 1547061
}),
new CountyHierarchicalDataItem(
{
code: `KEN`,
parent: `Africa`,
name: `Kenya`,
population: 41609728
}),
new CountyHierarchicalDataItem(
{
code: `LES`,
parent: `Africa`,
name: `Lesotho`,
population: 2193843
}),
new CountyHierarchicalDataItem(
{
code: `LBR`,
parent: `Africa`,
name: `Liberia`,
population: 4128572
}),
new CountyHierarchicalDataItem(
{
code: `MDG`,
parent: `Africa`,
name: `Madagascar`,
population: 21315135
}),
new CountyHierarchicalDataItem(
{
code: `MLW`,
parent: `Africa`,
name: `Malawi`,
population: 15380888
}),
new CountyHierarchicalDataItem(
{
code: `MAL`,
parent: `Africa`,
name: `Mali`,
population: 15839538
}),
new CountyHierarchicalDataItem(
{
code: `MRT`,
parent: `Africa`,
name: `Mauritania`,
population: 3541540
}),
new CountyHierarchicalDataItem(
{
code: `MUS`,
parent: `Africa`,
name: `Mauritius`,
population: 1286051
}),
new CountyHierarchicalDataItem(
{
code: `MOZ`,
parent: `Africa`,
name: `Mozambique`,
population: 23929708
}),
new CountyHierarchicalDataItem(
{
code: `NMB`,
parent: `Africa`,
name: `Namibia`,
population: 2324004
}),
new CountyHierarchicalDataItem(
{
code: `NER`,
parent: `Africa`,
name: `Niger`,
population: 16068994
}),
new CountyHierarchicalDataItem(
{
code: `NGA`,
parent: `Africa`,
name: `Nigeria`,
population: 162470737
}),
new CountyHierarchicalDataItem(
{
code: `RWD`,
parent: `Africa`,
name: `Rwanda`,
population: 10942950
}),
new CountyHierarchicalDataItem(
{
code: `STM`,
parent: `Africa`,
name: `Sao Tome`,
population: 168526
}),
new CountyHierarchicalDataItem(
{
code: `SEN`,
parent: `Africa`,
name: `Senegal`,
population: 12767556
}),
new CountyHierarchicalDataItem(
{
code: `SYC`,
parent: `Africa`,
name: `Seychelles`,
population: 86000
}),
new CountyHierarchicalDataItem(
{
code: `SRL`,
parent: `Africa`,
name: `Sierra Leone`,
population: 5997486
}),
new CountyHierarchicalDataItem(
{
code: `ZAF`,
parent: `Africa`,
name: `South Africa`,
population: 50586757
}),
new CountyHierarchicalDataItem(
{
code: `SSD`,
parent: `Africa`,
name: `South Sudan`,
population: 10314021
}),
new CountyHierarchicalDataItem(
{
code: `SDN`,
parent: `Africa`,
name: `Sudan`,
population: 34318385
}),
new CountyHierarchicalDataItem(
{
code: `SWZ`,
parent: `Africa`,
name: `Swaziland`,
population: 1067773
}),
new CountyHierarchicalDataItem(
{
code: `TNZ`,
parent: `Africa`,
name: `Tanzania`,
population: 46218486
}),
new CountyHierarchicalDataItem(
{
code: `TOG`,
parent: `Africa`,
name: `Togo`,
population: 6154813
}),
new CountyHierarchicalDataItem(
{
code: `UGN`,
parent: `Africa`,
name: `Uganda`,
population: 34509205
}),
new CountyHierarchicalDataItem(
{
code: `ZMB`,
parent: `Africa`,
name: `Zambia`,
population: 13474959
}),
new CountyHierarchicalDataItem(
{
code: `ZWE`,
parent: `Africa`,
name: `Zimbabwe`,
population: 12754378
}),
new CountyHierarchicalDataItem(
{
code: `AFG`,
parent: `Asia`,
name: `Afghanistan`,
population: 35320445
}),
new CountyHierarchicalDataItem(
{
code: `BAN`,
parent: `Asia`,
name: `Bangladesh`,
population: 150493658
}),
new CountyHierarchicalDataItem(
{
code: `BHT`,
parent: `Asia`,
name: `Bhutan`,
population: 738267
}),
new CountyHierarchicalDataItem(
{
code: `BRN`,
parent: `Asia`,
name: `Brunei`,
population: 405938
}),
new CountyHierarchicalDataItem(
{
code: `CAM`,
parent: `Asia`,
name: `Cambodia`,
population: 14305183
}),
new CountyHierarchicalDataItem(
{
code: `CHI`,
parent: `Asia`,
name: `China`,
population: 1344130000
}),
new CountyHierarchicalDataItem(
{
code: `HNK`,
parent: `Asia`,
name: `Hong Kong`,
population: 7071600
}),
new CountyHierarchicalDataItem(
{
code: `IND`,
parent: `Asia`,
name: `India`,
population: 1241491960
}),
new CountyHierarchicalDataItem(
{
code: `IDN`,
parent: `Asia`,
name: `Indonesia`,
population: 242325638
}),
new CountyHierarchicalDataItem(
{
code: `JPN`,
parent: `Asia`,
name: `Japan`,
population: 127817277
}),
new CountyHierarchicalDataItem(
{
code: `KZH`,
parent: `Asia`,
name: `Kazakhstan`,
population: 16558676
}),
new CountyHierarchicalDataItem(
{
code: `NKO`,
parent: `Asia`,
name: `North Korea`,
population: 24451285
}),
new CountyHierarchicalDataItem(
{
code: `SKO`,
parent: `Asia`,
name: `South Korea`,
population: 49779000
}),
new CountyHierarchicalDataItem(
{
code: `KGZ`,
parent: `Asia`,
name: `Kyrgyzstan`,
population: 5514600
}),
new CountyHierarchicalDataItem(
{
code: `LAO`,
parent: `Asia`,
name: `Lao PDR`,
population: 6288037
}),
new CountyHierarchicalDataItem(
{
code: `MAC`,
parent: `Asia`,
name: `Macao`,
population: 555731
}),
new CountyHierarchicalDataItem(
{
code: `MYS`,
parent: `Asia`,
name: `Malaysia`,
population: 28859154
}),
new CountyHierarchicalDataItem(
{
code: `MDV`,
parent: `Asia`,
name: `Maldives`,
population: 320081
}),
new CountyHierarchicalDataItem(
{
code: `MNG`,
parent: `Asia`,
name: `Mongolia`,
population: 2800114
}),
new CountyHierarchicalDataItem(
{
code: `MYM`,
parent: `Asia`,
name: `Myanmar`,
population: 48336763
}),
new CountyHierarchicalDataItem(
{
code: `NPL`,
parent: `Asia`,
name: `Nepal`,
population: 30485798
}),
new CountyHierarchicalDataItem(
{
code: `PHP`,
parent: `Asia`,
name: `Philippines`,
population: 94852030
}),
new CountyHierarchicalDataItem(
{
code: `SNG`,
parent: `Asia`,
name: `Singapore`,
population: 5183700
}),
new CountyHierarchicalDataItem(
{
code: `SRL`,
parent: `Asia`,
name: `Sri Lanka`,
population: 20869000
}),
new CountyHierarchicalDataItem(
{
code: `TKS`,
parent: `Asia`,
name: `Tajikistan`,
population: 6976958
}),
new CountyHierarchicalDataItem(
{
code: `THL`,
parent: `Asia`,
name: `Thailand`,
population: 69518555
}),
new CountyHierarchicalDataItem(
{
code: `TRK`,
parent: `Asia`,
name: `Turkmenistan`,
population: 5105301
}),
new CountyHierarchicalDataItem(
{
code: `UZB`,
parent: `Asia`,
name: `Uzbekistan`,
population: 29341200
}),
new CountyHierarchicalDataItem(
{
code: `VTN`,
parent: `Asia`,
name: `Vietnam`,
population: 87840000
}),
new CountyHierarchicalDataItem(
{
code: `ANT`,
parent: `Central America`,
name: `Antigua`,
population: 89612
}),
new CountyHierarchicalDataItem(
{
code: `ARB`,
parent: `Central America`,
name: `Aruba`,
population: 108141
}),
new CountyHierarchicalDataItem(
{
code: `BHM`,
parent: `Central America`,
name: `Bahamas`,
population: 347176
}),
new CountyHierarchicalDataItem(
{
code: `BRB`,
parent: `Central America`,
name: `Barbados`,
population: 273925
}),
new CountyHierarchicalDataItem(
{
code: `BLZ`,
parent: `Central America`,
name: `Belize`,
population: 356600
}),
new CountyHierarchicalDataItem(
{
code: `BRM`,
parent: `Central America`,
name: `Bermuda`,
population: 64700
}),
new CountyHierarchicalDataItem(
{
code: `CYI`,
parent: `Central America`,
name: `Cayman Islands`,
population: 56729
}),
new CountyHierarchicalDataItem(
{
code: `CSR`,
parent: `Central America`,
name: `Costa Rica`,
population: 4726575
}),
new CountyHierarchicalDataItem(
{
code: `CUB`,
parent: `Central America`,
name: `Cuba`,
population: 11253665
}),
new CountyHierarchicalDataItem(
{
code: `CUR`,
parent: `Central America`,
name: `Curacao`,
population: 145619
}),
new CountyHierarchicalDataItem(
{
code: `DMA`,
parent: `Central America`,
name: `Dominica`,
population: 67675
}),
new CountyHierarchicalDataItem(
{
code: `DOM`,
parent: `Central America`,
name: `Dominican Republic`,
population: 10056181
}),
new CountyHierarchicalDataItem(
{
code: `SLV`,
parent: `Central America`,
name: `El Salvador`,
population: 6227491
}),
new CountyHierarchicalDataItem(
{
code: `FIS`,
parent: `Central America`,
name: `Faeroe Islands`,
population: 48863
}),
new CountyHierarchicalDataItem(
{
code: `GND`,
parent: `Central America`,
name: `Grenada`,
population: 104890
}),
new CountyHierarchicalDataItem(
{
code: `GUA`,
parent: `Central America`,
name: `Guam`,
population: 182111
}),
new CountyHierarchicalDataItem(
{
code: `GTM`,
parent: `Central America`,
name: `Guatemala`,
population: 14757316
}),
new CountyHierarchicalDataItem(
{
code: `HAT`,
parent: `Central America`,
name: `Haiti`,
population: 10123787
}),
new CountyHierarchicalDataItem(
{
code: `HON`,
parent: `Central America`,
name: `Honduras`,
population: 7754687
}),
new CountyHierarchicalDataItem(
{
code: `JAM`,
parent: `Central America`,
name: `Jamaica`,
population: 2706500
}),
new CountyHierarchicalDataItem(
{
code: `NCR`,
parent: `Central America`,
name: `Nicaragua`,
population: 5869859
}),
new CountyHierarchicalDataItem(
{
code: `NMI`,
parent: `Central America`,
name: `Northern Mariana Islands`,
population: 61174
}),
new CountyHierarchicalDataItem(
{
code: `PAN`,
parent: `Central America`,
name: `Panama`,
population: 3571185
}),
new CountyHierarchicalDataItem(
{
code: `PRT`,
parent: `Central America`,
name: `Puerto Rico`,
population: 3706690
}),
new CountyHierarchicalDataItem(
{
code: `STK`,
parent: `Central America`,
name: `St. Kitts`,
population: 53051
}),
new CountyHierarchicalDataItem(
{
code: `STL`,
parent: `Central America`,
name: `St. Lucia`,
population: 176000
}),
new CountyHierarchicalDataItem(
{
code: `STV`,
parent: `Central America`,
name: `St. Vincent`,
population: 109365
}),
new CountyHierarchicalDataItem(
{
code: `TAB`,
parent: `Central America`,
name: `Trinidad and Tobago`,
population: 1346350
}),
new CountyHierarchicalDataItem(
{
code: `RCI`,
parent: `Central America`,
name: `Turks and Caicos Islands`,
population: 39184
}),
new CountyHierarchicalDataItem(
{
code: `ISV`,
parent: `Central America`,
name: `US Virgin Islands`,
population: 109666
}),
new CountyHierarchicalDataItem(
{
code: `ALB`,
parent: `Europe`,
name: `Albania`,
population: 3215988
}),
new CountyHierarchicalDataItem(
{
code: `AND`,
parent: `Europe`,
name: `Andorra`,
population: 86165
}),
new CountyHierarchicalDataItem(
{
code: `ARM`,
parent: `Europe`,
name: `Armenia`,
population: 3100236
}),
new CountyHierarchicalDataItem(
{
code: `AUT`,
parent: `Europe`,
name: `Austria`,
population: 8423635
}),
new CountyHierarchicalDataItem(
{
code: `BER`,
parent: `Europe`,
name: `Belarus`,
population: 9473000
}),
new CountyHierarchicalDataItem(
{
code: `BEL`,
parent: `Europe`,
name: `Belgium`,
population: 11020952
}),
new CountyHierarchicalDataItem(
{
code: `BIH`,
parent: `Europe`,
name: `Bosnia`,
population: 3752228
}),
new CountyHierarchicalDataItem(
{
code: `BUL`,
parent: `Europe`,
name: `Bulgaria`,
population: 7348328
}),
new CountyHierarchicalDataItem(
{
code: `CHI`,
parent: `Europe`,
name: `Channel Islands`,
population: 153876
}),
new CountyHierarchicalDataItem(
{
code: `CRO`,
parent: `Europe`,
name: `Croatia`,
population: 4403000
}),
new CountyHierarchicalDataItem(
{
code: `CYP`,
parent: `Europe`,
name: `Cyprus`,
population: 1116564
}),
new CountyHierarchicalDataItem(
{
code: `CZE`,
parent: `Europe`,
name: `Czechia`,
population: 10496088
}),
new CountyHierarchicalDataItem(
{
code: `DEN`,
parent: `Europe`,
name: `Denmark`,
population: 5570572
}),
new CountyHierarchicalDataItem(
{
code: `EST`,
parent: `Europe`,
name: `Estonia`,
population: 1339928
}),
new CountyHierarchicalDataItem(
{
code: `FIN`,
parent: `Europe`,
name: `Finland`,
population: 5388272
}),
new CountyHierarchicalDataItem(
{
code: `FRA`,
parent: `Europe`,
name: `France`,
population: 65433714
}),
new CountyHierarchicalDataItem(
{
code: `GEO`,
parent: `Europe`,
name: `Georgia`,
population: 4486000
}),
new CountyHierarchicalDataItem(
{
code: `DEU`,
parent: `Europe`,
name: `Germany`,
population: 81797673
}),
new CountyHierarchicalDataItem(
{
code: `GRC`,
parent: `Europe`,
name: `Greece`,
population: 11300410
}),
new CountyHierarchicalDataItem(
{
code: `HUN`,
parent: `Europe`,
name: `Hungary`,
population: 9971727
}),
new CountyHierarchicalDataItem(
{
code: `ICE`,
parent: `Europe`,
name: `Iceland`,
population: 319014
}),
new CountyHierarchicalDataItem(
{
code: `IRE`,
parent: `Europe`,
name: `Ireland`,
population: 4576317
}),
new CountyHierarchicalDataItem(
{
code: `IOM`,
parent: `Europe`,
name: `Isle of Man`,
population: 83327
}),
new CountyHierarchicalDataItem(
{
code: `ITA`,
parent: `Europe`,
name: `Italy`,
population: 60723603
}),
new CountyHierarchicalDataItem(
{
code: `KOS`,
parent: `Europe`,
name: `Kosovo`,
population: 1802765
}),
new CountyHierarchicalDataItem(
{
code: `LAT`,
parent: `Europe`,
name: `Latvia`,
population: 2058184
}),
new CountyHierarchicalDataItem(
{
code: `LVA`,
parent: `Europe`,
name: `Liechtenstein`,
population: 36304
}),
new CountyHierarchicalDataItem(
{
code: `LTU`,
parent: `Europe`,
name: `Lithuania`,
population: 3030173
}),
new CountyHierarchicalDataItem(
{
code: `LUX`,
parent: `Europe`,
name: `Luxembourg`,
population: 518252
}),
new CountyHierarchicalDataItem(
{
code: `MKD`,
parent: `Europe`,
name: `North Macedonia`,
population: 2063893
}),
new CountyHierarchicalDataItem(
{
code: `MLT`,
parent: `Europe`,
name: `Malta`,
population: 415654
}),
new CountyHierarchicalDataItem(
{
code: `MDA`,
parent: `Europe`,
name: `Moldova`,
population: 3559000
}),
new CountyHierarchicalDataItem(
{
code: `MON`,
parent: `Europe`,
name: `Monaco`,
population: 35427
}),
new CountyHierarchicalDataItem(
{
code: `MNE`,
parent: `Europe`,
name: `Montenegro`,
population: 632261
}),
new CountyHierarchicalDataItem(
{
code: `MLD`,
parent: `Europe`,
name: `Netherlands`,
population: 16693074
}),
new CountyHierarchicalDataItem(
{
code: `NOR`,
parent: `Europe`,
name: `Norway`,
population: 4953088
}),
new CountyHierarchicalDataItem(
{
code: `POL`,
parent: `Europe`,
name: `Poland`,
population: 38534157
}),
new CountyHierarchicalDataItem(
{
code: `POR`,
parent: `Europe`,
name: `Portugal`,
population: 10556999
}),
new CountyHierarchicalDataItem(
{
code: `ROM`,
parent: `Europe`,
name: `Romania`,
population: 21384832
}),
new CountyHierarchicalDataItem(
{
code: `RUS`,
parent: `Europe`,
name: `Russia`,
population: 142960000
}),
new CountyHierarchicalDataItem(
{
code: `SMR`,
parent: `Europe`,
name: `San Marino`,
population: 31735
}),
new CountyHierarchicalDataItem(
{
code: `SBR`,
parent: `Europe`,
name: `Serbia`,
population: 7258745
}),
new CountyHierarchicalDataItem(
{
code: `STM`,
parent: `Europe`,
name: `Sint Maarten`,
population: 36609
}),
new CountyHierarchicalDataItem(
{
code: `SVK`,
parent: `Europe`,
name: `Slovakia`,
population: 5398384
}),
new CountyHierarchicalDataItem(
{
code: `SLO`,
parent: `Europe`,
name: `Slovenia`,
population: 2052843
}),
new CountyHierarchicalDataItem(
{
code: `ESP`,
parent: `Europe`,
name: `Spain`,
population: 46174601
}),
new CountyHierarchicalDataItem(
{
code: `STM`,
parent: `Europe`,
name: `St. Martin`,
population: 30615
}),
new CountyHierarchicalDataItem(
{
code: `SWE`,
parent: `Europe`,
name: `Sweden`,
population: 9449213
}),
new CountyHierarchicalDataItem(
{
code: `CHE`,
parent: `Europe`,
name: `Switzerland`,
population: 7912398
}),
new CountyHierarchicalDataItem(
{
code: `UKR`,
parent: `Europe`,
name: `Ukraine`,
population: 45706100
}),
new CountyHierarchicalDataItem(
{
code: `GBR`,
parent: `Europe`,
name: `United Kingdom`,
population: 62744081
}),
new CountyHierarchicalDataItem(
{
code: `DZA`,
parent: `Middle East`,
name: `Algeria`,
population: 35980193
}),
new CountyHierarchicalDataItem(
{
code: `AZE`,
parent: `Middle East`,
name: `Azerbaijan`,
population: 9173082
}),
new CountyHierarchicalDataItem(
{
code: `BHR`,
parent: `Middle East`,
name: `Bahrain`,
population: 1323535
}),
new CountyHierarchicalDataItem(
{
code: `EGY`,
parent: `Middle East`,
name: `Egypt`,
population: 82536770
}),
new CountyHierarchicalDataItem(
{
code: `IRN`,
parent: `Middle East`,
name: `Iran`,
population: 74798599
}),
new CountyHierarchicalDataItem(
{
code: `IRQ`,
parent: `Middle East`,
name: `Iraq`,
population: 32961959
}),
new CountyHierarchicalDataItem(
{
code: `ISR`,
parent: `Middle East`,
name: `Israel`,
population: 7765900
}),
new CountyHierarchicalDataItem(
{
code: `JOR`,
parent: `Middle East`,
name: `Jordan`,
population: 6181000
}),
new CountyHierarchicalDataItem(
{
code: `KWT`,
parent: `Middle East`,
name: `Kuwait`,
population: 2818042
}),
new CountyHierarchicalDataItem(
{
code: `LBN`,
parent: `Middle East`,
name: `Lebanon`,
population: 4259405
}),
new CountyHierarchicalDataItem(
{
code: `LBY`,
parent: `Middle East`,
name: `Libya`,
population: 6422772
}),
new CountyHierarchicalDataItem(
{
code: `MAR`,
parent: `Middle East`,
name: `Morocco`,
population: 32272974
}),
new CountyHierarchicalDataItem(
{
code: `OMN`,
parent: `Middle East`,
name: `Oman`,
population: 2846145
}),
new CountyHierarchicalDataItem(
{
code: `PKS`,
parent: `Middle East`,
name: `Pakistan`,
population: 176745364
}),
new CountyHierarchicalDataItem(
{
code: `QTR`,
parent: `Middle East`,
name: `Qatar`,
population: 1870041
}),
new CountyHierarchicalDataItem(
{
code: `SAR`,
parent: `Middle East`,
name: `Saudi Arabia`,
population: 28082541
}),
new CountyHierarchicalDataItem(
{
code: `SOM`,
parent: `Middle East`,
name: `Somalia`,
population: 9556873
}),
new CountyHierarchicalDataItem(
{
code: `SYR`,
parent: `Middle East`,
name: `Syria`,
population: 20820311
}),
new CountyHierarchicalDataItem(
{
code: `TUN`,
parent: `Middle East`,
name: `Tunisia`,
population: 10673800
}),
new CountyHierarchicalDataItem(
{
code: `TUR`,
parent: `Middle East`,
name: `Turkey`,
population: 73639596
}),
new CountyHierarchicalDataItem(
{
code: `UAE`,
parent: `Middle East`,
name: `United Arab Emirates`,
population: 7890924
}),
new CountyHierarchicalDataItem(
{
code: `WTB`,
parent: `Middle East`,
name: `West Bank`,
population: 3927051
}),
new CountyHierarchicalDataItem(
{
code: `YEM`,
parent: `Middle East`,
name: `Yemen`,
population: 24799880
}),
new CountyHierarchicalDataItem(
{
code: `CAN`,
parent: `North America`,
name: `Canada`,
population: 34483975
}),
new CountyHierarchicalDataItem(
{
code: `GRL`,
parent: `North America`,
name: `Greenland`,
population: 56840
}),
new CountyHierarchicalDataItem(
{
code: `MEX`,
parent: `North America`,
name: `Mexico`,
population: 114793341
}),
new CountyHierarchicalDataItem(
{
code: `USA`,
parent: `North America`,
name: `United States`,
population: 311591917
}),
new CountyHierarchicalDataItem(
{
code: `AMS`,
parent: `Oceania`,
name: `American Samoa`,
population: 69543
}),
new CountyHierarchicalDataItem(
{
code: `AUS`,
parent: `Oceania`,
name: `Australia`,
population: 22323900
}),
new CountyHierarchicalDataItem(
{
code: `FIJ`,
parent: `Oceania`,
name: `Fiji`,
population: 868406
}),
new CountyHierarchicalDataItem(
{
code: `FRP`,
parent: `Oceania`,
name: `French Polynesia`,
population: 273777
}),
new CountyHierarchicalDataItem(
{
code: `KIR`,
parent: `Oceania`,
name: `Kiribati`,
population: 101093
}),
new CountyHierarchicalDataItem(
{
code: `MIS`,
parent: `Oceania`,
name: `Marshall Islands`,
population: 54816
}),
new CountyHierarchicalDataItem(
{
code: `MCR`,
parent: `Oceania`,
name: `Micronesia`,
population: 111542
}),
new CountyHierarchicalDataItem(
{
code: `NCD`,
parent: `Oceania`,
name: `New Caledonia`,
population: 254024
}),
new CountyHierarchicalDataItem(
{
code: `NZL`,
parent: `Oceania`,
name: `New Zealand`,
population: 4405200
}),
new CountyHierarchicalDataItem(
{
code: `PAL`,
parent: `Oceania`,
name: `Palau`,
population: 20609
}),
new CountyHierarchicalDataItem(
{
code: `PNG`,
parent: `Oceania`,
name: `Papua New Guinea`,
population: 7013829
}),
new CountyHierarchicalDataItem(
{
code: `SAM`,
parent: `Oceania`,
name: `Samoa`,
population: 183874
}),
new CountyHierarchicalDataItem(
{
code: `SIS`,
parent: `Oceania`,
name: `Solomon Islands`,
population: 552267
}),
new CountyHierarchicalDataItem(
{
code: `TML`,
parent: `Oceania`,
name: `Timor-Leste`,
population: 1175880
}),
new CountyHierarchicalDataItem(
{
code: `TON`,
parent: `Oceania`,
name: `Tonga`,
population: 104509
}),
new CountyHierarchicalDataItem(
{
code: `TUV`,
parent: `Oceania`,
name: `Tuvalu`,
population: 9847
}),
new CountyHierarchicalDataItem(
{
code: `VNT`,
parent: `Oceania`,
name: `Vanuatu`,
population: 245619
}),
new CountyHierarchicalDataItem(
{
code: `ARG`,
parent: `South America`,
name: `Argentina`,
population: 40764561
}),
new CountyHierarchicalDataItem(
{
code: `BOL`,
parent: `South America`,
name: `Bolivia`,
population: 10088108
}),
new CountyHierarchicalDataItem(
{
code: `BRA`,
parent: `South America`,
name: `Brazil`,
population: 196655014
}),
new CountyHierarchicalDataItem(
{
code: `CHI`,
parent: `South America`,
name: `Chile`,
population: 17269525
}),
new CountyHierarchicalDataItem(
{
code: `COL`,
parent: `South America`,
name: `Colombia`,
population: 46927125
}),
new CountyHierarchicalDataItem(
{
code: `ECU`,
parent: `South America`,
name: `Ecuador`,
population: 14666055
}),
new CountyHierarchicalDataItem(
{
code: `GUY`,
parent: `South America`,
name: `Guyana`,
population: 756040
}),
new CountyHierarchicalDataItem(
{
code: `PAR`,
parent: `South America`,
name: `Paraguay`,
population: 6568290
}),
new CountyHierarchicalDataItem(
{
code: `PER`,
parent: `South America`,
name: `Peru`,
population: 29399817
}),
new CountyHierarchicalDataItem(
{
code: `SUR`,
parent: `South America`,
name: `Suriname`,
population: 529419
}),
new CountyHierarchicalDataItem(
{
code: `URG`,
parent: `South America`,
name: `Uruguay`,
population: 3368595
}),
new CountyHierarchicalDataItem(
{
code: `VEN`,
parent: `South America`,
name: `Venezuela`,
population: 29278000
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import { IgcTreemapModule } from 'igniteui-webcomponents-charts';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, TreemapDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { IgcTreemapComponent } from 'igniteui-webcomponents-charts';
import { CountyHierarchicalDataItem, CountyHierarchicalData } from './CountyHierarchicalData';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import { defineAllComponents } from 'igniteui-webcomponents';
import { ModuleManager } from 'igniteui-webcomponents-core';
defineAllComponents();
import "./index.css";
ModuleManager.register(
IgcPropertyEditorPanelModule,
IgcTreemapModule
);
export class Sample {
private propertyEditorPanel1: IgcPropertyEditorPanelComponent
private layoutTypeEditor: IgcPropertyEditorPropertyDescriptionComponent
private layoutOrientationEditor: IgcPropertyEditorPropertyDescriptionComponent
private headerDisplayModeEditor: IgcPropertyEditorPropertyDescriptionComponent
private labelVerticalAlignmentEditor: IgcPropertyEditorPropertyDescriptionComponent
private treemap: IgcTreemapComponent
private _bind: () => void;
constructor() {
var propertyEditorPanel1 = this.propertyEditorPanel1 = document.getElementById('propertyEditorPanel1') as IgcPropertyEditorPanelComponent;
var layoutTypeEditor = this.layoutTypeEditor = document.getElementById('LayoutTypeEditor') as IgcPropertyEditorPropertyDescriptionComponent;
var layoutOrientationEditor = this.layoutOrientationEditor = document.getElementById('LayoutOrientationEditor') as IgcPropertyEditorPropertyDescriptionComponent;
var headerDisplayModeEditor = this.headerDisplayModeEditor = document.getElementById('HeaderDisplayModeEditor') as IgcPropertyEditorPropertyDescriptionComponent;
var labelVerticalAlignmentEditor = this.labelVerticalAlignmentEditor = document.getElementById('LabelVerticalAlignmentEditor') as IgcPropertyEditorPropertyDescriptionComponent;
var treemap = this.treemap = document.getElementById('treemap') as IgcTreemapComponent;
this._bind = () => {
propertyEditorPanel1.componentRenderer = this.renderer;
propertyEditorPanel1.target = this.treemap;
treemap.dataSource = this.countyHierarchicalData;
}
this._bind();
}
private _countyHierarchicalData: CountyHierarchicalData = null;
public get countyHierarchicalData(): CountyHierarchicalData {
if (this._countyHierarchicalData == null)
{
this._countyHierarchicalData = new CountyHierarchicalData();
}
return this._countyHierarchicalData;
}
private _componentRenderer: ComponentRenderer = null;
public get renderer(): ComponentRenderer {
if (this._componentRenderer == null) {
this._componentRenderer = new ComponentRenderer();
var context = this._componentRenderer.context;
PropertyEditorPanelDescriptionModule.register(context);
TreemapDescriptionModule.register(context);
}
return this._componentRenderer;
}
}
new Sample();
ts<!DOCTYPE html>
<html>
<head>
<title>Sample | Ignite UI | Web Components | infragistics</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" />
<link rel="stylesheet" href="/src/index.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<div class="options vertical">
<igc-property-editor-panel
description-type="Treemap"
is-horizontal="true"
is-wrapping-enabled="true"
name="propertyEditorPanel1"
id="propertyEditorPanel1">
<igc-property-editor-property-description
property-path="LayoutType"
name="LayoutTypeEditor"
id="LayoutTypeEditor"
primitive-value="Squarified"
label="Layout">
</igc-property-editor-property-description>
<igc-property-editor-property-description
property-path="LayoutOrientation"
name="LayoutOrientationEditor"
id="LayoutOrientationEditor"
primitive-value="Vertical"
label="Orientation">
</igc-property-editor-property-description>
<igc-property-editor-property-description
property-path="HeaderDisplayMode"
name="HeaderDisplayModeEditor"
id="HeaderDisplayModeEditor"
primitive-value="Overlay"
label="Headers">
</igc-property-editor-property-description>
<igc-property-editor-property-description
property-path="LabelVerticalAlignment"
name="LabelVerticalAlignmentEditor"
id="LabelVerticalAlignmentEditor"
primitive-value="Center"
label="Labels">
</igc-property-editor-property-description>
</igc-property-editor-panel>
</div>
<div class="legend-title">
Comparing Population of Countries
</div>
<div class="container fill">
<igc-treemap
name="treemap"
id="treemap"
root-title="Countries"
parent-id-member-path="parent"
id-member-path="name"
label-member-path="name"
value-member-path="population"
fill-brushes="rgba(41, 158, 65, 1) rgba(78, 98, 207, 1) rgba(94, 53, 156, 1)"
is-fill-scale-logarithmic="true"
header-display-mode="Overlay"
parent-node-bottom-padding="0"
parent-node-left-padding="0"
parent-node-right-padding="0"
parent-node-top-padding="0">
</igc-treemap>
</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
レイアウトのタイプ
ツリーマップ チャートは、データの相対的な重みを表示します。さまざまなアルゴリズムを使用して、データ項目のレイアウトをどのように行うかを決定します。
SliceAndDice
- レイアウトのアルゴリズムは、縦横比を代わりに最初の順番を維持するようにします。Squarified
- レイアウトのタイリング アルゴリズムでは、SliceAndDice
より縦横比がより正確で、Squarified より適切に並べ替えされます。Stripped
- タイプのアルゴリズムは、最適な縦横比を描画しますが、オブジェクトがサイズによって並べ替えられます。
ツリーマップを使用すると、要件に最適なアルゴリズムを選択できます。デフォルトでは、Squarified メソッドが使用されます。また、次の 2 つのメカニズムを使用してノードに色を付けることができる機能も含まれています。
- 項目を同じ値で色付けするグループ ベースのメカニズム。
- 階級区分図に似たスケール ベースのメカニズムで、ノードの色をその値に基づいてマップします。
レイアウト方向:
layoutOrientation
プロパティによってユーザーは階層のノードが展開される方向を設定できます。
layoutOrientation
プロパティがレイアウト タイプ SliceAndDice および Strip と動作することに注意してください。
Horizontal
– 子ノードは水平に積み重ねられます (SliceAndDice)。Vertical
– 子ノードは垂直に積み重ねられます (SliceAndDice)。
Web Components ツリーマップのスタイル設定
次の例では、ツリーマップは、NodeStylingScript
イベントを介してスタイル設定することによって実現されるノードのルック アンド フィールを変更する機能を示しています。
export class CountyHierarchicalDataItem {
public constructor(init: Partial<CountyHierarchicalDataItem>) {
Object.assign(this, init);
}
public code: string;
public parent: string;
public name: string;
public population: number;
}
export class CountyHierarchicalData extends Array<CountyHierarchicalDataItem> {
public constructor(items: Array<CountyHierarchicalDataItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new CountyHierarchicalDataItem(
{
code: `AFC`,
parent: null,
name: `Africa`,
population: null
}),
new CountyHierarchicalDataItem(
{
code: `ASA`,
parent: null,
name: `Asia`,
population: null
}),
new CountyHierarchicalDataItem(
{
code: `EUR`,
parent: null,
name: `Europe`,
population: null
}),
new CountyHierarchicalDataItem(
{
code: `MDE`,
parent: null,
name: `Middle East`,
population: null
}),
new CountyHierarchicalDataItem(
{
code: `NAM`,
parent: null,
name: `North America`,
population: null
}),
new CountyHierarchicalDataItem(
{
code: `CAM`,
parent: null,
name: `Central America`,
population: null
}),
new CountyHierarchicalDataItem(
{
code: `SAM`,
parent: null,
name: `South America`,
population: null
}),
new CountyHierarchicalDataItem(
{
code: `OCE`,
parent: null,
name: `Oceania`,
population: null
}),
new CountyHierarchicalDataItem(
{
code: `ANG`,
parent: `Africa`,
name: `Angola`,
population: 19618432
}),
new CountyHierarchicalDataItem(
{
code: `BEN`,
parent: `Africa`,
name: `Benin`,
population: 9099922
}),
new CountyHierarchicalDataItem(
{
code: `BOT`,
parent: `Africa`,
name: `Botswana`,
population: 2030738
}),
new CountyHierarchicalDataItem(
{
code: `BUR`,
parent: `Africa`,
name: `Burkina Faso`,
population: 16967845
}),
new CountyHierarchicalDataItem(
{
code: `BUR`,
parent: `Africa`,
name: `Burundi`,
population: 8575172
}),
new CountyHierarchicalDataItem(
{
code: `CAM`,
parent: `Africa`,
name: `Cameroon`,
population: 20030362
}),
new CountyHierarchicalDataItem(
{
code: `CPV`,
parent: `Africa`,
name: `Cape Verde`,
population: 500585
}),
new CountyHierarchicalDataItem(
{
code: `CAR`,
parent: `Africa`,
name: `Central African Republic`,
population: 4486837
}),
new CountyHierarchicalDataItem(
{
code: `CHD`,
parent: `Africa`,
name: `Chad`,
population: 11525496
}),
new CountyHierarchicalDataItem(
{
code: `COM`,
parent: `Africa`,
name: `Comoros`,
population: 753943
}),
new CountyHierarchicalDataItem(
{
code: `DRC`,
parent: `Africa`,
name: `Congo DRC`,
population: 67757577
}),
new CountyHierarchicalDataItem(
{
code: `CRP`,
parent: `Africa`,
name: `Congo Republic`,
population: 4139748
}),
new CountyHierarchicalDataItem(
{
code: `CIR`,
parent: `Africa`,
name: `Cote Ivoire`,
population: 20152894
}),
new CountyHierarchicalDataItem(
{
code: `DBT`,
parent: `Africa`,
name: `Djibouti`,
population: 905564
}),
new CountyHierarchicalDataItem(
{
code: `ETG`,
parent: `Africa`,
name: `Equatorial Guinea`,
population: 720213
}),
new CountyHierarchicalDataItem(
{
code: `ERT`,
parent: `Africa`,
name: `Eritrea`,
population: 5415280
}),
new CountyHierarchicalDataItem(
{
code: `ETH`,
parent: `Africa`,
name: `Ethiopia`,
population: 84734262
}),
new CountyHierarchicalDataItem(
{
code: `GBN`,
parent: `Africa`,
name: `Gabon`,
population: 1534262
}),
new CountyHierarchicalDataItem(
{
code: `GMB`,
parent: `Africa`,
name: `Gambia`,
population: 1776103
}),
new CountyHierarchicalDataItem(
{
code: `GHN`,
parent: `Africa`,
name: `Ghana`,
population: 24965816
}),
new CountyHierarchicalDataItem(
{
code: `GUN`,
parent: `Africa`,
name: `Guinea`,
population: 10221808
}),
new CountyHierarchicalDataItem(
{
code: `GNB`,
parent: `Africa`,
name: `Guinea-Bissau`,
population: 1547061
}),
new CountyHierarchicalDataItem(
{
code: `KEN`,
parent: `Africa`,
name: `Kenya`,
population: 41609728
}),
new CountyHierarchicalDataItem(
{
code: `LES`,
parent: `Africa`,
name: `Lesotho`,
population: 2193843
}),
new CountyHierarchicalDataItem(
{
code: `LBR`,
parent: `Africa`,
name: `Liberia`,
population: 4128572
}),
new CountyHierarchicalDataItem(
{
code: `MDG`,
parent: `Africa`,
name: `Madagascar`,
population: 21315135
}),
new CountyHierarchicalDataItem(
{
code: `MLW`,
parent: `Africa`,
name: `Malawi`,
population: 15380888
}),
new CountyHierarchicalDataItem(
{
code: `MAL`,
parent: `Africa`,
name: `Mali`,
population: 15839538
}),
new CountyHierarchicalDataItem(
{
code: `MRT`,
parent: `Africa`,
name: `Mauritania`,
population: 3541540
}),
new CountyHierarchicalDataItem(
{
code: `MUS`,
parent: `Africa`,
name: `Mauritius`,
population: 1286051
}),
new CountyHierarchicalDataItem(
{
code: `MOZ`,
parent: `Africa`,
name: `Mozambique`,
population: 23929708
}),
new CountyHierarchicalDataItem(
{
code: `NMB`,
parent: `Africa`,
name: `Namibia`,
population: 2324004
}),
new CountyHierarchicalDataItem(
{
code: `NER`,
parent: `Africa`,
name: `Niger`,
population: 16068994
}),
new CountyHierarchicalDataItem(
{
code: `NGA`,
parent: `Africa`,
name: `Nigeria`,
population: 162470737
}),
new CountyHierarchicalDataItem(
{
code: `RWD`,
parent: `Africa`,
name: `Rwanda`,
population: 10942950
}),
new CountyHierarchicalDataItem(
{
code: `STM`,
parent: `Africa`,
name: `Sao Tome`,
population: 168526
}),
new CountyHierarchicalDataItem(
{
code: `SEN`,
parent: `Africa`,
name: `Senegal`,
population: 12767556
}),
new CountyHierarchicalDataItem(
{
code: `SYC`,
parent: `Africa`,
name: `Seychelles`,
population: 86000
}),
new CountyHierarchicalDataItem(
{
code: `SRL`,
parent: `Africa`,
name: `Sierra Leone`,
population: 5997486
}),
new CountyHierarchicalDataItem(
{
code: `ZAF`,
parent: `Africa`,
name: `South Africa`,
population: 50586757
}),
new CountyHierarchicalDataItem(
{
code: `SSD`,
parent: `Africa`,
name: `South Sudan`,
population: 10314021
}),
new CountyHierarchicalDataItem(
{
code: `SDN`,
parent: `Africa`,
name: `Sudan`,
population: 34318385
}),
new CountyHierarchicalDataItem(
{
code: `SWZ`,
parent: `Africa`,
name: `Swaziland`,
population: 1067773
}),
new CountyHierarchicalDataItem(
{
code: `TNZ`,
parent: `Africa`,
name: `Tanzania`,
population: 46218486
}),
new CountyHierarchicalDataItem(
{
code: `TOG`,
parent: `Africa`,
name: `Togo`,
population: 6154813
}),
new CountyHierarchicalDataItem(
{
code: `UGN`,
parent: `Africa`,
name: `Uganda`,
population: 34509205
}),
new CountyHierarchicalDataItem(
{
code: `ZMB`,
parent: `Africa`,
name: `Zambia`,
population: 13474959
}),
new CountyHierarchicalDataItem(
{
code: `ZWE`,
parent: `Africa`,
name: `Zimbabwe`,
population: 12754378
}),
new CountyHierarchicalDataItem(
{
code: `AFG`,
parent: `Asia`,
name: `Afghanistan`,
population: 35320445
}),
new CountyHierarchicalDataItem(
{
code: `BAN`,
parent: `Asia`,
name: `Bangladesh`,
population: 150493658
}),
new CountyHierarchicalDataItem(
{
code: `BHT`,
parent: `Asia`,
name: `Bhutan`,
population: 738267
}),
new CountyHierarchicalDataItem(
{
code: `BRN`,
parent: `Asia`,
name: `Brunei`,
population: 405938
}),
new CountyHierarchicalDataItem(
{
code: `CAM`,
parent: `Asia`,
name: `Cambodia`,
population: 14305183
}),
new CountyHierarchicalDataItem(
{
code: `CHI`,
parent: `Asia`,
name: `China`,
population: 1344130000
}),
new CountyHierarchicalDataItem(
{
code: `HNK`,
parent: `Asia`,
name: `Hong Kong`,
population: 7071600
}),
new CountyHierarchicalDataItem(
{
code: `IND`,
parent: `Asia`,
name: `India`,
population: 1241491960
}),
new CountyHierarchicalDataItem(
{
code: `IDN`,
parent: `Asia`,
name: `Indonesia`,
population: 242325638
}),
new CountyHierarchicalDataItem(
{
code: `JPN`,
parent: `Asia`,
name: `Japan`,
population: 127817277
}),
new CountyHierarchicalDataItem(
{
code: `KZH`,
parent: `Asia`,
name: `Kazakhstan`,
population: 16558676
}),
new CountyHierarchicalDataItem(
{
code: `NKO`,
parent: `Asia`,
name: `North Korea`,
population: 24451285
}),
new CountyHierarchicalDataItem(
{
code: `SKO`,
parent: `Asia`,
name: `South Korea`,
population: 49779000
}),
new CountyHierarchicalDataItem(
{
code: `KGZ`,
parent: `Asia`,
name: `Kyrgyzstan`,
population: 5514600
}),
new CountyHierarchicalDataItem(
{
code: `LAO`,
parent: `Asia`,
name: `Lao PDR`,
population: 6288037
}),
new CountyHierarchicalDataItem(
{
code: `MAC`,
parent: `Asia`,
name: `Macao`,
population: 555731
}),
new CountyHierarchicalDataItem(
{
code: `MYS`,
parent: `Asia`,
name: `Malaysia`,
population: 28859154
}),
new CountyHierarchicalDataItem(
{
code: `MDV`,
parent: `Asia`,
name: `Maldives`,
population: 320081
}),
new CountyHierarchicalDataItem(
{
code: `MNG`,
parent: `Asia`,
name: `Mongolia`,
population: 2800114
}),
new CountyHierarchicalDataItem(
{
code: `MYM`,
parent: `Asia`,
name: `Myanmar`,
population: 48336763
}),
new CountyHierarchicalDataItem(
{
code: `NPL`,
parent: `Asia`,
name: `Nepal`,
population: 30485798
}),
new CountyHierarchicalDataItem(
{
code: `PHP`,
parent: `Asia`,
name: `Philippines`,
population: 94852030
}),
new CountyHierarchicalDataItem(
{
code: `SNG`,
parent: `Asia`,
name: `Singapore`,
population: 5183700
}),
new CountyHierarchicalDataItem(
{
code: `SRL`,
parent: `Asia`,
name: `Sri Lanka`,
population: 20869000
}),
new CountyHierarchicalDataItem(
{
code: `TKS`,
parent: `Asia`,
name: `Tajikistan`,
population: 6976958
}),
new CountyHierarchicalDataItem(
{
code: `THL`,
parent: `Asia`,
name: `Thailand`,
population: 69518555
}),
new CountyHierarchicalDataItem(
{
code: `TRK`,
parent: `Asia`,
name: `Turkmenistan`,
population: 5105301
}),
new CountyHierarchicalDataItem(
{
code: `UZB`,
parent: `Asia`,
name: `Uzbekistan`,
population: 29341200
}),
new CountyHierarchicalDataItem(
{
code: `VTN`,
parent: `Asia`,
name: `Vietnam`,
population: 87840000
}),
new CountyHierarchicalDataItem(
{
code: `ANT`,
parent: `Central America`,
name: `Antigua`,
population: 89612
}),
new CountyHierarchicalDataItem(
{
code: `ARB`,
parent: `Central America`,
name: `Aruba`,
population: 108141
}),
new CountyHierarchicalDataItem(
{
code: `BHM`,
parent: `Central America`,
name: `Bahamas`,
population: 347176
}),
new CountyHierarchicalDataItem(
{
code: `BRB`,
parent: `Central America`,
name: `Barbados`,
population: 273925
}),
new CountyHierarchicalDataItem(
{
code: `BLZ`,
parent: `Central America`,
name: `Belize`,
population: 356600
}),
new CountyHierarchicalDataItem(
{
code: `BRM`,
parent: `Central America`,
name: `Bermuda`,
population: 64700
}),
new CountyHierarchicalDataItem(
{
code: `CYI`,
parent: `Central America`,
name: `Cayman Islands`,
population: 56729
}),
new CountyHierarchicalDataItem(
{
code: `CSR`,
parent: `Central America`,
name: `Costa Rica`,
population: 4726575
}),
new CountyHierarchicalDataItem(
{
code: `CUB`,
parent: `Central America`,
name: `Cuba`,
population: 11253665
}),
new CountyHierarchicalDataItem(
{
code: `CUR`,
parent: `Central America`,
name: `Curacao`,
population: 145619
}),
new CountyHierarchicalDataItem(
{
code: `DMA`,
parent: `Central America`,
name: `Dominica`,
population: 67675
}),
new CountyHierarchicalDataItem(
{
code: `DOM`,
parent: `Central America`,
name: `Dominican Republic`,
population: 10056181
}),
new CountyHierarchicalDataItem(
{
code: `SLV`,
parent: `Central America`,
name: `El Salvador`,
population: 6227491
}),
new CountyHierarchicalDataItem(
{
code: `FIS`,
parent: `Central America`,
name: `Faeroe Islands`,
population: 48863
}),
new CountyHierarchicalDataItem(
{
code: `GND`,
parent: `Central America`,
name: `Grenada`,
population: 104890
}),
new CountyHierarchicalDataItem(
{
code: `GUA`,
parent: `Central America`,
name: `Guam`,
population: 182111
}),
new CountyHierarchicalDataItem(
{
code: `GTM`,
parent: `Central America`,
name: `Guatemala`,
population: 14757316
}),
new CountyHierarchicalDataItem(
{
code: `HAT`,
parent: `Central America`,
name: `Haiti`,
population: 10123787
}),
new CountyHierarchicalDataItem(
{
code: `HON`,
parent: `Central America`,
name: `Honduras`,
population: 7754687
}),
new CountyHierarchicalDataItem(
{
code: `JAM`,
parent: `Central America`,
name: `Jamaica`,
population: 2706500
}),
new CountyHierarchicalDataItem(
{
code: `NCR`,
parent: `Central America`,
name: `Nicaragua`,
population: 5869859
}),
new CountyHierarchicalDataItem(
{
code: `NMI`,
parent: `Central America`,
name: `Northern Mariana Islands`,
population: 61174
}),
new CountyHierarchicalDataItem(
{
code: `PAN`,
parent: `Central America`,
name: `Panama`,
population: 3571185
}),
new CountyHierarchicalDataItem(
{
code: `PRT`,
parent: `Central America`,
name: `Puerto Rico`,
population: 3706690
}),
new CountyHierarchicalDataItem(
{
code: `STK`,
parent: `Central America`,
name: `St. Kitts`,
population: 53051
}),
new CountyHierarchicalDataItem(
{
code: `STL`,
parent: `Central America`,
name: `St. Lucia`,
population: 176000
}),
new CountyHierarchicalDataItem(
{
code: `STV`,
parent: `Central America`,
name: `St. Vincent`,
population: 109365
}),
new CountyHierarchicalDataItem(
{
code: `TAB`,
parent: `Central America`,
name: `Trinidad and Tobago`,
population: 1346350
}),
new CountyHierarchicalDataItem(
{
code: `RCI`,
parent: `Central America`,
name: `Turks and Caicos Islands`,
population: 39184
}),
new CountyHierarchicalDataItem(
{
code: `ISV`,
parent: `Central America`,
name: `US Virgin Islands`,
population: 109666
}),
new CountyHierarchicalDataItem(
{
code: `ALB`,
parent: `Europe`,
name: `Albania`,
population: 3215988
}),
new CountyHierarchicalDataItem(
{
code: `AND`,
parent: `Europe`,
name: `Andorra`,
population: 86165
}),
new CountyHierarchicalDataItem(
{
code: `ARM`,
parent: `Europe`,
name: `Armenia`,
population: 3100236
}),
new CountyHierarchicalDataItem(
{
code: `AUT`,
parent: `Europe`,
name: `Austria`,
population: 8423635
}),
new CountyHierarchicalDataItem(
{
code: `BER`,
parent: `Europe`,
name: `Belarus`,
population: 9473000
}),
new CountyHierarchicalDataItem(
{
code: `BEL`,
parent: `Europe`,
name: `Belgium`,
population: 11020952
}),
new CountyHierarchicalDataItem(
{
code: `BIH`,
parent: `Europe`,
name: `Bosnia`,
population: 3752228
}),
new CountyHierarchicalDataItem(
{
code: `BUL`,
parent: `Europe`,
name: `Bulgaria`,
population: 7348328
}),
new CountyHierarchicalDataItem(
{
code: `CHI`,
parent: `Europe`,
name: `Channel Islands`,
population: 153876
}),
new CountyHierarchicalDataItem(
{
code: `CRO`,
parent: `Europe`,
name: `Croatia`,
population: 4403000
}),
new CountyHierarchicalDataItem(
{
code: `CYP`,
parent: `Europe`,
name: `Cyprus`,
population: 1116564
}),
new CountyHierarchicalDataItem(
{
code: `CZE`,
parent: `Europe`,
name: `Czechia`,
population: 10496088
}),
new CountyHierarchicalDataItem(
{
code: `DEN`,
parent: `Europe`,
name: `Denmark`,
population: 5570572
}),
new CountyHierarchicalDataItem(
{
code: `EST`,
parent: `Europe`,
name: `Estonia`,
population: 1339928
}),
new CountyHierarchicalDataItem(
{
code: `FIN`,
parent: `Europe`,
name: `Finland`,
population: 5388272
}),
new CountyHierarchicalDataItem(
{
code: `FRA`,
parent: `Europe`,
name: `France`,
population: 65433714
}),
new CountyHierarchicalDataItem(
{
code: `GEO`,
parent: `Europe`,
name: `Georgia`,
population: 4486000
}),
new CountyHierarchicalDataItem(
{
code: `DEU`,
parent: `Europe`,
name: `Germany`,
population: 81797673
}),
new CountyHierarchicalDataItem(
{
code: `GRC`,
parent: `Europe`,
name: `Greece`,
population: 11300410
}),
new CountyHierarchicalDataItem(
{
code: `HUN`,
parent: `Europe`,
name: `Hungary`,
population: 9971727
}),
new CountyHierarchicalDataItem(
{
code: `ICE`,
parent: `Europe`,
name: `Iceland`,
population: 319014
}),
new CountyHierarchicalDataItem(
{
code: `IRE`,
parent: `Europe`,
name: `Ireland`,
population: 4576317
}),
new CountyHierarchicalDataItem(
{
code: `IOM`,
parent: `Europe`,
name: `Isle of Man`,
population: 83327
}),
new CountyHierarchicalDataItem(
{
code: `ITA`,
parent: `Europe`,
name: `Italy`,
population: 60723603
}),
new CountyHierarchicalDataItem(
{
code: `KOS`,
parent: `Europe`,
name: `Kosovo`,
population: 1802765
}),
new CountyHierarchicalDataItem(
{
code: `LAT`,
parent: `Europe`,
name: `Latvia`,
population: 2058184
}),
new CountyHierarchicalDataItem(
{
code: `LVA`,
parent: `Europe`,
name: `Liechtenstein`,
population: 36304
}),
new CountyHierarchicalDataItem(
{
code: `LTU`,
parent: `Europe`,
name: `Lithuania`,
population: 3030173
}),
new CountyHierarchicalDataItem(
{
code: `LUX`,
parent: `Europe`,
name: `Luxembourg`,
population: 518252
}),
new CountyHierarchicalDataItem(
{
code: `MKD`,
parent: `Europe`,
name: `North Macedonia`,
population: 2063893
}),
new CountyHierarchicalDataItem(
{
code: `MLT`,
parent: `Europe`,
name: `Malta`,
population: 415654
}),
new CountyHierarchicalDataItem(
{
code: `MDA`,
parent: `Europe`,
name: `Moldova`,
population: 3559000
}),
new CountyHierarchicalDataItem(
{
code: `MON`,
parent: `Europe`,
name: `Monaco`,
population: 35427
}),
new CountyHierarchicalDataItem(
{
code: `MNE`,
parent: `Europe`,
name: `Montenegro`,
population: 632261
}),
new CountyHierarchicalDataItem(
{
code: `MLD`,
parent: `Europe`,
name: `Netherlands`,
population: 16693074
}),
new CountyHierarchicalDataItem(
{
code: `NOR`,
parent: `Europe`,
name: `Norway`,
population: 4953088
}),
new CountyHierarchicalDataItem(
{
code: `POL`,
parent: `Europe`,
name: `Poland`,
population: 38534157
}),
new CountyHierarchicalDataItem(
{
code: `POR`,
parent: `Europe`,
name: `Portugal`,
population: 10556999
}),
new CountyHierarchicalDataItem(
{
code: `ROM`,
parent: `Europe`,
name: `Romania`,
population: 21384832
}),
new CountyHierarchicalDataItem(
{
code: `RUS`,
parent: `Europe`,
name: `Russia`,
population: 142960000
}),
new CountyHierarchicalDataItem(
{
code: `SMR`,
parent: `Europe`,
name: `San Marino`,
population: 31735
}),
new CountyHierarchicalDataItem(
{
code: `SBR`,
parent: `Europe`,
name: `Serbia`,
population: 7258745
}),
new CountyHierarchicalDataItem(
{
code: `STM`,
parent: `Europe`,
name: `Sint Maarten`,
population: 36609
}),
new CountyHierarchicalDataItem(
{
code: `SVK`,
parent: `Europe`,
name: `Slovakia`,
population: 5398384
}),
new CountyHierarchicalDataItem(
{
code: `SLO`,
parent: `Europe`,
name: `Slovenia`,
population: 2052843
}),
new CountyHierarchicalDataItem(
{
code: `ESP`,
parent: `Europe`,
name: `Spain`,
population: 46174601
}),
new CountyHierarchicalDataItem(
{
code: `STM`,
parent: `Europe`,
name: `St. Martin`,
population: 30615
}),
new CountyHierarchicalDataItem(
{
code: `SWE`,
parent: `Europe`,
name: `Sweden`,
population: 9449213
}),
new CountyHierarchicalDataItem(
{
code: `CHE`,
parent: `Europe`,
name: `Switzerland`,
population: 7912398
}),
new CountyHierarchicalDataItem(
{
code: `UKR`,
parent: `Europe`,
name: `Ukraine`,
population: 45706100
}),
new CountyHierarchicalDataItem(
{
code: `GBR`,
parent: `Europe`,
name: `United Kingdom`,
population: 62744081
}),
new CountyHierarchicalDataItem(
{
code: `DZA`,
parent: `Middle East`,
name: `Algeria`,
population: 35980193
}),
new CountyHierarchicalDataItem(
{
code: `AZE`,
parent: `Middle East`,
name: `Azerbaijan`,
population: 9173082
}),
new CountyHierarchicalDataItem(
{
code: `BHR`,
parent: `Middle East`,
name: `Bahrain`,
population: 1323535
}),
new CountyHierarchicalDataItem(
{
code: `EGY`,
parent: `Middle East`,
name: `Egypt`,
population: 82536770
}),
new CountyHierarchicalDataItem(
{
code: `IRN`,
parent: `Middle East`,
name: `Iran`,
population: 74798599
}),
new CountyHierarchicalDataItem(
{
code: `IRQ`,
parent: `Middle East`,
name: `Iraq`,
population: 32961959
}),
new CountyHierarchicalDataItem(
{
code: `ISR`,
parent: `Middle East`,
name: `Israel`,
population: 7765900
}),
new CountyHierarchicalDataItem(
{
code: `JOR`,
parent: `Middle East`,
name: `Jordan`,
population: 6181000
}),
new CountyHierarchicalDataItem(
{
code: `KWT`,
parent: `Middle East`,
name: `Kuwait`,
population: 2818042
}),
new CountyHierarchicalDataItem(
{
code: `LBN`,
parent: `Middle East`,
name: `Lebanon`,
population: 4259405
}),
new CountyHierarchicalDataItem(
{
code: `LBY`,
parent: `Middle East`,
name: `Libya`,
population: 6422772
}),
new CountyHierarchicalDataItem(
{
code: `MAR`,
parent: `Middle East`,
name: `Morocco`,
population: 32272974
}),
new CountyHierarchicalDataItem(
{
code: `OMN`,
parent: `Middle East`,
name: `Oman`,
population: 2846145
}),
new CountyHierarchicalDataItem(
{
code: `PKS`,
parent: `Middle East`,
name: `Pakistan`,
population: 176745364
}),
new CountyHierarchicalDataItem(
{
code: `QTR`,
parent: `Middle East`,
name: `Qatar`,
population: 1870041
}),
new CountyHierarchicalDataItem(
{
code: `SAR`,
parent: `Middle East`,
name: `Saudi Arabia`,
population: 28082541
}),
new CountyHierarchicalDataItem(
{
code: `SOM`,
parent: `Middle East`,
name: `Somalia`,
population: 9556873
}),
new CountyHierarchicalDataItem(
{
code: `SYR`,
parent: `Middle East`,
name: `Syria`,
population: 20820311
}),
new CountyHierarchicalDataItem(
{
code: `TUN`,
parent: `Middle East`,
name: `Tunisia`,
population: 10673800
}),
new CountyHierarchicalDataItem(
{
code: `TUR`,
parent: `Middle East`,
name: `Turkey`,
population: 73639596
}),
new CountyHierarchicalDataItem(
{
code: `UAE`,
parent: `Middle East`,
name: `United Arab Emirates`,
population: 7890924
}),
new CountyHierarchicalDataItem(
{
code: `WTB`,
parent: `Middle East`,
name: `West Bank`,
population: 3927051
}),
new CountyHierarchicalDataItem(
{
code: `YEM`,
parent: `Middle East`,
name: `Yemen`,
population: 24799880
}),
new CountyHierarchicalDataItem(
{
code: `CAN`,
parent: `North America`,
name: `Canada`,
population: 34483975
}),
new CountyHierarchicalDataItem(
{
code: `GRL`,
parent: `North America`,
name: `Greenland`,
population: 56840
}),
new CountyHierarchicalDataItem(
{
code: `MEX`,
parent: `North America`,
name: `Mexico`,
population: 114793341
}),
new CountyHierarchicalDataItem(
{
code: `USA`,
parent: `North America`,
name: `United States`,
population: 311591917
}),
new CountyHierarchicalDataItem(
{
code: `AMS`,
parent: `Oceania`,
name: `American Samoa`,
population: 69543
}),
new CountyHierarchicalDataItem(
{
code: `AUS`,
parent: `Oceania`,
name: `Australia`,
population: 22323900
}),
new CountyHierarchicalDataItem(
{
code: `FIJ`,
parent: `Oceania`,
name: `Fiji`,
population: 868406
}),
new CountyHierarchicalDataItem(
{
code: `FRP`,
parent: `Oceania`,
name: `French Polynesia`,
population: 273777
}),
new CountyHierarchicalDataItem(
{
code: `KIR`,
parent: `Oceania`,
name: `Kiribati`,
population: 101093
}),
new CountyHierarchicalDataItem(
{
code: `MIS`,
parent: `Oceania`,
name: `Marshall Islands`,
population: 54816
}),
new CountyHierarchicalDataItem(
{
code: `MCR`,
parent: `Oceania`,
name: `Micronesia`,
population: 111542
}),
new CountyHierarchicalDataItem(
{
code: `NCD`,
parent: `Oceania`,
name: `New Caledonia`,
population: 254024
}),
new CountyHierarchicalDataItem(
{
code: `NZL`,
parent: `Oceania`,
name: `New Zealand`,
population: 4405200
}),
new CountyHierarchicalDataItem(
{
code: `PAL`,
parent: `Oceania`,
name: `Palau`,
population: 20609
}),
new CountyHierarchicalDataItem(
{
code: `PNG`,
parent: `Oceania`,
name: `Papua New Guinea`,
population: 7013829
}),
new CountyHierarchicalDataItem(
{
code: `SAM`,
parent: `Oceania`,
name: `Samoa`,
population: 183874
}),
new CountyHierarchicalDataItem(
{
code: `SIS`,
parent: `Oceania`,
name: `Solomon Islands`,
population: 552267
}),
new CountyHierarchicalDataItem(
{
code: `TML`,
parent: `Oceania`,
name: `Timor-Leste`,
population: 1175880
}),
new CountyHierarchicalDataItem(
{
code: `TON`,
parent: `Oceania`,
name: `Tonga`,
population: 104509
}),
new CountyHierarchicalDataItem(
{
code: `TUV`,
parent: `Oceania`,
name: `Tuvalu`,
population: 9847
}),
new CountyHierarchicalDataItem(
{
code: `VNT`,
parent: `Oceania`,
name: `Vanuatu`,
population: 245619
}),
new CountyHierarchicalDataItem(
{
code: `ARG`,
parent: `South America`,
name: `Argentina`,
population: 40764561
}),
new CountyHierarchicalDataItem(
{
code: `BOL`,
parent: `South America`,
name: `Bolivia`,
population: 10088108
}),
new CountyHierarchicalDataItem(
{
code: `BRA`,
parent: `South America`,
name: `Brazil`,
population: 196655014
}),
new CountyHierarchicalDataItem(
{
code: `CHI`,
parent: `South America`,
name: `Chile`,
population: 17269525
}),
new CountyHierarchicalDataItem(
{
code: `COL`,
parent: `South America`,
name: `Colombia`,
population: 46927125
}),
new CountyHierarchicalDataItem(
{
code: `ECU`,
parent: `South America`,
name: `Ecuador`,
population: 14666055
}),
new CountyHierarchicalDataItem(
{
code: `GUY`,
parent: `South America`,
name: `Guyana`,
population: 756040
}),
new CountyHierarchicalDataItem(
{
code: `PAR`,
parent: `South America`,
name: `Paraguay`,
population: 6568290
}),
new CountyHierarchicalDataItem(
{
code: `PER`,
parent: `South America`,
name: `Peru`,
population: 29399817
}),
new CountyHierarchicalDataItem(
{
code: `SUR`,
parent: `South America`,
name: `Suriname`,
population: 529419
}),
new CountyHierarchicalDataItem(
{
code: `URG`,
parent: `South America`,
name: `Uruguay`,
population: 3368595
}),
new CountyHierarchicalDataItem(
{
code: `VEN`,
parent: `South America`,
name: `Venezuela`,
population: 29278000
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcTreemapModule } from 'igniteui-webcomponents-charts';
import { IgcTreemapComponent, IgcTreemapNodeStyleMappingComponent } from 'igniteui-webcomponents-charts';
import { CountyHierarchicalDataItem, CountyHierarchicalData } from './CountyHierarchicalData';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcTreemapModule
);
export class Sample {
private treemap: IgcTreemapComponent
private styling1: IgcTreemapNodeStyleMappingComponent
private styling2: IgcTreemapNodeStyleMappingComponent
private styling3: IgcTreemapNodeStyleMappingComponent
private styling4: IgcTreemapNodeStyleMappingComponent
private styling5: IgcTreemapNodeStyleMappingComponent
private styling6: IgcTreemapNodeStyleMappingComponent
private styling7: IgcTreemapNodeStyleMappingComponent
private styling8: IgcTreemapNodeStyleMappingComponent
private _bind: () => void;
constructor() {
var treemap = this.treemap = document.getElementById('treemap') as IgcTreemapComponent;
var styling1 = this.styling1 = document.getElementById('styling1') as IgcTreemapNodeStyleMappingComponent;
var styling2 = this.styling2 = document.getElementById('styling2') as IgcTreemapNodeStyleMappingComponent;
var styling3 = this.styling3 = document.getElementById('styling3') as IgcTreemapNodeStyleMappingComponent;
var styling4 = this.styling4 = document.getElementById('styling4') as IgcTreemapNodeStyleMappingComponent;
var styling5 = this.styling5 = document.getElementById('styling5') as IgcTreemapNodeStyleMappingComponent;
var styling6 = this.styling6 = document.getElementById('styling6') as IgcTreemapNodeStyleMappingComponent;
var styling7 = this.styling7 = document.getElementById('styling7') as IgcTreemapNodeStyleMappingComponent;
var styling8 = this.styling8 = document.getElementById('styling8') as IgcTreemapNodeStyleMappingComponent;
this._bind = () => {
treemap.dataSource = this.countyHierarchicalData;
}
this._bind();
}
private _countyHierarchicalData: CountyHierarchicalData = null;
public get countyHierarchicalData(): CountyHierarchicalData {
if (this._countyHierarchicalData == null)
{
this._countyHierarchicalData = new CountyHierarchicalData();
}
return this._countyHierarchicalData;
}
}
new Sample();
ts<!DOCTYPE html>
<html>
<head>
<title>Sample | Ignite UI | Web Components | infragistics</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" />
<link rel="stylesheet" href="/src/index.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<div class="legend-title">
Comparing Population of Countries
</div>
<div class="container fill">
<igc-treemap
name="treemap"
id="treemap"
parent-id-member-path="parent"
custom-value-member-path="parent"
id-member-path="name"
label-member-path="name"
value-member-path="population"
root-title="Countries"
header-display-mode="Overlay"
overlay-header-background="rgba(63, 64, 63, 1)"
header-hover-background="rgba(63, 64, 63, 1)"
header-background="rgba(63, 64, 63, 1)"
parent-node-bottom-padding="0"
parent-node-left-padding="0"
parent-node-right-padding="0"
parent-node-top-padding="0"
outline="black"
stroke-thickness="1">
<igc-treemap-node-style-mapping
name="styling1"
id="styling1"
value="Africa"
fill="rgba(115, 86, 86, 1)"
mapping-mode="CustomValue">
</igc-treemap-node-style-mapping>
<igc-treemap-node-style-mapping
name="styling2"
id="styling2"
value="Europe"
fill="rgba(97, 171, 55, 1)"
mapping-mode="CustomValue">
</igc-treemap-node-style-mapping>
<igc-treemap-node-style-mapping
name="styling3"
id="styling3"
value="Asia"
fill="rgba(139, 91, 177, 1)"
mapping-mode="CustomValue">
</igc-treemap-node-style-mapping>
<igc-treemap-node-style-mapping
name="styling4"
id="styling4"
value="North America"
fill="rgba(95, 186, 172, 1)"
mapping-mode="CustomValue">
</igc-treemap-node-style-mapping>
<igc-treemap-node-style-mapping
name="styling5"
id="styling5"
value="South America"
fill="rgba(238, 88, 121, 1)"
mapping-mode="CustomValue">
</igc-treemap-node-style-mapping>
<igc-treemap-node-style-mapping
name="styling6"
id="styling6"
value="Middle East"
fill="rgba(109, 177, 255, 1)"
mapping-mode="CustomValue">
</igc-treemap-node-style-mapping>
<igc-treemap-node-style-mapping
name="styling7"
id="styling7"
value="Central America"
fill="rgba(247, 210, 98, 1)"
mapping-mode="CustomValue">
</igc-treemap-node-style-mapping>
<igc-treemap-node-style-mapping
name="styling8"
id="styling8"
value="Oceania"
fill="rgba(168, 168, 183, 1)"
mapping-mode="CustomValue">
</igc-treemap-node-style-mapping>
</igc-treemap>
</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
Web Components ツリーマップのハイライト表示
次の例では、ツリーマップでノードのハイライト機能を示しています。
この機能には 2 つのオプションがあります。各ノードは、不透明度を下げることで個別に明るくしたり、他のすべてのノードに同じ効果をトリガーさせたりすることができます。この機能を有効にするには、highlightingMode
を Brighten または FadeOthers に設定します。
export class CountyHierarchicalDataItem {
public constructor(init: Partial<CountyHierarchicalDataItem>) {
Object.assign(this, init);
}
public code: string;
public parent: string;
public name: string;
public population: number;
}
export class CountyHierarchicalData extends Array<CountyHierarchicalDataItem> {
public constructor(items: Array<CountyHierarchicalDataItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new CountyHierarchicalDataItem(
{
code: `AFC`,
parent: null,
name: `Africa`,
population: null
}),
new CountyHierarchicalDataItem(
{
code: `ASA`,
parent: null,
name: `Asia`,
population: null
}),
new CountyHierarchicalDataItem(
{
code: `EUR`,
parent: null,
name: `Europe`,
population: null
}),
new CountyHierarchicalDataItem(
{
code: `MDE`,
parent: null,
name: `Middle East`,
population: null
}),
new CountyHierarchicalDataItem(
{
code: `NAM`,
parent: null,
name: `North America`,
population: null
}),
new CountyHierarchicalDataItem(
{
code: `CAM`,
parent: null,
name: `Central America`,
population: null
}),
new CountyHierarchicalDataItem(
{
code: `SAM`,
parent: null,
name: `South America`,
population: null
}),
new CountyHierarchicalDataItem(
{
code: `OCE`,
parent: null,
name: `Oceania`,
population: null
}),
new CountyHierarchicalDataItem(
{
code: `ANG`,
parent: `Africa`,
name: `Angola`,
population: 19618432
}),
new CountyHierarchicalDataItem(
{
code: `BEN`,
parent: `Africa`,
name: `Benin`,
population: 9099922
}),
new CountyHierarchicalDataItem(
{
code: `BOT`,
parent: `Africa`,
name: `Botswana`,
population: 2030738
}),
new CountyHierarchicalDataItem(
{
code: `BUR`,
parent: `Africa`,
name: `Burkina Faso`,
population: 16967845
}),
new CountyHierarchicalDataItem(
{
code: `BUR`,
parent: `Africa`,
name: `Burundi`,
population: 8575172
}),
new CountyHierarchicalDataItem(
{
code: `CAM`,
parent: `Africa`,
name: `Cameroon`,
population: 20030362
}),
new CountyHierarchicalDataItem(
{
code: `CPV`,
parent: `Africa`,
name: `Cape Verde`,
population: 500585
}),
new CountyHierarchicalDataItem(
{
code: `CAR`,
parent: `Africa`,
name: `Central African Republic`,
population: 4486837
}),
new CountyHierarchicalDataItem(
{
code: `CHD`,
parent: `Africa`,
name: `Chad`,
population: 11525496
}),
new CountyHierarchicalDataItem(
{
code: `COM`,
parent: `Africa`,
name: `Comoros`,
population: 753943
}),
new CountyHierarchicalDataItem(
{
code: `DRC`,
parent: `Africa`,
name: `Congo DRC`,
population: 67757577
}),
new CountyHierarchicalDataItem(
{
code: `CRP`,
parent: `Africa`,
name: `Congo Republic`,
population: 4139748
}),
new CountyHierarchicalDataItem(
{
code: `CIR`,
parent: `Africa`,
name: `Cote Ivoire`,
population: 20152894
}),
new CountyHierarchicalDataItem(
{
code: `DBT`,
parent: `Africa`,
name: `Djibouti`,
population: 905564
}),
new CountyHierarchicalDataItem(
{
code: `ETG`,
parent: `Africa`,
name: `Equatorial Guinea`,
population: 720213
}),
new CountyHierarchicalDataItem(
{
code: `ERT`,
parent: `Africa`,
name: `Eritrea`,
population: 5415280
}),
new CountyHierarchicalDataItem(
{
code: `ETH`,
parent: `Africa`,
name: `Ethiopia`,
population: 84734262
}),
new CountyHierarchicalDataItem(
{
code: `GBN`,
parent: `Africa`,
name: `Gabon`,
population: 1534262
}),
new CountyHierarchicalDataItem(
{
code: `GMB`,
parent: `Africa`,
name: `Gambia`,
population: 1776103
}),
new CountyHierarchicalDataItem(
{
code: `GHN`,
parent: `Africa`,
name: `Ghana`,
population: 24965816
}),
new CountyHierarchicalDataItem(
{
code: `GUN`,
parent: `Africa`,
name: `Guinea`,
population: 10221808
}),
new CountyHierarchicalDataItem(
{
code: `GNB`,
parent: `Africa`,
name: `Guinea-Bissau`,
population: 1547061
}),
new CountyHierarchicalDataItem(
{
code: `KEN`,
parent: `Africa`,
name: `Kenya`,
population: 41609728
}),
new CountyHierarchicalDataItem(
{
code: `LES`,
parent: `Africa`,
name: `Lesotho`,
population: 2193843
}),
new CountyHierarchicalDataItem(
{
code: `LBR`,
parent: `Africa`,
name: `Liberia`,
population: 4128572
}),
new CountyHierarchicalDataItem(
{
code: `MDG`,
parent: `Africa`,
name: `Madagascar`,
population: 21315135
}),
new CountyHierarchicalDataItem(
{
code: `MLW`,
parent: `Africa`,
name: `Malawi`,
population: 15380888
}),
new CountyHierarchicalDataItem(
{
code: `MAL`,
parent: `Africa`,
name: `Mali`,
population: 15839538
}),
new CountyHierarchicalDataItem(
{
code: `MRT`,
parent: `Africa`,
name: `Mauritania`,
population: 3541540
}),
new CountyHierarchicalDataItem(
{
code: `MUS`,
parent: `Africa`,
name: `Mauritius`,
population: 1286051
}),
new CountyHierarchicalDataItem(
{
code: `MOZ`,
parent: `Africa`,
name: `Mozambique`,
population: 23929708
}),
new CountyHierarchicalDataItem(
{
code: `NMB`,
parent: `Africa`,
name: `Namibia`,
population: 2324004
}),
new CountyHierarchicalDataItem(
{
code: `NER`,
parent: `Africa`,
name: `Niger`,
population: 16068994
}),
new CountyHierarchicalDataItem(
{
code: `NGA`,
parent: `Africa`,
name: `Nigeria`,
population: 162470737
}),
new CountyHierarchicalDataItem(
{
code: `RWD`,
parent: `Africa`,
name: `Rwanda`,
population: 10942950
}),
new CountyHierarchicalDataItem(
{
code: `STM`,
parent: `Africa`,
name: `Sao Tome`,
population: 168526
}),
new CountyHierarchicalDataItem(
{
code: `SEN`,
parent: `Africa`,
name: `Senegal`,
population: 12767556
}),
new CountyHierarchicalDataItem(
{
code: `SYC`,
parent: `Africa`,
name: `Seychelles`,
population: 86000
}),
new CountyHierarchicalDataItem(
{
code: `SRL`,
parent: `Africa`,
name: `Sierra Leone`,
population: 5997486
}),
new CountyHierarchicalDataItem(
{
code: `ZAF`,
parent: `Africa`,
name: `South Africa`,
population: 50586757
}),
new CountyHierarchicalDataItem(
{
code: `SSD`,
parent: `Africa`,
name: `South Sudan`,
population: 10314021
}),
new CountyHierarchicalDataItem(
{
code: `SDN`,
parent: `Africa`,
name: `Sudan`,
population: 34318385
}),
new CountyHierarchicalDataItem(
{
code: `SWZ`,
parent: `Africa`,
name: `Swaziland`,
population: 1067773
}),
new CountyHierarchicalDataItem(
{
code: `TNZ`,
parent: `Africa`,
name: `Tanzania`,
population: 46218486
}),
new CountyHierarchicalDataItem(
{
code: `TOG`,
parent: `Africa`,
name: `Togo`,
population: 6154813
}),
new CountyHierarchicalDataItem(
{
code: `UGN`,
parent: `Africa`,
name: `Uganda`,
population: 34509205
}),
new CountyHierarchicalDataItem(
{
code: `ZMB`,
parent: `Africa`,
name: `Zambia`,
population: 13474959
}),
new CountyHierarchicalDataItem(
{
code: `ZWE`,
parent: `Africa`,
name: `Zimbabwe`,
population: 12754378
}),
new CountyHierarchicalDataItem(
{
code: `AFG`,
parent: `Asia`,
name: `Afghanistan`,
population: 35320445
}),
new CountyHierarchicalDataItem(
{
code: `BAN`,
parent: `Asia`,
name: `Bangladesh`,
population: 150493658
}),
new CountyHierarchicalDataItem(
{
code: `BHT`,
parent: `Asia`,
name: `Bhutan`,
population: 738267
}),
new CountyHierarchicalDataItem(
{
code: `BRN`,
parent: `Asia`,
name: `Brunei`,
population: 405938
}),
new CountyHierarchicalDataItem(
{
code: `CAM`,
parent: `Asia`,
name: `Cambodia`,
population: 14305183
}),
new CountyHierarchicalDataItem(
{
code: `CHI`,
parent: `Asia`,
name: `China`,
population: 1344130000
}),
new CountyHierarchicalDataItem(
{
code: `HNK`,
parent: `Asia`,
name: `Hong Kong`,
population: 7071600
}),
new CountyHierarchicalDataItem(
{
code: `IND`,
parent: `Asia`,
name: `India`,
population: 1241491960
}),
new CountyHierarchicalDataItem(
{
code: `IDN`,
parent: `Asia`,
name: `Indonesia`,
population: 242325638
}),
new CountyHierarchicalDataItem(
{
code: `JPN`,
parent: `Asia`,
name: `Japan`,
population: 127817277
}),
new CountyHierarchicalDataItem(
{
code: `KZH`,
parent: `Asia`,
name: `Kazakhstan`,
population: 16558676
}),
new CountyHierarchicalDataItem(
{
code: `NKO`,
parent: `Asia`,
name: `North Korea`,
population: 24451285
}),
new CountyHierarchicalDataItem(
{
code: `SKO`,
parent: `Asia`,
name: `South Korea`,
population: 49779000
}),
new CountyHierarchicalDataItem(
{
code: `KGZ`,
parent: `Asia`,
name: `Kyrgyzstan`,
population: 5514600
}),
new CountyHierarchicalDataItem(
{
code: `LAO`,
parent: `Asia`,
name: `Lao PDR`,
population: 6288037
}),
new CountyHierarchicalDataItem(
{
code: `MAC`,
parent: `Asia`,
name: `Macao`,
population: 555731
}),
new CountyHierarchicalDataItem(
{
code: `MYS`,
parent: `Asia`,
name: `Malaysia`,
population: 28859154
}),
new CountyHierarchicalDataItem(
{
code: `MDV`,
parent: `Asia`,
name: `Maldives`,
population: 320081
}),
new CountyHierarchicalDataItem(
{
code: `MNG`,
parent: `Asia`,
name: `Mongolia`,
population: 2800114
}),
new CountyHierarchicalDataItem(
{
code: `MYM`,
parent: `Asia`,
name: `Myanmar`,
population: 48336763
}),
new CountyHierarchicalDataItem(
{
code: `NPL`,
parent: `Asia`,
name: `Nepal`,
population: 30485798
}),
new CountyHierarchicalDataItem(
{
code: `PHP`,
parent: `Asia`,
name: `Philippines`,
population: 94852030
}),
new CountyHierarchicalDataItem(
{
code: `SNG`,
parent: `Asia`,
name: `Singapore`,
population: 5183700
}),
new CountyHierarchicalDataItem(
{
code: `SRL`,
parent: `Asia`,
name: `Sri Lanka`,
population: 20869000
}),
new CountyHierarchicalDataItem(
{
code: `TKS`,
parent: `Asia`,
name: `Tajikistan`,
population: 6976958
}),
new CountyHierarchicalDataItem(
{
code: `THL`,
parent: `Asia`,
name: `Thailand`,
population: 69518555
}),
new CountyHierarchicalDataItem(
{
code: `TRK`,
parent: `Asia`,
name: `Turkmenistan`,
population: 5105301
}),
new CountyHierarchicalDataItem(
{
code: `UZB`,
parent: `Asia`,
name: `Uzbekistan`,
population: 29341200
}),
new CountyHierarchicalDataItem(
{
code: `VTN`,
parent: `Asia`,
name: `Vietnam`,
population: 87840000
}),
new CountyHierarchicalDataItem(
{
code: `ANT`,
parent: `Central America`,
name: `Antigua`,
population: 89612
}),
new CountyHierarchicalDataItem(
{
code: `ARB`,
parent: `Central America`,
name: `Aruba`,
population: 108141
}),
new CountyHierarchicalDataItem(
{
code: `BHM`,
parent: `Central America`,
name: `Bahamas`,
population: 347176
}),
new CountyHierarchicalDataItem(
{
code: `BRB`,
parent: `Central America`,
name: `Barbados`,
population: 273925
}),
new CountyHierarchicalDataItem(
{
code: `BLZ`,
parent: `Central America`,
name: `Belize`,
population: 356600
}),
new CountyHierarchicalDataItem(
{
code: `BRM`,
parent: `Central America`,
name: `Bermuda`,
population: 64700
}),
new CountyHierarchicalDataItem(
{
code: `CYI`,
parent: `Central America`,
name: `Cayman Islands`,
population: 56729
}),
new CountyHierarchicalDataItem(
{
code: `CSR`,
parent: `Central America`,
name: `Costa Rica`,
population: 4726575
}),
new CountyHierarchicalDataItem(
{
code: `CUB`,
parent: `Central America`,
name: `Cuba`,
population: 11253665
}),
new CountyHierarchicalDataItem(
{
code: `CUR`,
parent: `Central America`,
name: `Curacao`,
population: 145619
}),
new CountyHierarchicalDataItem(
{
code: `DMA`,
parent: `Central America`,
name: `Dominica`,
population: 67675
}),
new CountyHierarchicalDataItem(
{
code: `DOM`,
parent: `Central America`,
name: `Dominican Republic`,
population: 10056181
}),
new CountyHierarchicalDataItem(
{
code: `SLV`,
parent: `Central America`,
name: `El Salvador`,
population: 6227491
}),
new CountyHierarchicalDataItem(
{
code: `FIS`,
parent: `Central America`,
name: `Faeroe Islands`,
population: 48863
}),
new CountyHierarchicalDataItem(
{
code: `GND`,
parent: `Central America`,
name: `Grenada`,
population: 104890
}),
new CountyHierarchicalDataItem(
{
code: `GUA`,
parent: `Central America`,
name: `Guam`,
population: 182111
}),
new CountyHierarchicalDataItem(
{
code: `GTM`,
parent: `Central America`,
name: `Guatemala`,
population: 14757316
}),
new CountyHierarchicalDataItem(
{
code: `HAT`,
parent: `Central America`,
name: `Haiti`,
population: 10123787
}),
new CountyHierarchicalDataItem(
{
code: `HON`,
parent: `Central America`,
name: `Honduras`,
population: 7754687
}),
new CountyHierarchicalDataItem(
{
code: `JAM`,
parent: `Central America`,
name: `Jamaica`,
population: 2706500
}),
new CountyHierarchicalDataItem(
{
code: `NCR`,
parent: `Central America`,
name: `Nicaragua`,
population: 5869859
}),
new CountyHierarchicalDataItem(
{
code: `NMI`,
parent: `Central America`,
name: `Northern Mariana Islands`,
population: 61174
}),
new CountyHierarchicalDataItem(
{
code: `PAN`,
parent: `Central America`,
name: `Panama`,
population: 3571185
}),
new CountyHierarchicalDataItem(
{
code: `PRT`,
parent: `Central America`,
name: `Puerto Rico`,
population: 3706690
}),
new CountyHierarchicalDataItem(
{
code: `STK`,
parent: `Central America`,
name: `St. Kitts`,
population: 53051
}),
new CountyHierarchicalDataItem(
{
code: `STL`,
parent: `Central America`,
name: `St. Lucia`,
population: 176000
}),
new CountyHierarchicalDataItem(
{
code: `STV`,
parent: `Central America`,
name: `St. Vincent`,
population: 109365
}),
new CountyHierarchicalDataItem(
{
code: `TAB`,
parent: `Central America`,
name: `Trinidad and Tobago`,
population: 1346350
}),
new CountyHierarchicalDataItem(
{
code: `RCI`,
parent: `Central America`,
name: `Turks and Caicos Islands`,
population: 39184
}),
new CountyHierarchicalDataItem(
{
code: `ISV`,
parent: `Central America`,
name: `US Virgin Islands`,
population: 109666
}),
new CountyHierarchicalDataItem(
{
code: `ALB`,
parent: `Europe`,
name: `Albania`,
population: 3215988
}),
new CountyHierarchicalDataItem(
{
code: `AND`,
parent: `Europe`,
name: `Andorra`,
population: 86165
}),
new CountyHierarchicalDataItem(
{
code: `ARM`,
parent: `Europe`,
name: `Armenia`,
population: 3100236
}),
new CountyHierarchicalDataItem(
{
code: `AUT`,
parent: `Europe`,
name: `Austria`,
population: 8423635
}),
new CountyHierarchicalDataItem(
{
code: `BER`,
parent: `Europe`,
name: `Belarus`,
population: 9473000
}),
new CountyHierarchicalDataItem(
{
code: `BEL`,
parent: `Europe`,
name: `Belgium`,
population: 11020952
}),
new CountyHierarchicalDataItem(
{
code: `BIH`,
parent: `Europe`,
name: `Bosnia`,
population: 3752228
}),
new CountyHierarchicalDataItem(
{
code: `BUL`,
parent: `Europe`,
name: `Bulgaria`,
population: 7348328
}),
new CountyHierarchicalDataItem(
{
code: `CHI`,
parent: `Europe`,
name: `Channel Islands`,
population: 153876
}),
new CountyHierarchicalDataItem(
{
code: `CRO`,
parent: `Europe`,
name: `Croatia`,
population: 4403000
}),
new CountyHierarchicalDataItem(
{
code: `CYP`,
parent: `Europe`,
name: `Cyprus`,
population: 1116564
}),
new CountyHierarchicalDataItem(
{
code: `CZE`,
parent: `Europe`,
name: `Czechia`,
population: 10496088
}),
new CountyHierarchicalDataItem(
{
code: `DEN`,
parent: `Europe`,
name: `Denmark`,
population: 5570572
}),
new CountyHierarchicalDataItem(
{
code: `EST`,
parent: `Europe`,
name: `Estonia`,
population: 1339928
}),
new CountyHierarchicalDataItem(
{
code: `FIN`,
parent: `Europe`,
name: `Finland`,
population: 5388272
}),
new CountyHierarchicalDataItem(
{
code: `FRA`,
parent: `Europe`,
name: `France`,
population: 65433714
}),
new CountyHierarchicalDataItem(
{
code: `GEO`,
parent: `Europe`,
name: `Georgia`,
population: 4486000
}),
new CountyHierarchicalDataItem(
{
code: `DEU`,
parent: `Europe`,
name: `Germany`,
population: 81797673
}),
new CountyHierarchicalDataItem(
{
code: `GRC`,
parent: `Europe`,
name: `Greece`,
population: 11300410
}),
new CountyHierarchicalDataItem(
{
code: `HUN`,
parent: `Europe`,
name: `Hungary`,
population: 9971727
}),
new CountyHierarchicalDataItem(
{
code: `ICE`,
parent: `Europe`,
name: `Iceland`,
population: 319014
}),
new CountyHierarchicalDataItem(
{
code: `IRE`,
parent: `Europe`,
name: `Ireland`,
population: 4576317
}),
new CountyHierarchicalDataItem(
{
code: `IOM`,
parent: `Europe`,
name: `Isle of Man`,
population: 83327
}),
new CountyHierarchicalDataItem(
{
code: `ITA`,
parent: `Europe`,
name: `Italy`,
population: 60723603
}),
new CountyHierarchicalDataItem(
{
code: `KOS`,
parent: `Europe`,
name: `Kosovo`,
population: 1802765
}),
new CountyHierarchicalDataItem(
{
code: `LAT`,
parent: `Europe`,
name: `Latvia`,
population: 2058184
}),
new CountyHierarchicalDataItem(
{
code: `LVA`,
parent: `Europe`,
name: `Liechtenstein`,
population: 36304
}),
new CountyHierarchicalDataItem(
{
code: `LTU`,
parent: `Europe`,
name: `Lithuania`,
population: 3030173
}),
new CountyHierarchicalDataItem(
{
code: `LUX`,
parent: `Europe`,
name: `Luxembourg`,
population: 518252
}),
new CountyHierarchicalDataItem(
{
code: `MKD`,
parent: `Europe`,
name: `North Macedonia`,
population: 2063893
}),
new CountyHierarchicalDataItem(
{
code: `MLT`,
parent: `Europe`,
name: `Malta`,
population: 415654
}),
new CountyHierarchicalDataItem(
{
code: `MDA`,
parent: `Europe`,
name: `Moldova`,
population: 3559000
}),
new CountyHierarchicalDataItem(
{
code: `MON`,
parent: `Europe`,
name: `Monaco`,
population: 35427
}),
new CountyHierarchicalDataItem(
{
code: `MNE`,
parent: `Europe`,
name: `Montenegro`,
population: 632261
}),
new CountyHierarchicalDataItem(
{
code: `MLD`,
parent: `Europe`,
name: `Netherlands`,
population: 16693074
}),
new CountyHierarchicalDataItem(
{
code: `NOR`,
parent: `Europe`,
name: `Norway`,
population: 4953088
}),
new CountyHierarchicalDataItem(
{
code: `POL`,
parent: `Europe`,
name: `Poland`,
population: 38534157
}),
new CountyHierarchicalDataItem(
{
code: `POR`,
parent: `Europe`,
name: `Portugal`,
population: 10556999
}),
new CountyHierarchicalDataItem(
{
code: `ROM`,
parent: `Europe`,
name: `Romania`,
population: 21384832
}),
new CountyHierarchicalDataItem(
{
code: `RUS`,
parent: `Europe`,
name: `Russia`,
population: 142960000
}),
new CountyHierarchicalDataItem(
{
code: `SMR`,
parent: `Europe`,
name: `San Marino`,
population: 31735
}),
new CountyHierarchicalDataItem(
{
code: `SBR`,
parent: `Europe`,
name: `Serbia`,
population: 7258745
}),
new CountyHierarchicalDataItem(
{
code: `STM`,
parent: `Europe`,
name: `Sint Maarten`,
population: 36609
}),
new CountyHierarchicalDataItem(
{
code: `SVK`,
parent: `Europe`,
name: `Slovakia`,
population: 5398384
}),
new CountyHierarchicalDataItem(
{
code: `SLO`,
parent: `Europe`,
name: `Slovenia`,
population: 2052843
}),
new CountyHierarchicalDataItem(
{
code: `ESP`,
parent: `Europe`,
name: `Spain`,
population: 46174601
}),
new CountyHierarchicalDataItem(
{
code: `STM`,
parent: `Europe`,
name: `St. Martin`,
population: 30615
}),
new CountyHierarchicalDataItem(
{
code: `SWE`,
parent: `Europe`,
name: `Sweden`,
population: 9449213
}),
new CountyHierarchicalDataItem(
{
code: `CHE`,
parent: `Europe`,
name: `Switzerland`,
population: 7912398
}),
new CountyHierarchicalDataItem(
{
code: `UKR`,
parent: `Europe`,
name: `Ukraine`,
population: 45706100
}),
new CountyHierarchicalDataItem(
{
code: `GBR`,
parent: `Europe`,
name: `United Kingdom`,
population: 62744081
}),
new CountyHierarchicalDataItem(
{
code: `DZA`,
parent: `Middle East`,
name: `Algeria`,
population: 35980193
}),
new CountyHierarchicalDataItem(
{
code: `AZE`,
parent: `Middle East`,
name: `Azerbaijan`,
population: 9173082
}),
new CountyHierarchicalDataItem(
{
code: `BHR`,
parent: `Middle East`,
name: `Bahrain`,
population: 1323535
}),
new CountyHierarchicalDataItem(
{
code: `EGY`,
parent: `Middle East`,
name: `Egypt`,
population: 82536770
}),
new CountyHierarchicalDataItem(
{
code: `IRN`,
parent: `Middle East`,
name: `Iran`,
population: 74798599
}),
new CountyHierarchicalDataItem(
{
code: `IRQ`,
parent: `Middle East`,
name: `Iraq`,
population: 32961959
}),
new CountyHierarchicalDataItem(
{
code: `ISR`,
parent: `Middle East`,
name: `Israel`,
population: 7765900
}),
new CountyHierarchicalDataItem(
{
code: `JOR`,
parent: `Middle East`,
name: `Jordan`,
population: 6181000
}),
new CountyHierarchicalDataItem(
{
code: `KWT`,
parent: `Middle East`,
name: `Kuwait`,
population: 2818042
}),
new CountyHierarchicalDataItem(
{
code: `LBN`,
parent: `Middle East`,
name: `Lebanon`,
population: 4259405
}),
new CountyHierarchicalDataItem(
{
code: `LBY`,
parent: `Middle East`,
name: `Libya`,
population: 6422772
}),
new CountyHierarchicalDataItem(
{
code: `MAR`,
parent: `Middle East`,
name: `Morocco`,
population: 32272974
}),
new CountyHierarchicalDataItem(
{
code: `OMN`,
parent: `Middle East`,
name: `Oman`,
population: 2846145
}),
new CountyHierarchicalDataItem(
{
code: `PKS`,
parent: `Middle East`,
name: `Pakistan`,
population: 176745364
}),
new CountyHierarchicalDataItem(
{
code: `QTR`,
parent: `Middle East`,
name: `Qatar`,
population: 1870041
}),
new CountyHierarchicalDataItem(
{
code: `SAR`,
parent: `Middle East`,
name: `Saudi Arabia`,
population: 28082541
}),
new CountyHierarchicalDataItem(
{
code: `SOM`,
parent: `Middle East`,
name: `Somalia`,
population: 9556873
}),
new CountyHierarchicalDataItem(
{
code: `SYR`,
parent: `Middle East`,
name: `Syria`,
population: 20820311
}),
new CountyHierarchicalDataItem(
{
code: `TUN`,
parent: `Middle East`,
name: `Tunisia`,
population: 10673800
}),
new CountyHierarchicalDataItem(
{
code: `TUR`,
parent: `Middle East`,
name: `Turkey`,
population: 73639596
}),
new CountyHierarchicalDataItem(
{
code: `UAE`,
parent: `Middle East`,
name: `United Arab Emirates`,
population: 7890924
}),
new CountyHierarchicalDataItem(
{
code: `WTB`,
parent: `Middle East`,
name: `West Bank`,
population: 3927051
}),
new CountyHierarchicalDataItem(
{
code: `YEM`,
parent: `Middle East`,
name: `Yemen`,
population: 24799880
}),
new CountyHierarchicalDataItem(
{
code: `CAN`,
parent: `North America`,
name: `Canada`,
population: 34483975
}),
new CountyHierarchicalDataItem(
{
code: `GRL`,
parent: `North America`,
name: `Greenland`,
population: 56840
}),
new CountyHierarchicalDataItem(
{
code: `MEX`,
parent: `North America`,
name: `Mexico`,
population: 114793341
}),
new CountyHierarchicalDataItem(
{
code: `USA`,
parent: `North America`,
name: `United States`,
population: 311591917
}),
new CountyHierarchicalDataItem(
{
code: `AMS`,
parent: `Oceania`,
name: `American Samoa`,
population: 69543
}),
new CountyHierarchicalDataItem(
{
code: `AUS`,
parent: `Oceania`,
name: `Australia`,
population: 22323900
}),
new CountyHierarchicalDataItem(
{
code: `FIJ`,
parent: `Oceania`,
name: `Fiji`,
population: 868406
}),
new CountyHierarchicalDataItem(
{
code: `FRP`,
parent: `Oceania`,
name: `French Polynesia`,
population: 273777
}),
new CountyHierarchicalDataItem(
{
code: `KIR`,
parent: `Oceania`,
name: `Kiribati`,
population: 101093
}),
new CountyHierarchicalDataItem(
{
code: `MIS`,
parent: `Oceania`,
name: `Marshall Islands`,
population: 54816
}),
new CountyHierarchicalDataItem(
{
code: `MCR`,
parent: `Oceania`,
name: `Micronesia`,
population: 111542
}),
new CountyHierarchicalDataItem(
{
code: `NCD`,
parent: `Oceania`,
name: `New Caledonia`,
population: 254024
}),
new CountyHierarchicalDataItem(
{
code: `NZL`,
parent: `Oceania`,
name: `New Zealand`,
population: 4405200
}),
new CountyHierarchicalDataItem(
{
code: `PAL`,
parent: `Oceania`,
name: `Palau`,
population: 20609
}),
new CountyHierarchicalDataItem(
{
code: `PNG`,
parent: `Oceania`,
name: `Papua New Guinea`,
population: 7013829
}),
new CountyHierarchicalDataItem(
{
code: `SAM`,
parent: `Oceania`,
name: `Samoa`,
population: 183874
}),
new CountyHierarchicalDataItem(
{
code: `SIS`,
parent: `Oceania`,
name: `Solomon Islands`,
population: 552267
}),
new CountyHierarchicalDataItem(
{
code: `TML`,
parent: `Oceania`,
name: `Timor-Leste`,
population: 1175880
}),
new CountyHierarchicalDataItem(
{
code: `TON`,
parent: `Oceania`,
name: `Tonga`,
population: 104509
}),
new CountyHierarchicalDataItem(
{
code: `TUV`,
parent: `Oceania`,
name: `Tuvalu`,
population: 9847
}),
new CountyHierarchicalDataItem(
{
code: `VNT`,
parent: `Oceania`,
name: `Vanuatu`,
population: 245619
}),
new CountyHierarchicalDataItem(
{
code: `ARG`,
parent: `South America`,
name: `Argentina`,
population: 40764561
}),
new CountyHierarchicalDataItem(
{
code: `BOL`,
parent: `South America`,
name: `Bolivia`,
population: 10088108
}),
new CountyHierarchicalDataItem(
{
code: `BRA`,
parent: `South America`,
name: `Brazil`,
population: 196655014
}),
new CountyHierarchicalDataItem(
{
code: `CHI`,
parent: `South America`,
name: `Chile`,
population: 17269525
}),
new CountyHierarchicalDataItem(
{
code: `COL`,
parent: `South America`,
name: `Colombia`,
population: 46927125
}),
new CountyHierarchicalDataItem(
{
code: `ECU`,
parent: `South America`,
name: `Ecuador`,
population: 14666055
}),
new CountyHierarchicalDataItem(
{
code: `GUY`,
parent: `South America`,
name: `Guyana`,
population: 756040
}),
new CountyHierarchicalDataItem(
{
code: `PAR`,
parent: `South America`,
name: `Paraguay`,
population: 6568290
}),
new CountyHierarchicalDataItem(
{
code: `PER`,
parent: `South America`,
name: `Peru`,
population: 29399817
}),
new CountyHierarchicalDataItem(
{
code: `SUR`,
parent: `South America`,
name: `Suriname`,
population: 529419
}),
new CountyHierarchicalDataItem(
{
code: `URG`,
parent: `South America`,
name: `Uruguay`,
population: 3368595
}),
new CountyHierarchicalDataItem(
{
code: `VEN`,
parent: `South America`,
name: `Venezuela`,
population: 29278000
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import { IgcTreemapModule } from 'igniteui-webcomponents-charts';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, TreemapDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { IgcTreemapComponent } from 'igniteui-webcomponents-charts';
import { CountyHierarchicalDataItem, CountyHierarchicalData } from './CountyHierarchicalData';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import { defineAllComponents } from 'igniteui-webcomponents';
import { ModuleManager } from 'igniteui-webcomponents-core';
defineAllComponents();
import "./index.css";
ModuleManager.register(
IgcPropertyEditorPanelModule,
IgcTreemapModule
);
export class Sample {
private propertyEditor: IgcPropertyEditorPanelComponent
private highlightedModeEditor: IgcPropertyEditorPropertyDescriptionComponent
private treemap: IgcTreemapComponent
private _bind: () => void;
constructor() {
var propertyEditor = this.propertyEditor = document.getElementById('PropertyEditor') as IgcPropertyEditorPanelComponent;
var highlightedModeEditor = this.highlightedModeEditor = document.getElementById('HighlightedModeEditor') as IgcPropertyEditorPropertyDescriptionComponent;
var treemap = this.treemap = document.getElementById('treemap') as IgcTreemapComponent;
this._bind = () => {
propertyEditor.componentRenderer = this.renderer;
propertyEditor.target = this.treemap;
treemap.dataSource = this.countyHierarchicalData;
}
this._bind();
}
private _countyHierarchicalData: CountyHierarchicalData = null;
public get countyHierarchicalData(): CountyHierarchicalData {
if (this._countyHierarchicalData == null)
{
this._countyHierarchicalData = new CountyHierarchicalData();
}
return this._countyHierarchicalData;
}
private _componentRenderer: ComponentRenderer = null;
public get renderer(): ComponentRenderer {
if (this._componentRenderer == null) {
this._componentRenderer = new ComponentRenderer();
var context = this._componentRenderer.context;
PropertyEditorPanelDescriptionModule.register(context);
TreemapDescriptionModule.register(context);
}
return this._componentRenderer;
}
}
new Sample();
ts<!DOCTYPE html>
<html>
<head>
<title>Sample | Ignite UI | Web Components | infragistics</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" />
<link rel="stylesheet" href="/src/index.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<div class="options vertical">
<igc-property-editor-panel
name="PropertyEditor"
id="PropertyEditor"
description-type="Treemap"
is-horizontal="true"
is-wrapping-enabled="true">
<igc-property-editor-property-description
property-path="HighlightingMode"
name="HighlightedModeEditor"
id="HighlightedModeEditor"
label="Highlighting Mode: "
primitive-value="Brighten"
drop-down-values="Brighten, FadeOthers">
</igc-property-editor-property-description>
</igc-property-editor-panel>
</div>
<div class="legend-title">
Comparing Population of Countries
</div>
<div class="container fill">
<igc-treemap
name="treemap"
id="treemap"
parent-id-member-path="parent"
id-member-path="name"
label-member-path="name"
value-member-path="population"
fill-scale-mode="Value"
fill-scale-minimum-value="0"
fill-scale-maximum-value="1500000000"
fill-brushes="rgba(78, 98, 207, 1) rgba(138, 88, 214, 1)"
is-fill-scale-logarithmic="true"
root-title="Countries"
header-display-mode="Overlay"
parent-node-bottom-padding="0"
parent-node-left-padding="0"
parent-node-right-padding="0"
parent-node-top-padding="0"
outline="black"
stroke-thickness="1">
</igc-treemap>
</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
Web Components ツリーマップのパーセントベースのハイライト表示
highlightedDataSource
: ハイライト表示された値を読み取るデータ ソースを指定します。null の場合、ハイライト表示された値は ItemsSource プロパティから読み取られます。highlightedValueMemberPath
: ハイライト表示された値が読み取られるデータ ソース内のプロパティの名前を指定します。highlightedValueOpacity
: ハイライト表示された値の背後にある通常の値の不透明度を制御します。highlightedValuesDisplayMode
: ハイライト表示された値を有効または無効にします。- Auto: ツリーマップによって、使用するモードが決まります。
- Overlay: ツリーマップには、通常の値の上にハイライト表示された値が表示され、通常の値にはわずかに不透明度が適用されます。
- Hidden: ツリーマップにはハイライト表示された値は表示されません。
export class CountryTopUrbanPopDataItem {
public constructor(init: Partial<CountryTopUrbanPopDataItem>) {
Object.assign(this, init);
}
public code: string;
public parent: string;
public name: string;
public population: number;
public urbanPopulation: number;
public urbanPopPercent: string;
}
export class CountryTopUrbanPopData extends Array<CountryTopUrbanPopDataItem> {
public constructor(items: Array<CountryTopUrbanPopDataItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new CountryTopUrbanPopDataItem(
{
code: `ASA`,
parent: null,
name: `Asia`,
population: null,
urbanPopulation: null,
urbanPopPercent: null
}),
new CountryTopUrbanPopDataItem(
{
code: `NAM`,
parent: null,
name: `North America`,
population: null,
urbanPopulation: null,
urbanPopPercent: null
}),
new CountryTopUrbanPopDataItem(
{
code: `CHI`,
parent: `Asia`,
name: `China`,
population: 1425178792,
urbanPopulation: 941865672,
urbanPopPercent: `65%`
}),
new CountryTopUrbanPopDataItem(
{
code: `IND`,
parent: `Asia`,
name: `India`,
population: 1428627663,
urbanPopulation: 530387142,
urbanPopPercent: `36%`
}),
new CountryTopUrbanPopDataItem(
{
code: `USA`,
parent: `North America`,
name: `United States`,
population: 341814420,
urbanPopulation: 284698234,
urbanPopPercent: `83%`
}),
new CountryTopUrbanPopDataItem(
{
code: `MEX`,
parent: `North America`,
name: `Mexico`,
population: 129388467,
urbanPopulation: 114397383,
urbanPopPercent: `88%`
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcTreemapModule } from 'igniteui-webcomponents-charts';
import { ComponentRenderer, TreemapDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcTreemapComponent } from 'igniteui-webcomponents-charts';
import { CountryTopUrbanPopDataItem, CountryTopUrbanPopData } from './CountryTopUrbanPopData';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcTreemapModule
);
export class Sample {
private treemap: IgcTreemapComponent
private _bind: () => void;
constructor() {
var treemap = this.treemap = document.getElementById('treemap') as IgcTreemapComponent;
this._bind = () => {
treemap.dataSource = this.countryTopUrbanPopData;
}
this._bind();
}
private _countryTopUrbanPopData: CountryTopUrbanPopData = null;
public get countryTopUrbanPopData(): CountryTopUrbanPopData {
if (this._countryTopUrbanPopData == null)
{
this._countryTopUrbanPopData = new CountryTopUrbanPopData();
}
return this._countryTopUrbanPopData;
}
private _componentRenderer: ComponentRenderer = null;
public get renderer(): ComponentRenderer {
if (this._componentRenderer == null) {
this._componentRenderer = new ComponentRenderer();
var context = this._componentRenderer.context;
TreemapDescriptionModule.register(context);
}
return this._componentRenderer;
}
}
new Sample();
ts<!DOCTYPE html>
<html>
<head>
<title>Sample | Ignite UI | Web Components | infragistics</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" />
<link rel="stylesheet" href="/src/index.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<div class="legend-title">
Comparing Top Urban Population Percentages between North America & Asia
</div>
<div class="container fill">
<igc-treemap
name="treemap"
id="treemap"
parent-id-member-path="parent"
id-member-path="name"
label-member-path="name"
value-member-path="population"
highlighted-value-member-path="urbanPopulation"
highlighted-values-display-mode="Overlay"
fill-brushes="rgba(252, 65, 0, 1) rgba(255, 197, 90, 1) rgba(0, 33, 94, 1) rgba(44, 78, 128, 1)"
root-title="Continents"
header-display-mode="Auto"
is-fill-scale-logarithmic="true"
label-vertical-alignment="Top"
parent-node-top-margin="10"
fill-scale-mode="Value"
text-color="black"
text-style="normal bold 25px Verdana">
</igc-treemap>
</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
その他のリソース
関連するチャート タイプの詳細については、以下のトピックを参照してください。
API リファレンス
以下は、上記のセクションで説明した API メンバーのリストです。