@(Html.DevExtreme().TreeMap()
.DataSource(new object[] {
new { id = "1", name = "Africa" },
new { id = "1_1", parentId = "1", value = 21324000, name = "Lagos", country = "Nigeria" },
new { id = "1_2", parentId = "1", value = 9735000, name = "Kinshasa", country = "Democratic Republic of the Congo" },
new { id = "1_3", parentId = "1", value = 9278441, name = "Cairo", country = "Egypt" },
new { id = "2", name = "Asia" },
new { id = "2_1", parentId = "2", value = 24256800, name = "Shanghai", country = "China" },
new { id = "2_2", parentId = "2", value = 23500000, name = "Karachi", country = "Pakistan" },
new { id = "2_3", parentId = "2", value = 21516000, name = "Beijing", country = "China" },
new { id = "2_4", parentId = "2", value = 16787941, name = "Delhi", country = "India" },
new { id = "2_5", parentId = "2", value = 15200000, name = "Tianjin", country = "China" },
new { id = "3", name = "Australia" },
new { id = "3_1", parentId = "3", value = 4840600, name = "Sydney", country = "Austraila" },
new { id = "3_2", parentId = "3", value = 4440000, name = "Melbourne", country = "Austraila" },
new { id = "4", name = "Europe" },
new { id = "4_1", parentId = "4", value = 14160467, name = "Istanbul", country = "Turkey" },
new { id = "4_2", parentId = "4", value = 12197596, name = "Moscow", country = "Russia" },
new { id = "4_3", parentId = "4", value = 8538689, name = "London", country = "United Kingdom" },
new { id = "4_4", parentId = "4", value = 5191690, name = "Saint Petersburg", country = "Russia" },
new { id = "4_5", parentId = "4", value = 4470800, name = "Ankara", country = "Turkey" },
new { id = "4_6", parentId = "4", value = 3517424, name = "Berlin", country = "Germany" },
new { id = "5", name = "North America" },
new { id = "5_1", parentId = "5", value = 8874724, name = "Mexico City", country = "Mexico" },
new { id = "5_2", parentId = "5", value = 8550405, name = "New York City", country = "United States" },
new { id = "5_3", parentId = "5", value = 3884307, name = "Los Angeles", country = "United States" },
new { id = "5_4", parentId = "5", value = 2808503, name = "Toronto", country = "Canada" },
new { id = "6", name = "South America" },
new { id = "6_1", parentId = "6", value = 11895893, name = "São Paulo", country = "Brazil" },
new { id = "6_2", parentId = "6", value = 8693387, name = "Lima", country = "Peru" },
new { id = "6_3", parentId = "6", value = 7776845, name = "Bogotá", country = "Colombia" },
new { id = "6_4", parentId = "6", value = 6429923, name = "Rio de Janeiro", country = "Brazil" }
})
.Title("The Most Populated Cities by Continents")
.IdField("id")
.ParentField("parentId")
.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 FlatDataStructure() {
return View();
}
}
}
.city {
font-weight: 500;
}