0

我正在尝试显示 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";
}

<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>带有标签Model ID: #的 s，其中 # 与作为模型发送的数据的 ID 正确一致。我没有得到一张图表，尽管该部分按预期隔开。

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

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

4

1 回答 1

0

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

于 2013-09-21T00:25:39.420 回答