ASP.NET MVC 图表：如何在每列上显示值

Posted 2023-03-29

【中文标题】ASP.NET MVC 图表：如何在每列上显示值

【英文标题】：ASP.NET MVC Chart: how to show values on each column

【发布时间】：2014-11-08 17:23:10

【问题描述】：

我正在尝试使用 .NET 框架提供的图表功能，但我需要一个实际上做不到的结果。

我的代码：

string themeChart = @"<Chart>
                      <ChartAreas>
                        <ChartArea Name=""Default"" _Template_=""All"">
                          <AxisY>
                            <LabelStyle Font=""Verdana, 12px"" />
                          </AxisY>
                          <AxisX LineColor=""64, 64, 64, 64"" Interval=""1"">
                            <LabelStyle Font=""Verdana, 12px"" />
                          </AxisX>
                        </ChartArea>
                      </ChartAreas>
                    </Chart>";


 var dataChart = new Chart(width: 1000, height: 300, theme: themeChart).AddSeries(
      chartType: "column",
      xValue: arrayXVal,
      yValues: arrayYVal)
           .AddTitle("ChartTitle")
           .GetBytes("png");

 return File(dataChart, "image/png");

我的图表是这样的。

我需要做一个这样的图表：

这些值可以在列上方，也可以像第二张图片一样位于“in”中。

非常感谢！

编辑：我找到了这个页面：W3School page。您可以看到有一张图片说明了我的需求。但是没有提供代码...

EDIT 2：我也找到了这个页面：Displaying Data in a Chart with ASP.NET Web Pages (Razor)，但没有提供代码。

答案： 由于您的回答，我尝试使用DataVisualization.Charting，并且与我之前的代码几乎没有任何变化，它给了我一个可以接受的结果。

你可以在这里找到我的完整代码： 位图图像 = 新位图 (1000, 300); 图形 g = Graphics.FromImage(image); var chart1 = new System.Web.UI.DataVisualization.Charting.Chart(); chart1.Width = 1000; chart1.Height = 300; chart1.ChartAreas.Add("xAxis").BackColor = System.Drawing.Color.White; chart1.Titles.Add("图表标题"); chart1.Series.Add("xAxis");

        for (int i = 0; i < 24; i++)
        
            chart1.Series["xAxis"].Points.AddXY(i + " h", arrayValues[i]);
        

        chart1.Series["xAxis"].IsValueShownAsLabel = true;
        chart1.Series["xAxis"].LabelForeColor = Color.Black;
        chart1.ChartAreas[0].AxisX.Interval = 1;
        chart1.ChartAreas[0].AxisY.MajorGrid.LineColor = Color.LightGray;
        chart1.ChartAreas[0].AxisX.MajorGrid.LineColor = Color.LightGray;
        chart1.BackColor = Color.White;

        MemoryStream imageStream = new MemoryStream();
        chart1.SaveImage(imageStream, ChartImageFormat.Png);
        chart1.TextAntiAliasingQuality = TextAntiAliasingQuality.High;
        Response.ContentType = "image/png";
        imageStream.WriteTo(Response.OutputStream);
        g.Dispose();
        image.Dispose();
        return null;

非常感谢 Balthy 的回答。

我将赏金给 Balthy，因为这是第一个完整的答案。

我会将 Adithya Kumaranchath 的答案标记为“主要答案”，因为他更详细地描述了要遵循的步骤。

【问题讨论】：

Chart 类，是你自己实现的还是第三方实现的？

@AlexPeta：我使用 Chart Helper，默认情况下它在 .NET 框架中（文档：msdn.microsoft.com/en-us/library/…）

刚刚反编译了dll，看了一下。你也尝试过 AddLegend 方法吗？

我无法反编译 dll，我希望有更简单的方法来做我想做的事。 AddLegend 将图例添加到图表的右侧，并带有与数据相关的颜色代码。

所以我的想法是这样的：因为功能不是开箱即用的，你必须自己包装它。现在你有两个选择，要么在客户端，要么在服务器端。由于“客户端”端不是您可以使用的东西（SVG 或 Canvas），您应该在服务器端执行此操作，并且您需要反编译 DLL 以了解该图像是如何生成的以及如何注入/影响它你自己的代码。

【参考方案1】：

我了解您不想接触服务器端代码的部分，但选项似乎有限。我不确定您是否可以这样做，但如果您可以更改服务器端，那么您肯定可以进行这些更改。

我已经为你做了这个：

添加 System.Web.DataVisualization；到您的 MVC 网站。 添加“使用 System.Web.UI.DataVisualization.Charting;”到您的控制器。

在您的控制器中包含以下代码：

         public ActionResult CreateChart()
            
         Bitmap image = new Bitmap(500, 50);
         Graphics g = Graphics.FromImage(image);
         var chart1 = new System.Web.UI.DataVisualization.Charting.Chart();
         chart1.Width = 1000;
         chart1.Height = 300;
         chart1.ChartAreas.Add("xAxis").BackColor = System.Drawing.Color.FromArgb     (64,System.Drawing.Color.White);
         chart1.Series.Add("xAxis");
         chart1.Series["xAxis"].Points.AddY(8);
         chart1.Series["xAxis"].Points.AddY(8);
         chart1.Series["xAxis"].Points.AddY(8);
         chart1.Series["xAxis"].Points.AddY(6);
         chart1.Series["xAxis"].Points.AddY(5);    
         chart1.Series["xAxis"].IsValueShownAsLabel = true;
         chart1.BackColor = Color.Transparent;
         MemoryStream imageStream = new MemoryStream();
         chart1.SaveImage(imageStream, ChartImageFormat.Png);
         chart1.TextAntiAliasingQuality = TextAntiAliasingQuality.SystemDefault;
         Response.ContentType = "image/png";
         imageStream.WriteTo(Response.OutputStream);
         g.Dispose();
         image.Dispose();
         return null;
    

在您想要查看图表的视图中包含以下代码。

现在运行代码，你就可以看到了。

根据需要自定义参数。希望这会有所帮助。

【讨论】：

对此***.com/questions/32133293/…的任何帮助

【参考方案2】：

我认为您需要直接与点交互才能添加标签值。 希望这个简短的例子会有一些用处。它在代码中而不是在 xml 主题中添加图表区域，但我确信它可以在必要时进行交换。

public ActionResult Chart()

    var chart = new System.Web.UI.DataVisualization.Charting.Chart();
    chart.ChartAreas.Add(new ChartArea());

    // Dummy data
    var data = Enumerable.Range(1, 2).Select(i => new  Name = i.ToString(), Count = i ).ToArray();

    chart.Series.Add(new Series("Data"));
    chart.Series["Data"].ChartType = SeriesChartType.Column;

    for (int x = 0; x < data.Length; x++)
    
        // Add each point and set its Label
        int ptIdx = chart.Series["Data"].Points.AddXY(
             data[x].Name,
             data[x].Count);
        DataPoint pt = chart.Series["Data"].Points[ptIdx];
        pt.Label = "#VALX: #VALY";
        pt.Font = new System.Drawing.Font("Arial", 12f, FontStyle.Bold);
        pt.LabelForeColor = Color.Green;
    

    using (MemoryStream ms = new MemoryStream())
    
        chart.SaveImage(ms, ChartImageFormat.Png);
        return File(ms.ToArray(), "image/png");
    

那么在我看来，我只是有：

<img  src="@Url.Action("Chart")" />

pt.Label 值是一种格式字符串，可以使用"#VALX" 或"#VALY" 仅显示其中一个。

【参考方案3】：

您可以将其添加到代码中的 xml 中，以在每个数据点上方显示一个数字

<Series>
  <Series Name=""Default"" IsValueShownAsLabel=""true""></Series>
</Series>

然后在图表对象中为图表系列添加名称

var dataChart = new Chart(width: 1000, height: 300, theme: themeChart).AddSeries(
  name:"Default",
  chartType: "column",

xml 系列中的名称应与图表对象中的名称匹配