在部分视图中呈现HTML5图表仅显示空白数据
我正在尝试显示MVC图表,如为ASP.NET MVC 4创建HTML5图表助手扩展中所示。 我有标准项目工作,但我无法在单个视图调用的部分视图中同时显示多个图形。
我将跳过查看ChartExtensions.cs
和HelperModel.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的
我错过了什么吗? 这是创建javascript的图表扩展代码中的标识符问题吗?
编辑:为canvasID添加唯一标识符以包括数据点索引。 在表单问题中更改了表单。
问题是Dot Net Curry示例代码没有设置为在同一页面上很好地管理多个图表,并且需要一些实质性的返工。 这并不困难,只是不是一个非常好的解决方案。 我确实找到了一个相当不错的免费图表设置在https://www.chartjs.org/ ,这将很好。 感谢那些花时间为我研究并给我反馈的人。
上述就是C#学习教程:在部分视图中呈现HTML5图表仅显示空白数据分享的全部内容,如果对大家有所用处且需要了解更多关于C#学习教程,希望大家多多关注—计算机技术网(www.ctvol.com)!
本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址:https://www.ctvol.com/cdevelopment/1000282.html