在 ASP.NET MVC 中创建谷歌图表答案

【问题标题】：Creating Google Chart in ASP.NET MVC在 ASP.NET MVC 中创建谷歌图表
【发布时间】：2012-09-12 19:24:58
【问题描述】：

如何在 VB.NET 中创建这样的数组？

    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses'],
      ['2004',  1000,      400],
      ['2005',  1170,      460],
      ['2006',  660,       1120],
      ['2007',  1030,      540]
    ]);

我需要从查询中创建它，而不是像我在上面链接到的文章中那样从静态数据中创建它：

Dim water = db.Tbl_Hydrations.Where(Function(x) x.Hyd_Create_Date >= firstDay And x.Hyd_Create_Date <= lastDay).ToList

如果我可以创建数组，我可以在图表中显示数据。感谢您的帮助。

编辑：

我试过了：

Function WeightAreaChartData() As JsonResult

    Dim data = New Dictionary(Of String, Object)

    data.Add("1", New With {.Name = "China", .Value = "11"})
    data.Add("2", New With {.Name = "China", .Value = "11"})

    Return Json(data, JsonRequestBehavior.AllowGet)

End Function

但是，谷歌图表说，“没有数据。”

它返回的 JSON 是：

{"1":{"Name":"China","Value":"11"},"2":{"Name":"China","Value":"11"}}

最终编辑：

这是我正在使用的操作：

<EmployeeAuthorize()>
Function WeightAreaChartData() As JsonResult

    Dim myData = db.Tbl_Weights.Where(Function(x) x.Weight_Employee_ID).OrderBy(Function(x) x.Weight_Create_Date)

    Dim data = New List(Of Object)

    data.Add(New Object() {"Date", "Your Weight"})

    For Each i As Tbl_Weight In myData

        data.Add(New Object() {DateTime.Parse(i.Weight_Create_Date).Day, i.Weight_Amount})

    Next

    Return Json(data, JsonRequestBehavior.AllowGet)

End Function

【问题讨论】：

可以添加WeightAreaChartData返回的json结果吗？

标签： asp.net-mvc vb.net asp.net-mvc-3 google-visualization

【解决方案1】：

你可以创建这个数组：

[
   ['Year', 'Sales', 'Expenses'],
   ['2004',  1000,      400],
   ['2005',  1170,      460],
   ['2006',  660,       1120],
   ['2007',  1030,      540]
]

通过使用这个 JsonResult

Function WeightAreaChartData() As JsonResult
    Dim data = New Object() {
                   New Object() {"Year", "Sales", "Expenses"},
                   New Object() {"2004", 1000, 400},
                   New Object() {"2005", 1170, 460},
                   New Object() {"2006", 660, 1120},
                   New Object() {"2007", 1030, 540}
              }


    Return Json(data, JsonRequest.Behavior.AllowGet)
End Function

我知道，您的问题远不止这些。但这应该为您指明正确的方向。随时发表评论以获取更多建议。

编辑

采取example from you original post

您可以重写它以使用 JsonResult（更改 /Controller/WeightAreaChartData 以指向您的 JsonResult 路由）

<html>
  <head>
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("visualization", "1", { packages: ["corechart"] });
        google.setOnLoadCallback(drawChart);
        function drawChart() {
            $.post('/Controller/WeightAreaChartData', {},
                function (data) {
                    var tdata = new google.visualization.arrayToDataTable(data);

                    var options = {
                        title: 'Company Performance',
                        hAxis: { title: 'Year', titleTextStyle: { color: 'red' } }
                    };

                    var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
                    chart.draw(tdata, options);
                });
        }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

【讨论】：

谢谢你回答了我的问题，我还有更多的问题。例如，如何使用 JSON 将其放入 Google Chart？此页面具有特定格式的 JSON（在底部）google-developers.appspot.com/chart/interactive/docs/…
这是实际的参数列表，我想我必须构建一个对象来创建像 google-developers.appspot.com/chart/interactive/docs/… 这样的 json。然后我必须尝试使用查询从我的数据库中动态创建对象。
实现目标的方法有很多。根据我们已经完成的工作，我将使用 arrayToDataTable 函数，如编辑中所示。
迈克尔，非常感谢！这让我更接近。现在，我只需要能够从查询中获取数据。我想我只需要进行查询，然后循环并为每一行创建对象。
这就是我要做的事情。