在局部视图渲染HTML5图表只显示空白数据 [英] Rendering HTML5 Charts in partial views show only blank data

问题描述

我想显示MVC图所示创建HTML5图表助手扩展ASP .NET MVC 4 。我有标准项目工作，但我不能让多个图形到一个单一视图称为局部视图立即显示出来。

I am trying to display MVC charts as shown in Creating a HTML5 Chart Helper Extension for ASP.NET MVC 4. I have the standard project working but I can't get multiple graphs to show up at once in partial views called by a single view.

我会跳过审查 ChartExtensions.cs 键，因为它们都覆盖上述文章中 HelperModel.cs 班

I will skip reviewing the ChartExtensions.cs and HelperModel.cs classes since they are covered in the article above.

我创建了一些看法控制器：

I created a controller with a few views:

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

我有快速辅助类填充它。

I populate it with a quick helper class

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

我得到的是一系列的＆lt;节＆GT; s的标签型号编号：＃其中＃ID为正确重合数据被发送作为模型。我不明白的是一个图表，虽然如预期的部分分隔开。

What I get is a series of <section>s with the label Model ID: # where the # coincides correctly with the ID of the data being sent as the model. That I do not get is a chart, although the section is spaced as expected.

我缺少的东西吗？这与code中的标识符图表扩展创建一个对JavaScript的问题？

Am I missing something? Is this a problem with identifiers within the code for the chart extensions creating the javascript?

编辑：
画布添加ID唯一标识，包括数据点的指数。
形式的问题里的改动形式。

Added unique identifier for canvas ID to include index of data points. Changed form within form issue.

推荐答案

的问题是，点NET库里例如code只是不设立在同一页上管理多个图表很好，确实需要一些大量的返工。这并不难，只要不是本身就是一个很好的解决方案。我没有找到一个还算过得去的免费制图定在 http://www.chartjs.org/ ，会做的罚款。谢谢你们谁花时间寻找到这对我和给我的反馈意见。

The problem is that the Dot Net Curry example code just isn't set up for managing multiple charts on the same page very well and does require some substantial rework. It isn't difficult, just not a very good solution on its own. I did find a fairly decent FREE charting set at http://www.chartjs.org/ that will do fine. Thank you to those of you who have taken the time to look into this for me and have given me feedback.

这篇关于在局部视图渲染HTML5图表只显示空白数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！