Question

我想创建下面的谷歌图表，但我想使用现有sql数据库中的日期时间值而不是这些硬编码值。我该怎么做？

Controller（获取日期列并将数据解析为json abject并传递给视图）

public ActionResult Data1(int abs)
{
    db.Configuration.ProxyCreationEnabled = false;
    var seach = (from e in db.GraphDatas
                 where e.SessionID == abs
                 select new CoinModel { StartTime = e.Session.StartTime, EndTime = e.Session.EndTime });
    return Json(seach.ToList(), JsonRequestBehavior.AllowGet);
}

查看（不知道该怎么做）

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<div id="chart_div"></div>
<script type="text/javascript">
    google.charts.load('current', { 'packages': ['timeline'] });
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
        var data = new google.visualization.DataTable({

            cols: [
                { id: 'Session', label: 'Session', type: 'int' },
                { id: 'start', label: 'Season Start Date', type: 'date' },
                { id: 'end', label: 'Season End Date', type: 'date' }
            ],


    }
            rows: [
                { c: [{ v: 'Baltimore Ravens' }, { v: 'Date(2000, 8, 5)' }, { v: 'Date(2001, 1, 5)' }] },
                { c: [{ v: 'New England Patriots' }, { v: 'Date(2001, 8, 5)' }, { v: 'Date(2002, 1, 5)' }] },
                { c: [{ v: 'Tampa Bay Buccaneers' }, { v: 'Date(2002, 8, 5)' }, { v: 'Date(2003, 1, 5)' }] },
                { c: [{ v: 'New England Patriots' }, { v: 'Date(2003, 8, 5)' }, { v: 'Date(2004, 1, 5)' }] },
                { c: [{ v: 'New England Patriots' }, { v: 'Date(2004, 8, 5)' }, { v: 'Date(2005, 1, 5)' }] },
                { c: [{ v: 'Pittsburgh Steelers' }, { v: 'Date(2005, 8, 5)' }, { v: 'Date(2006, 1, 5)' }] },
                { c: [{ v: 'Indianapolis Colts' }, { v: 'Date(2006, 8, 5)' }, { v: 'Date(2007, 1, 5)' }] },
                { c: [{ v: 'New York Giants' }, { v: 'Date(2007, 8, 5)' }, { v: 'Date(2008, 1, 5)' }] },
                { c: [{ v: 'Pittsburgh Steelers' }, { v: 'Date(2008, 8, 5)' }, { v: 'Date(2009, 1, 5)' }] },
                { c: [{ v: 'New Orleans Saints' }, { v: 'Date(2009, 8, 5)' }, { v: 'Date(2010, 1, 5)' }] },
                { c: [{ v: 'Green Bay Packers' }, { v: 'Date(2010, 8, 5)' }, { v: 'Date(2011, 1, 5)' }] },
                { c: [{ v: 'New York Giants' }, { v: 'Date(2011, 8, 5)' }, { v: 'Date(2012, 1, 5)' }] },
                { c: [{ v: 'Baltimore Ravens' }, { v: 'Date(2012, 8, 5)' }, { v: 'Date(2013, 1, 5)' }] },
                { c: [{ v: 'Seattle Seahawks' }, { v: 'Date(2013, 8, 5)' }, { v: 'Date(2014, 1, 5)' }] }
            ]
        });

        var options = {
            height: 450,
            timeline: {
                groupByRowLabel: true
            }
        };

        var chart = new google.visualization.Timeline(document.getElementById('chart_div'));

        chart.draw(data, options);
    }
</script>

Answer 1

你快到了！现在，您必须在剃刀代码中吐出一个字符串，该字符串将混合到您的Google统计代码中。

您可以通过传递您的行信息（例如Viewbag）来实现这一目标。因此，在您的控制器中，您将把它放在您的控制器中：

ViewBag.FootballTeams =  "{ c: [{ v: 'Baltimore Ravens' " etc.

在你的剃刀中：

rows: [
   @Html.Raw(ViewBag.FootballTeams)
]

在MVC应用程序中使用SQL数据库在Google图表上显示数据

1 个答案: