Your search did not match any results.

Pie Markers

Documentation

This demo shows how to use markers of the «pie» type in the VectorMap. Values for pie markers are provided by the data field whose name is assigned to the dataField property.

Backend API
@(Html.DevExtreme().VectorMap() .ID("vector-map") .Layers(layers => { layers.Add() .DataSource(new JS("DevExpress.viz.map.sources.world")) .HoverEnabled(false); layers.Add() .Name("pies") .DataSource(d => d.StaticJson().Url(Url.Action("GetPieMarkers"))) .DataSourceOptions(dso => dso.Map("vectorMap_piesLayer_dataSource_map")) .ElementType(VectorMapMarkerType.Pie) .DataField("values") .MinSize(20) .MaxSize(40) .SizeGroups(new double[] { 0, 8000, 10000, 50000 }); }) .Tooltip(t => t .Enabled(true) .CustomizeTooltip("vectorMap_customizeTooltip") ) .Legends(l => l.Add() .Source(s => s .Layer("pies") .Grouping("color") ) .CustomizeText("vectorMap_piesLegend_customizeText") ) .Bounds(new double[] { -180, 85, 180, -60 }) ) <script src="~/Scripts/data/names.js"></script> <script> function vectorMap_piesLayer_dataSource_map(item) { item.features=$.map(item.features, function(data) { var list = ["<span class='country'>" + data.country + "</span>", "&nbsp;"]; $.each(data.values, function(i, value) { if (value > 0) { list.push(names[i] + ": " + value + "%"); } }); return { type: "Feature", geometry: { type: "Point", coordinates: data.coordinates }, properties: { tooltip: list.join("\n"), values: data.values } }; } ); return item; } function vectorMap_customizeTooltip(arg) { if(arg.layer.type === "marker") { return { text: arg.attribute("tooltip") }; } } function vectorMap_piesLegend_customizeText(arg) { return names[arg.index]; } </script>
using DevExtreme.MVC.Demos.Models.SampleData; using Newtonsoft.Json; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class VectorMapController : Controller { public ActionResult PieMarkers() { return View(); } [HttpGet] public ContentResult GetPieMarkers() { return Content(JsonConvert.SerializeObject(SampleData.PieMarkersData), "application/json"); } } }
var names = ["Christian", "Muslim", "Unaffiliated", "Buddhist", "Jewish"];
namespace DevExtreme.MVC.Demos.Models.SampleData { public partial class SampleData { public static readonly object PieMarkersData = new[] { new { type = "FeatureCollection", features = new[] { new { coordinates = new[] { 34.6, -5.1 }, values = new[] { 61.4, 35.2, 1.4, 0, 0 }, country = "Tanzania" }, new { coordinates = new[] { 18.8, 15 }, values = new[] { 40.6, 55.3, 2.5, 0, 0 }, country = "Chad" }, new { coordinates = new[] { 7.36, 9.97 }, values = new[] { 49.3, 48.8, 0.4, 0, 0 }, country = "Nigeria" }, new { coordinates = new[] { 135.61, -24.57 }, values = new[] { 67.3, 2.4, 24.2, 2.7, 0.5 }, country = "Australia" }, new { coordinates = new[] { 103.3, 34.85 }, values = new[] { 5.1, 1.8, 52.2, 18.2, 0 }, country = "China" }, new { coordinates = new[] { 139.5, 37 }, values = new[] { 1.6, 0.2, 57, 36.2, 0 }, country = "Japan" }, new { coordinates = new[] { 100.8, 15.9 }, values = new[] { 0.9, 5.5, 0.3, 93.2, 0 }, country = "Thailand" }, new { coordinates = new[] { 10.4, 51.4 }, values = new[] { 68.7, 5.8, 24.7, 0.3, 0.3 }, country = "Germany" }, new { coordinates = new[] { 100.8, 65.3 }, values = new[] { 73.3, 10, 16.2, 0.1, 0.2 }, country = "Russia" }, new { coordinates = new[] { -3.48, 40.36 }, values = new[] { 78.6, 2.1, 19, 0, 0.1 }, country = "Spain" }, new { coordinates = new[] { -78.01, 21.72 }, values = new[] { 59.2, 0, 23, 0, 0 }, country = "Cuba" }, new { coordinates = new[] { -63.7, -31.92 }, values = new[] { 85.2, 1, 12.2, 0.05, 0.5 }, country = "Argentina" }, new { coordinates = new[] { -110.53, 60.78 }, values = new[] { 69, 2.1, 23.7, 0.5, 0.3 }, country = "Canada" }, new { coordinates = new[] { -100.1, 40.14 }, values = new[] { 78.3, 0.9, 16.4, 1.2, 1.8 }, country = "United States" }, new { coordinates = new[] { 34.88, 31.16 }, values = new[] { 2, 18.6, 3.1, 0.3, 75.6 }, country = "Israel" } } } }; } }
#vector-map { height: 440px; } .country { font-size: 15px; font-weight: 500; }