Asp.net mvc 在mvc3中显示图表的正确方法？_Asp.net Mvc_Charts_C# 3.0

Asp.net mvc 在mvc3中显示图表的正确方法？

asp.net-mvc charts c#-3.0

Asp.net mvc 在mvc3中显示图表的正确方法？,asp.net-mvc,charts,c#-3.0,Asp.net Mvc,Charts,C# 3.0,尝试了几种在asp.net mvc中显示图表的方法，但每种方法都有自己的缺点，仍然不知道显示图表的最佳方法第一种方法是下面的方法 public ActionResult Chart1() { Chart chart = new Chart(); chart.ChartAreas.Add(new ChartArea()); chart.Series.Add(new Series("Data")); chart.Legends.Add

尝试了几种在asp.net mvc中显示图表的方法，但每种方法都有自己的缺点，仍然不知道显示图表的最佳方法

第一种方法是下面的方法

   public ActionResult Chart1()
  {
      Chart chart = new Chart();

      chart.ChartAreas.Add(new ChartArea());

      chart.Series.Add(new Series("Data"));

      chart.Legends.Add(new Legend("Stores"));
      chart.Series["Data"].ChartType =           SeriesChartType.Pie;
      chart.Series["Data"].Points.AddXY(1.0, 5.0);
      chart.Series["Data"].Points.AddXY(2.0, 9.0);

      var returnStream = new MemoryStream();
      chart.ImageType = ChartImageType.Png;
      chart.SaveImage(returnStream);
      returnStream.Position = 0;
      return new FileStreamResult(returnStream,           "image/png");
  }

  view

  <img src="/MyHome/Chart1" alt="" />

通过使用上述方法，我可以显示图表，因为操作方法直接返回图像，我无法在图表的同一页上显示任何控件，如textbox、button

还有比这更好的方法吗？

我在用剃须刀

首先，创建一个视图，仅用于渲染图表控件，如下所示

Charts.cshtml：

 @{
        Layout = null;
        var mychart = new Chart(width: 300, height: 300)
          .AddTitle("Employee Chart")
          .AddSeries(
              chartType: "Bubble",
              name: "Employee",
              xValue: new[] { "Peter", "Andrew", "Julie", "Dave" },
              yValues: new[] { "2", "7", "5", "3" });              

    }
    <!DOCTYPE html>
    <html>
    <head>
        <title>Charts</title>
    </head>
    <body>
        <div>
            @mychart.Write();
        </div>
    </body>
    </html>

然后在要放置图表控件的位置创建视图

主要观点：

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <title>MainView</title>
</head>
<body>
    <div>
        <img src="Charts"/> //Here src value must be the URL of your chart view.
    </div>
    <div>
    <input type="button" name="Button"/>
    </div>
</body>
</html>

现在，从图表视图返回的图像将在主视图中指定的img中呈现

您还可以对此进行局部查看，以获得一些优化。

为要显示图表的视图创建强类型模型：

public class SomeViewWithAChartModel {
    // Other model data goes here

    public Chart Chart { get; set; } // <---- Add this
}

制作一个局部视图，以呈现图表以及要在旁边显示的任何HTML元素

Chart.cshtml部分视图：

@model Chart

<div>
    @Model.Write();
</div>
<div>
    <input type="button" value="Tada! />
</div>

在希望图表与Tada一起显示的视图中呈现部分图表视图！按钮，例如我们的SomeViewWithArt视图：

SomeViewWithAChart.cshtml：

<!DOCTYPE html>

<html>
<head>
    <title>Some View with a chart and a button</title>
</head>
<body>
     @Html.Partial("Chart", Model.Chart)
</body>
</html>

他不应该将图像源指向图表视图的URL，因为它也呈现HTML。相反，他应该通过@Html.PartialCharts来呈现它。更好的是，避免让视图包含图表的呈现逻辑，而是创建一个由控制器填充的强类型模型，并且只让chart.cshtml视图呈现视图。通过这种方式，他还可以为图表模型制作一个DisplayTemplate，并使用@Html.DisplayFormodel=>model.Chart呈现它。我的代码中的问题是，当操作方法returnnewfilestreamresultreturnstream，image/png时，视图没有被调用；正在返回图像，因此视图没有被调用。@SMK：我有一个关于图表中显示的标签的查询。如果我们使用的是柱状图，并且有很多列，那么图表只显示每隔一列的标签。如何显示每个列标签？我的控制器操作是返回图像，返回新文件流ResultReturnStream，image/png；，如何在操作方法中添加返回视图？通过更改控制器操作以返回包含图表的模型类。只需替换返回的新文件streamresult。。。；具有返回视图模型；

<!DOCTYPE html>

<html>
<head>
    <title>Some View with a chart and a button</title>
</head>
<body>
     @Html.Partial("Chart", Model.Chart)
</body>
</html>