2

私はこれを読んでいましたhttp://blog.platformular.com/2012/03/20/load-google-chart-by-ajax-using-asp-net-mvc-and-jquery/とこれhttps://google- developers.appspot.com/chart/interactive/docs/gallery/areachart。

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

しかし、Google チャートでは「データがありません」と表示されます。

返される 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
4

1 に答える 1

3

この配列を作成できます：

[
   ['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

あなたの質問にはこれ以上のことがあります。しかし、これはあなたを正しい方向に向けるはずです。さらにアドバイスが必要な場合は、お気軽にコメントしてください。

編集

元の投稿から例を挙げます

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>
于 2012-09-20T16:21:38.850 に答える