@model IEnumerable<DevExtreme.NETCore.Demos.Models.MedalAnnotationInfo>
@(Html.DevExtreme().PieChart()
.ID("pie")
.Palette(VizPalette.Vintage)
.Title("Ice Hockey World Championship Gold Medal Winners")
.CommonAnnotationSettings(ca => ca
.Type(AnnotationType.Image)
.PaddingLeftRight(0)
.PaddingTopBottom(0)
.TooltipTemplate(@<text>
<div class='medal-tooltip'>
<div class='country-name'>
<%- data.Country %><% if(data.OldCountryName) { %>
<br /><%- data.OldCountryName %>
<% } %>
</div>
<div class='gold'>
<span class='caption'>Gold</span>: <%- data.Gold %>
</div>
<div class='silver'>
<span class='caption'>Silver</span>: <%- data.Silver %>
</div>
<div class='bronze'>
<span class='caption'>Bronze</span>: <%- data.Bronze %>
</div>
</div>
</text>)
.Image(i => i
.Height(60)
.Width(90)
)
)
.Annotations(a => {
foreach(var annotation in Model) {
a.Add()
.Argument(annotation.Country)
.Image(annotation.Image)
.Data(annotation.Data)
.Location(annotation.Location)
.OffsetX(new JS(annotation.OffsetX.HasValue
? annotation.OffsetX.Value.ToString()
: JS.Undefined.ToString()))
.OffsetY(new JS(annotation.OffsetY.HasValue
? annotation.OffsetY.Value.ToString()
: JS.Undefined.ToString()))
.Color(annotation.Color)
.Border(b => b.Color(annotation.BorderColor))
.Shadow(s => s.Opacity(
new JS(annotation.ShadowOpacity.HasValue
? annotation.ShadowOpacity.Value.ToString()
: JS.Undefined.ToString())));
}
})
.Series(s =>
s.Add()
.ArgumentField("Country")
.ValueField("Gold")
.Label(l => l
.Visible(true)
.Position(PieChartLabelPosition.Inside)
.RadialOffset(83)
.BackgroundColor("transparent")
.Font(f => f
.Size(16)
.Weight(600)
)
)
)
.Tooltip(t => t
.PaddingLeftRight(12)
.PaddingTopBottom(10)
)
.Legend(l => l.Visible(false))
.DataSource(Model.Select(d => d.Data))
)
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 PieWithAnnotations() {
return View(SampleData.GetAnnotationsInfo());
}
}
}
using System.Collections.Generic;
namespace DevExtreme.NETCore.Demos.Models.SampleData {
public partial class SampleData {
public static readonly IEnumerable<MedalistData> IceHockeyGoldMedalistsData = new[] {
new MedalistData {
Country = "Russia",
OldCountryName = "Soviet Union",
Gold = 27,
Silver = 10,
Bronze = 10
},
new MedalistData {
Country = "Canada",
Gold = 26,
Silver = 15,
Bronze = 9
},
new MedalistData {
Country = "Czech Republic",
OldCountryName = "Czechoslovakia",
Gold = 12,
Silver = 13,
Bronze = 21
},
new MedalistData {
Country = "Sweden",
Gold = 11,
Silver = 19,
Bronze = 17
},
new MedalistData {
Country = "Finland",
Gold = 3,
Silver = 8,
Bronze = 3
},
new MedalistData {
Country = "United States",
Gold = 2,
Silver = 9,
Bronze = 8
},
new MedalistData {
Country = "Great Britain",
Gold = 1,
Silver = 2,
Bronze = 2
},
new MedalistData {
Country = "Slovakia",
Gold = 1,
Silver = 2,
Bronze = 1
}
};
}
}
using System;
using DevExtreme.AspNet.Mvc;
namespace DevExtreme.NETCore.Demos.Models {
public class MedalAnnotationInfo {
public string Country { get; set; }
public string Image { get; set; }
public object Data { get; set; }
public PieChartAnnotationLocation Location { get; set; }
public double? OffsetX { get; set; }
public double? OffsetY { get; set; }
public string Color { get; set; }
public string BorderColor { get; set; }
public double? ShadowOpacity { get; set; }
public MedalAnnotationInfo ShallowCopy() {
return (MedalAnnotationInfo)this.MemberwiseClone();
}
}
}
using System;
using System.Collections.Generic;
using System.Linq;
using DevExtreme.AspNet.Mvc;
namespace DevExtreme.NETCore.Demos.Models.SampleData {
public partial class SampleData {
public static readonly MedalAnnotationInfo[] AnnotationItems = new[] {
new MedalAnnotationInfo {
Country = "Russia",
OffsetX = 15,
OffsetY = 5
},
new MedalAnnotationInfo {
Country = "Canada",
OffsetY = 10
},
new MedalAnnotationInfo {
Country = "Czech Republic",
OffsetX = -5,
OffsetY = -35
},
new MedalAnnotationInfo {
Country = "Sweden",
OffsetX = 20,
OffsetY = -25
},
new MedalAnnotationInfo {
Country = "Finland",
Location = PieChartAnnotationLocation.Edge,
OffsetX = 45,
OffsetY = -85
},
new MedalAnnotationInfo {
Country = "United States",
Location = PieChartAnnotationLocation.Edge,
OffsetX = 85,
OffsetY = -45
},
new MedalAnnotationInfo {
Country = "Great Britain",
Location = PieChartAnnotationLocation.Edge,
OffsetX = 81,
OffsetY = 15
},
new MedalAnnotationInfo {
Country = "Slovakia",
Location = PieChartAnnotationLocation.Edge,
OffsetX = 45,
OffsetY = 80
}
};
public static IEnumerable<MedalAnnotationInfo> GetAnnotationsInfo() {
int annotationsCount = AnnotationItems.Count();
MedalAnnotationInfo[] annotations = new MedalAnnotationInfo[annotationsCount];
for(int i = 0; i < annotationsCount; i++) {
MedalAnnotationInfo newAnnotation = AnnotationItems[i].ShallowCopy();
string country = newAnnotation.Country;
bool isEdgePosition = newAnnotation.Location == PieChartAnnotationLocation.Edge;
MedalistData championData = IceHockeyGoldMedalistsData.First(m => m.Country == country);
newAnnotation.Image = string.Format("../../images/flags/3x2/{0}.svg", country.Replace(" ", String.Empty));
newAnnotation.Data = new {
championData.Country,
championData.OldCountryName,
championData.Gold,
championData.Silver,
championData.Bronze
};
newAnnotation.Color = isEdgePosition ? "#aaaaaa" : "transparent";
newAnnotation.BorderColor = isEdgePosition ? "#aaaaaa" : "transparent";
if(isEdgePosition) {
newAnnotation.ShadowOpacity = 0.3;
}
annotations[i] = newAnnotation;
}
return annotations;
}
}
}
using System;
namespace DevExtreme.NETCore.Demos.Models {
public class MedalistData {
public string Country { get; set; }
public string OldCountryName { get; set; }
public int Gold { get; set; }
public int Silver { get; set; }
public int Bronze { get; set; }
}
}
#pie {
height: 440px;
}
.medal-tooltip {
font-size: 12px;
}
.medal-tooltip .country-name {
font-size: 14px;
font-weight: 700;
margin: 5px 0px 10px 0px;
}
.medal-tooltip .caption {
font-weight: 600;
}