@(Html.DevExtreme().TreeMap()
.DataSource(new[] {
new { name = "Africa", items = new[] {
new { value = 21324000, name = "Lagos", country = "Nigeria" },
new { value = 9735000, name = "Kinshasa", country = "Democratic Republic of the Congo" },
new { value = 9278441, name = "Cairo", country = "Egypt" }
}
},
new { name = "Asia", items = new[] {
new { value = 24256800, name = "Shanghai", country = "China" },
new { value = 23500000, name = "Karachi", country = "Pakistan" },
new { value = 21516000, name = "Beijing", country = "China" },
new { value = 16787941, name = "Delhi", country = "India" },
new { value = 15200000, name = "Tianjin", country = "China" }
}
},
new { name = "Australia", items = new[] {
new { value = 4840600, name = "Sydney", country = "Austraila" },
new { value = 4440000, name = "Melbourne", country = "Austraila" }
}
},
new { name = "Europe", items = new[] {
new { value = 14160467, name = "Istanbul", country = "Turkey" },
new { value = 12197596, name = "Moscow", country = "Russia" },
new { value = 8538689, name = "London", country = "United Kingdom" },
new { value = 5191690, name = "Saint Petersburg", country = "Russia" },
new { value = 4470800, name = "Ankara", country = "Turkey" },
new { value = 3517424, name = "Berlin", country = "Germany" }
}
},
new { name = "North America", items = new[] {
new { value = 8874724, name = "Mexico City", country = "Mexico" },
new { value = 8550405, name = "New York City", country = "United States" },
new { value = 3884307, name = "Los Angeles", country = "United States" },
new { value = 2808503, name = "Toronto", country = "Canada" }
}
},
new { name = "South America", items = new[] {
new { value = 11895893, name = "São Paulo", country = "Brazil" },
new { value = 8693387, name = "Lima", country = "Peru" },
new { value = 7776845, name = "Bogotá", country = "Colombia" },
new { value = 6429923, name = "Rio de Janeiro", country = "Brazil" }
}
}
})
.Title("The Most Populated Cities by Continents")
.Tooltip(t => t
.Enabled(true)
.Format(Format.Thousands)
.CustomizeTooltip(@<text>
function(arg) {
var data = arg.node.data,
result = null;
if (arg.node.isLeaf()) {
result = "<span class='city'>" + data.name + "</span> (" +
data.country + ")<br />Population: " + arg.valueText;
}
return {
text: result
};
}
</text>))
.Size(s => s.Height(500))
)
using DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
using DevExtreme.NETCore.Demos.Models;
using DevExtreme.NETCore.Demos.Models.SampleData;
using Microsoft.AspNetCore.Mvc;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
namespace DevExtreme.NETCore.Demos.Controllers {
public class ChartsController : Controller {
public ActionResult HierarchicalDataStructure() {
return View();
}
}
}
.city {
font-weight: 500;
}