1

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

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

还有比这更好的方法吗？

4

2 回答 2

0

我正在使用剃刀。

首先制作一个仅用于像这样渲染图表控件的视图。

图表.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。

您还为此进行了局部视图以获得一些优化。

于 2012-09-05T07:00:40.580 回答
0

为您希望图表出现的视图创建一个强类型模型：

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>
于 2012-09-05T08:40:43.223 回答