Question

我正在尝试使用.NET框架提供的Chart函数，但我需要一个我实际上无法做到的结果。

我的代码：

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

我的图表就像这张照片。 Now

我需要做一个这样的图表： enter image description here

值可以在列之上，也可以像在第二张图像中一样“。”

非常感谢！

编辑：我找到了这个页面：W3School page。你可以看到有一个图像可以说明我需要什么。但是没有提供代码......

编辑2 ：我还找到了此页面：Displaying Data in a Chart with ASP.NET Web Pages (Razor)但未提供代码。

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

您可以在此处找到我的完整代码：位图图像=新位图（1000,300）; 图形g = Graphics.FromImage（图像）; 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（ “x-轴”）;

        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的答案标记为“主要答案”，因为他详细描述了要遵循的步骤。

Answer 1

我理解您不想触及服务器端代码的部分，但选项似乎有限。我不确定你是否可以这样做，但如果你可以改变服务器端，你肯定可以做这些改变。

我已经为你做了这个：

添加System.Web.DataVisualization;到你的MVC网站。
添加“using 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;
    }

在视图中包含以下要查看图表的代码。
现在运行代码，您将能够看到这一点。

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

Answer 2

我认为您需要直接与点进行交互以添加Label值。希望这个简短的例子有一些用处。它在代码中添加了Chart Area而不是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 alt="alternateText" src="@Url.Action("Chart")" />

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

Answer 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系列中的名称应与图表对象中的名称匹配

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

3 个答案: