Question

尝试了几种在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="" />

通过使用上面的方法我能够呈现图表，因为动作方法直接返回图像，我无法在图表的同一页面上呈现任何控件，如文本框，按钮

还有其他更好的方法吗？

Answer 1

我使用Razor。

首先只为这样渲染图表控件创建一个视图。

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视图中指定的main内呈现。

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

Answer 2

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

public class SomeViewWithAChartModel {
    // Other model data goes here

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

在您想要显示图表时，让控制器操作填充并将其返回到您的视图：

public ActionResult SomeViewWithAChart()
  {
      var chart = new Chart()
      // Set chart specifics...

      var model = new SomeViewWithAChartModel { Chart = chart };

      return View(model);
  }

制作部分视图以呈现图表以及要在其旁边显示的任何HTML元素。

Chart.cshtml局部视图：

@model Chart

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

在您希望图表显示的视图中呈现部分图表视图，以及“Tada！”按钮，例如我们的SomeViewWithAChart视图：

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>

在mvc3中呈现图表的正确方法？

2 个答案: