在局部视图中呈现HTML5图表只显示空白数据

Question

我试图显示MVC图表，如为ASP.NETMVC4创建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";
}

<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>
}

我得到的是一系列

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

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




Answer 1

问题是Dot Net Curry示例代码不能很好地管理同一页上的多个图表，并且需要进行大量的返工。这并不难，只是本身不是一个很好的解决方案。我确实在http://www.chartjs.org/找到了一个相当不错的免费图表集。感谢那些花时间为我调查并给我反馈的人。