如何在mvc中使用图表控件

时间:2013-04-26 11:40:30

标签: asp.net-mvc

我想在我的MVC仪表板表单中使用Chart。

我使用了以下代码。

@{
        var key = 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>Test</title>
    </head>
    <body>
        <div> 
            <div>
                @key.Write()
            </div>
        </div>
    </body>
    </html>

但是@key.Write()在整个页面中写入图表但我希望它以部分形式而不是整个形式与仪表板页面中的其他内容。 任何人都可以帮助我。

1 个答案:

答案 0 :(得分:5)

将图表代码移动到控制器操作,如下所示:

    public ActionResult GetChartImage()
    {
        var key = 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" });

        return File(key.ToWebImage().GetBytes(), "image/jpeg");
    }

(包括使用System.Web.Helpers命名空间)并修改您的视图:

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
</head>
<body>
    <div> 
        <div>
            <img src="@Url.Action("GetChartImage")" />
        </div>
    </div>
</body>
</html>