在部分视图中呈现HTML5图表仅显示空白数据

我正在尝试显示MVC图表,如为ASP.NET MVC 4创建HTML5图表助手扩展中所示。 我有标准项目工作,但我无法在单个视图调用的部分视图中同时显示多个图形。

我将跳过查看ChartExtensions.csHelperModel.cs类,因为它们在上面的文章中有所涉及。

我创建了一个带有几个视图的控制器:

 public class WelcomeController : Controller { public ActionResult Index() { ViewBag.Message = "Creating your own HtmlHelper library"; var data = WelcomeHelper.GetData1(); return View(data); } public ActionResult DisplayAllGraphs() { ViewBag.Message = "Show all charts"; var dataSet = new DataGroup(); dataSet.Datas.Add(WelcomeHelper.GetData1()); dataSet.Datas.Add(WelcomeHelper.GetData2()); return View(dataSet); } public ActionResult PartialDisplayGraphs(TwoDimensionalData data) { ViewBag.Message = "Chart by request"; return View(data); } } 

我用快速帮助类填充它

 public class WelcomeHelper { public static TwoDimensionalData GetData1() { var data = new TwoDimensionalData(); data.Data.Add(new int[] { 2000, 3045 }); data.Data.Add(new int[] { 2001, 7045 }); data.Data.Add(new int[] { 2002, 9045 }); data.Data.Add(new int[] { 2003, 13045 }); data.Data.Add(new int[] { 2004, 15045 }); data.Id = 1; return data; } public static TwoDimensionalData GetData2() { var data = new TwoDimensionalData(); data.Data.Add(new int[] { 2005, 18045 }); data.Data.Add(new int[] { 2006, 20845 }); data.Data.Add(new int[] { 2007, 23045 }); data.Data.Add(new int[] { 2008, 20345 }); data.Data.Add(new int[] { 2009, 23405 }); data.Id = 2; return data; } } 

我尝试使用DisplayAllGraphs.cshtml显示所有图形

 @model PostingGraphs.Models.DataGroup @{ ViewBag.Title = "DisplayAllGraphs"; } 

@ViewBag.Message

@Html.Partial("PartialDisplayGraphs", data)

和部分视图调用的PartialDisplayGraphs.cshtml

 @model PostingGraphs.Models.TwoDimensionalData @using PostingGraphs.Extensions @using (Html.BeginForm()) {  @Html.Chart("sampleChart" + Model.Id, Model.Data, "Year", "Hits in Thousands") } @section Scripts {  $(function () { barChart(); });  } 

我得到的是一系列带有标签Model ID

:#其中#与作为模型发送的数据的ID正确一致。 我没有得到的是图表,尽管该部分按预期间隔。

我错过了什么吗? 这是创建javascript的图表扩展代码中的标识符问题吗?

编辑:为canvasID添加唯一标识符以包括数据点索引。 在表单问题中更改了表单。

问题是Dot Net Curry示例代码没有设置为在同一页面上很好地管理多个图表,并且需要一些实质性的返工。 这并不困难,只是不是一个非常好的解决方案。 我确实找到了一个相当不错的免费图表设置在http://www.chartjs.org/ ,这将很好。 感谢那些花时间为我研究并给我反馈的人。