Question

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

我将跳过审核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>
}

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

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

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

Answer 1

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

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

1 个答案: