单个网页中的多个图表

时间:2014-06-06 17:17:16

标签: c# asp.net asp.net-mvc-4 razor charts

我正在尝试复制在ASP类网页中完成的内容,但是在使用Razor的ASP.NET MVC网页中。

基本上是一个SQL调用来获取一些数据,我使用google.visualization.arrayToDataTable将数据放入SQL中,给它一个标题然后绘制所说的图表。

    var chart = new google.visualization.ColumnChart(document.getElementById('topThreeModelNumberST_div'));
    chart.draw(data, options);
...html code emitted for brevity
<div id="topThreeModelNumberST_div" style="width:400; height:300"></div>   

这已经完成了几次。结果是这一页上大约有6或7个图表。

所以作为测试我做了HomeController

public ActionResult Charts()
{
    List<Models.ModelErrorReports> reports = new List<Models.ModelErrorReports>();
    reports.Add(DAL.DevSQL.GetModelErrorReports("Model1", "efipreQCProError"));
    reports.Add(DAL.DevSQL.GetModelErrorReports("Model2", "eepreQCProError"));

    return View(reports);
}

和我的图表视图

@model List<FailFixLog.Models.ModelErrorReports>

@{
    ViewBag.Title = "Charts";
}

<h2>Charts</h2>


    @{
        List<Chart> charts = new List<Chart>();

        foreach (var item in Model)
        {
            var myChart = new Chart(485, 300);
            myChart.AddTitle(@item.ModelName);
            myChart.AddSeries(@item.ModelName + "Series",
                xValue: @item.ErrorReports.ErrorDescriptions, 
                yValues: @item.ErrorReports.ErrorCounts);
            charts.Add(myChart);
        }

    }

<table>
    @foreach (var chart in charts)
    {
        <tr>
            <td>
                @{@chart.Write();}
            </td>
        </tr>
    }
</table>

现在我尝试了一些变化,但这是我放弃之前的最后一次尝试来到这里。结果仍然是相同的,我只得到Model1的1个图表。我在某个地方看到我必须为每个图表制作一个视图...但这对我来说没有意义,因为那时我必须将List传递给Partial视图,并且看到这是我的第二天写任何类型的网络代码,我不能围绕它。万一你好奇我有一个单元测试,显示我的列表有两个ErrorReports,数据是唯一的。我该如何解决这个问题?

0 个答案:

没有答案