微软图表、MVC 3和Razor

35

这个主题相关,我想知道是否有人已经使用Microsoft Charting库成功地在Asp MVC 3和Razor中运行。

我知道有一个新的图表帮助程序可用,但由于其功能非常有限,因此这并不是一个真正的选择。

创建一个返回图像的操作方法也很容易,但由于所有交互都会崩溃(即使是条形图中简单的工具提示),此方法存在一些限制。

这个示例可能是我找到的最有帮助的文章,但即使在仅在操作方法中呈现图像时它确实有效,我仍然无法让一个简单的图表起作用。此外,我已经在.net 4下成功地运行了示例,但显然那些不是MVC示例。

所以 - 是否有人已经完全在Asp MVC 3和Razor中使用Microsoft charting,并可以发布完整解决方案的链接?

3个回答

15

看起来非常有前途,正是我正在寻找的!我现在会将其标记为答案,如果以后遇到任何问题,我会再回来的。谢谢! - Victor
太棒了!稍微调整一下,也让它能在MVC3中工作了。谢谢! - Farhan Ahmed

12

我花了几天时间寻找在MVC中创建交互式图表的解决方案,但是我看到的所有示例都比必要的要复杂得多。

Sarath的答案几乎完美,但它会保存两次图像,这样不太有效率。使用Html.RenderAction()函数,我们可以一次性完成所有操作,并使其尽可能高效。

这是我想出来的解决方案:

http://blog.smirne.com/2012/09/creating-interactive-charts-with-aspnet.html

我没有看到可以一次性完成所有操作的解决方案。最好的部分是它不需要对web.config文件进行任何修改。它也没有尝试在MVC中使用ASP.net控件。这是纯MVC技术。

更新

以下是所请求的代码:

CONTROLLER:

public ActionResult Chart()
{
    var chart = buildChart();
    StringBuilder result = new StringBuilder();
    result.Append(getChartImage(chart));
    result.Append(chart.GetHtmlImageMap("ImageMap"));
    return Content(result.ToString());
}

实用函数:

private Chart buildChart()
{
    // Build Chart
    var chart = new Chart();

    // Create chart here
    chart.Titles.Add(CreateTitle());
    chart.Legends.Add(CreateLegend());
    chart.ChartAreas.Add(CreateChartArea());
    chart.Series.Add(CreateSeries());

    return chart;
}

private string getChartImage(Chart chart)
{
    using (var stream = new MemoryStream())
    {
       string img = "<img src='data:image/png;base64,{0}' alt='' usemap='#ImageMap'>";
       chart.SaveImage(stream, ChartImageFormat.Png);
       string encoded = Convert.ToBase64String(stream.ToArray());
       return String.Format(img, encoded);
    }
}

视图:

@{ Html.RenderAction("Chart"); }

1
你能把链接中的示例代码贴到你的回答里吗? - user577537
这就是它。希望这有所帮助! - smirne

2
以下是使用ASP.NET MVC 2和Microsoft Charting Controls在CodeProject上提供的完整解决方案: 目前这可能是最好的选择了(至少我没有找到更符合您要求的内容),因为ASP.NET MVC 3仍然只是RTM,Razor视图引擎也是如此。无论如何,将其从ASP.NET MVC 2迁移到3并不是一件大事。将视图引擎切换到Razor需要更多的努力,但总体概念保持不变。
我建议“去试试”,当您遇到具体问题或有疑问时,请在此处提出。 更新 Robert Muehsig的博客文章也涵盖了此主题,并提供可下载的解决方案。根据您的评论,它看起来更像是您实际想要完成的内容:

谢谢,不幸的是,那个解决方案是“简单方式”的例子,这意味着他们使用了一个简单的 <img src="path/to/action/method" />,这意味着没有交互性。更多细节请参见:http://www.4guysfromrolla.com/articles/081909-1.aspx - 他们称之为“二进制流”,我基本上想要另外两个中的一个,例如工具提示显示每个数据点的值。 - Victor
@Victor:我理解你的观点并更新了我的答案。希望有所帮助。 - Martin Buberl
谢谢,这正是我正在寻找的。当编译为 .net 3.5 和 3.5 图表控件时,我可以在 VS 2010 中使其工作,但是我仍然无法将其转换为使用更新的版本(无论是 Razor 还是其他)。我可以将其转换为使其编译,但运行时仍会出现许多空引用异常。感谢您的更新,如果没有人提供更为实时的解决方案,我将把它标记为答案。 - Victor

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接