1+ @page " /"
2+ @using Syncfusion .Blazor .TreeMap
3+
4+
5+ <SfTreeMap DataSource =" @growthReport" TValue =" Country" WeightValuePath =" GDP" RangeColorValuePath =" GDP" >
6+ <TreeMapTitleSettings Text =" Top 10 countries by GDP Nominal - 2015" ></TreeMapTitleSettings >
7+ <TreeMapLegendSettings Visible =" true" ></TreeMapLegendSettings >
8+ <TreeMapLeafItemSettings LabelPath =" Name" >
9+ <TreeMapLeafColorMappings >
10+ <TreeMapLeafColorMapping From =" 1" To =" 3000" Color =" @(" Orange " )" ></TreeMapLeafColorMapping >
11+ <TreeMapLeafColorMapping From =" 3000" To =" 20000" Color =" @(" Green " )" ></TreeMapLeafColorMapping >
12+ </TreeMapLeafColorMappings >
13+ </TreeMapLeafItemSettings >
14+ </SfTreeMap >
15+
16+ @code {
17+
18+ public class Country
19+ {
20+ public string Name { get ; set ; }
21+ public double GDP { get ; set ; }
22+ }
23+
24+ private List <Country > growthReport = new List <Country >()
25+ {
26+ new Country { Name = " United States" , GDP = 17946 },
27+ new Country { Name = " China" , GDP = 10866 },
28+ new Country { Name = " Japan" , GDP = 4123 },
29+ new Country { Name = " Germany" , GDP = 3355 },
30+ new Country { Name = " United Kingdom" , GDP = 2848 },
31+ new Country { Name = " France" , GDP = 2421 },
32+ new Country { Name = " India" , GDP = 2073 },
33+ new Country { Name = " Italy" , GDP = 1814 },
34+ new Country { Name = " Brazil" , GDP = 1774 },
35+ new Country { Name = " Canada" , GDP = 1550 }
36+ };
37+ }
0 commit comments