在ASP .NET MVC 5图表中的每个条形图上显示标签 [英] Display label on each bar chart in ASP .NET MVC 5 Chart

问题描述

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

@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");
}

我试图从这些文章中寻求帮助

I have tried to get help from those articles

https://docs.microsoft.com/zh-cn/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+很少

以及图表的构造函数的定义

and as well as the definition of the constructor of the Chart

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

但不知道如何操作。

请帮助。谢谢！

更新1

我认为我们已经解决了 ChartArea

I assume that we have work around ChartArea

<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>

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

But it is unclear the syntax to config Chart class in ASP.NET MVC.

推荐答案

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

So I found correct approach here 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间隔= 1 />

这篇关于在ASP .NET MVC 5图表中的每个条形图上显示标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！