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

【问题标题】：Rendering HTML5 Charts in partial views show only blank data在部分视图中呈现 HTML5 图表仅显示空白数据
【发布时间】：2013-09-22 12:24:37
【问题描述】：

我正在尝试显示 MVC 图表，如 Creating a HTML5 Chart Helper Extension for ASP.NET MVC 4 所示。我的标准项目正在运行，但我无法在单个视图调用的局部视图中同时显示多个图表。

我将跳过查看 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";
}

<h2>@ViewBag.Message</h2>
<section>
    @Html.Partial("PartialDisplayGraphs", data)
</section>

而调用局部视图的PartialDisplayGraphs.cshtml 是

@model PostingGraphs.Models.TwoDimensionalData
@using PostingGraphs.Extensions
@using (Html.BeginForm())
{   
    <label>Model ID: @Model.Id</label>
    @Html.Chart("sampleChart" + Model.Id, Model.Data, "Year", "Hits in Thousands") 
}

@section Scripts
{
<script type="text/javascript">
    $(function () {
        barChart();
    });   
</script>
}

我得到的是一系列<section>s，标签为Model ID：#，其中# 与作为模型发送的数据的ID 正确一致。我没有得到一个图表，尽管该部分按预期间隔。

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

编辑： 添加了画布 ID 的唯一标识符以包含数据点的索引。在表单问题中更改了表单。

【问题讨论】：

@Html.Partial("PartialDisplayGraphs", data) 中的数据变量是什么？此外，您正在表单内创建不是有效 html 的表单。
@emrenevayeshirazi 数据变量是一个二维数据类型变量，我从帮助程序类中得到填充。该视图显示与图表关联的 ID 的标签。关于表格中的表格的好点......我自己应该看到的。我明天早上会更新。
@emrenevayeshirazi 我已经更新了表单内的问题，但仍然不知道为什么这不起作用。
你在哪里渲染你的部分“脚本”？
当您使用javascript调试器时，您的代码是否通过函数“barChart()”？也许您应该检查呈现的 html 客户端。我认为您的 javascript 代码有问题

标签： c# html asp.net-mvc-4 razor

【解决方案1】：

问题在于，Dot Net Curry 示例代码没有设置为很好地管理同一页面上的多个图表，并且确实需要进行大量的返工。这并不难，只是本身不是一个很好的解决方案。我确实在http://www.chartjs.org/ 找到了一个相当不错的免费图表集，它会做得很好。感谢你们花时间帮我研究这个问题并给我反馈。

【讨论】：