I'm using MVC3 and Web Helpers.
The resulting chart has white frame around it:
Here is my Chart Controller ( Controllers/ChartController.cs)
The resulting chart has white frame around it:
My goal is to make this frame transparent.
Here is my Chart Controller ( Controllers/ChartController.cs)
public class
ChartController : Controller
{
public ActionResult Index()
{
return
View();
}
public ActionResult ShowTotal() //
produces "png" image
{
myEntities
db = new myEntities();
var
list = (from t in
db.Tags
from v in t.Visits
where v.Action.ToLower() == "fetch"
select new {
act = t.Name,
count =
t.Visits.Count }).Distinct().ToList();
new
System.Web.Helpers.Chart(300, 200,
System.Web.Helpers.ChartTheme.Yellow)
.AddTitle("Totals")
.DataBindTable(list, "act") // take
"list" and use column "act" as xSeries
.Write("png");
return
null;
}
}
Correspondent view in View/Chart/Index.cshtml:
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<img src="@Url.Action("ShowTotal")"
/>
The result picture has ugly white frame around it. I setup green background for the body to highlight this fact:
All chart styling happens when I setup the chart theme in "System.Web.Helpers.ChartTheme.Yellow"
Chart theme is just XML string with description of the style.
If you press F12 on the above "Yellow" you can see the definition of the string:
public const
string Yellow =
@"<Chart BackColor=""#FADA5E"" BackGradientStyle=""TopBottom"" BorderColor=""#B8860B"" BorderWidth=""2"" BorderlineDashStyle=""Solid"" Palette=""EarthTones"">
<ChartAreas>
<ChartArea Name=""Default"" _Template_=""All"" BackColor=""Transparent"" BackSecondaryColor=""White"" BorderColor=""64, 64, 64, 64"" BorderDashStyle=""Solid"" ShadowColor=""Transparent"">
<AxisY>
<LabelStyle Font=""Trebuchet MS, 8.25pt, style=Bold"" />
</AxisY>
<AxisX LineColor=""64, 64, 64, 64"">
<LabelStyle Font=""Trebuchet MS, 8.25pt, style=Bold"" />
</AxisX>
</ChartArea>
</ChartAreas>
<Legends>
<Legend _Template_=""All"" BackColor=""Transparent"" Docking=""Bottom"" Font=""Trebuchet MS, 8.25pt, style=Bold"" LegendStyle=""Row"">
</Legend>
</Legends>
<BorderSkin SkinStyle=""Emboss"" />
</Chart>";
The problem was in "fancy" themes "Blue", "Green" and "Yellow":
<BorderSkin SkinStyle=""Emboss"" />
BorderSkin definition should be corrected this way:
<BorderSkin PageColor =""Transparent"" SkinStyle=""Emboss"" />
There are two ways to fix the problem:
- Copy the whole string in you program, change BorderSkin definition, and pass this string as the theme to the Chart constructor:
new Chart(300, 200, myTheme) . . . - As a temporary solution, change the theme "on-a-fly" (temporary until Microsoft fix the theme):String myTheme = ChartTheme.Yellow.Replace(@"BorderSkin SkinStyle", @"BorderSkin PageColor =""Transparent"" SkinStyle");new Chart(300, 200, myTheme) . . .
No comments:
Post a Comment