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

チャートを表示するビューの厳密に型指定されたモデルを作成します。

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 に答える
0

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。

また、これの部分ビューを作成して、最適化を取得します。

于 2012-09-05T07:00:40.580 に答える