在 ASP .NET MVC 5 图表中的每个条形图上显示标签

Question

我想在图表的每个条形上水平显示一个标签

@using GJob.Models.Views
@model BasicChart1
@{
ViewBag.Title = "The Chart";
Layout = "~/Views/Shared/_Layout2.cshtml";
}
@{
var myChart = new Chart(width: 1200, height: 800)
.AddTitle("My chart title")
.AddSeries("Default",
chartType: "bar",
markerStep: 1,
xValue: Model.XData, xField: "Name",
yValues: Model.YDataINT, yFields: "Value")
.Write("png");
}

我试图从这些文章中获得帮助

https://learn.microsoft.com/en-us/aspnet/web-pages/overview/data/7-displaying-data-in-a-chart

https://weblogs.asp.net/imranbaloch/chart-helper-in-asp-net-mvc-3-0-with-transparent-background

https://forums.asp.net/t/1654046.aspx?Chart+Helper+need+all+xvalue+labels+not+just+a+few

以及图表构造函数的定义

namespace System.Web.Helpers
{
//
// Summary:
//     Displays data in the form of a graphical chart.
public class Chart

但不知道该怎么做。

请帮忙。谢谢！

更新 1

我假设我们有围绕图表区域的工作

<asp:Chart ID="Chart1" runat="server" Width="600" Height="400" DataSourceID="SqlDataSource1">
<series>
<asp:Series Name="Series1" XValueMember="Country" YValueMembers="Column1" 
ChartType="Column">
</asp:Series>
</series>
<chartareas>
<asp:ChartArea BackColor="NavajoWhite" BackGradientStyle="LeftRight" 
Name="ChartArea1" ShadowOffset="5">
<AxisY Title="Number of Customers">
</AxisY>
<AxisX Title="Countries" IsLabelAutoFit="True">
<LabelStyle Angle="-90" Interval="1" />
</AxisX>
<Area3DStyle Enable3D="True" />
</asp:ChartArea>
</chartareas>
</asp:Chart>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" 
SelectCommand="SELECT COUNT(*),Country FROM Customers GROUP BY Country">
</asp:SqlDataSource>

但是目前尚不清楚在MVC中配置Chart类 ASP.NET 语法。

Answer 1

所以我在这里找到了正确的方法 https://www.danylkoweb.com/Blog/simplified-aspnet-mvc-charts-A5

控制器

public ActionResult PercentageDistributionFault()
{
// Get data to use in Chart
var model = new BasicChart1();
var data = db.RequestMalfunctionTypes.GroupBy(x => x.MalfunctionTypeID).Select(x => new NameCountClass
{
Name = x.FirstOrDefault().MalfunctionType.Name,
Count = x.Count()
}).OrderBy(x => x.Count).ToList();
model.Data.AddRange(data);
foreach (var item in data)
{
model.XData.Add(item.Name);
model.YDataINT.Add(item.Count);
}
// Create chart object and pass it to View
var chart = new Chart(1200, 800, GetMyCustomTheme())
.AddTitle("Mega chart")
.AddSeries("Default",
chartType: "bar",
xValue: model.XData, xField: "Name",
yValues: model.YDataINT, yFields: "Value");
return View(chart);
}
private string GetMyCustomTheme()
{
return @"
<Chart BackColor=""White"" BackGradientStyle=""TopBottom"" BorderColor=""181, 64, 1"" 
BorderWidth=""2"" BorderlineDashStyle=""Solid"" Palette=""SemiTransparent"" 
AntiAliasing=""All"">
<ChartAreas>
<ChartArea Name=""Default"" _Template_=""All"" BackGradientStyle=""None""
BackColor=""White"" BackSecondaryColor=""White"" 
BorderColor=""64, 64, 64, 64"" BorderDashStyle=""Solid"" 
ShadowColor=""Transparent"">                      
<AxisX Title=""Countries"" IsLabelAutoFit=""True"">
<LabelStyle Angle = ""-90"" Interval = ""1"" />   
</AxisX>
<Area3DStyle Enable3D=""False"" Inclination=""60"" Rotation=""45""/>
</ChartArea>
</ChartAreas>
</Chart>";
}

视图

@using System.Web.Helpers
@model Chart
@{
ViewBag.Title = "Mega Chart";
Layout = "~/Views/Shared/_Layout2.cshtml";
}
@{
Model.Write(format: "png");
}

所以答案是使用这一行<LabelStyle Angle = ""-90"" Interval = ""1"" />