javascript MVC 4 & Google Charts - 如何将折线图的数据从控制器传递到视图？

MVC 4 & Google Charts - How to pass data for Line Chart from Controller to View?

提问by peter

I'm trying to display information collected like this (Controller):

我正在尝试显示这样收集的信息（控制器）：

    public JsonResult GetDataAssets()
    {
        List<string[]> data = new List<string[]>();
        data.Add(new[] { "Day", "Kasse", "Bonds", "Stocks", "Futures", "Options" });
        data.Add(new[] { "01.03.", "200", "500", "100", "0", "10" });
        data.Add(new[] { "01.03.", "300", "450", "150", "50", "30" });
        data.Add(new[] { "01.03.", "350", "200", "180", "80", "40" });
        return Json(data);
    }

..in a Google Chart, like this (View):

..在谷歌图表中，像这样（查看）：

function drawChart() {

    var data = google.visualization.arrayToDataTable($.post('GetDataAssets', {}).responseText);
    var options = {
        title: 'Performance'
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
};

This gives me a js exception stating data is not an array. It's probably not done with passing the data like i tried.. How would i need to work the data returned by the ajax call to be in valid format?

这给了我一个 js 异常，说明数据不是数组。它可能没有像我尝试的那样传递数据。我需要如何处理由 ajax 调用返回的数据以采用有效格式？

---

---

Answer:

回答：

This performed fetching & very flexible converting data as handed over already jsonyfied by the controller written above. Great Link: this blog post

这执行了获取和非常灵活的转换数据，这些数据已经由上面编写的控制器 jsonyfied 移交。很棒的链接：这篇博文

               var tdata = new google.visualization.DataTable();
               var rows = data.length;
               var cols = data[0].length;

               tdata.addColumn('string', data[0][0]);
               for (var i = 1; i < cols; i++) {
                   tdata.addColumn('number', data[0][i]);
               }

               tdata.addRows(data.length);
               for (var i = 0; i < data.length; i++) {
                   tdata.setCell(i, 0, data[i][0]);
                   for (var j = 1; j < cols; j++) {
                       var value = parseInt(data[i][j]);
                       tdata.setCell(i, j, value);
                   }
               }

采纳答案by Ajeesh M

function drawChart() {

    $.post('GetDataAssets', {}, function(d){
        var data = google.visualization.arrayToDataTable(d);
    var options = {
        title: 'Performance'
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
    });
};

$.post() returns an XMLHttpRequest. Its initial responseText will be empty until request completes with status 4. What you are doing wrong is, you are passing XMLHttpRequest immediately.

$.post() 返回一个 XMLHttpRequest。它的初始 responseText 将是空的，直到请求以状态 4 完成。您做错的是，您立即传递了 XMLHttpRequest。

UPDATE

更新

Try this on your controller

在你的控制器上试试这个

public JsonResult GetDataAssets() {
        List<object> data = new List<object>();
        data.Add(new[] { "Day", "Kasse", "Bonds", "Stocks", "Futures", "Options" });
        data.Add(new[] { 01.03, 200, 500, 100, 0, 10 });
        data.Add(new[] { 01.03, 300, 450, 150, 50, 30 });
        data.Add(new[] { 12.15, 350, 200, 180, 80, 40 });
        return Json(data);
    }

回答by haim770

I don't know much about Google Charts, but i do know that this line:

我不太了解谷歌图表，但我知道这一行：

var data = google.visualization.arrayToDataTable($.post('GetDataAssets', {}).responseText);

will not fill datawith the jsonresponse from the server, since (unless otherwise specified) ajaxrequests are done in an asynchronous way.

不会填充来自服务器data的json响应，因为（除非另有说明）ajax请求是以异步方式完成的。

This is the way to go about it:

这是解决问题的方法：

var jsonData = null;

$.post('GetDataAssets',
       {},
       function(data) { jsonData = data; },
       'json');

var data = google.visualization.arrayToDataTable(jsonData);

回答by JudasPriest

   function drawChart() {
          $.get('/Home/GetData', {},

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

      tdata.addColumn('string', 'day');
      tdata.addColumn('number', 'kasse');
      tdata.addColumn('number', 'Bonds');
      tdata.addColumn('number', 'Stocks');
      tdata.addColumn('number', 'Futures');


      for (var i = 0; i < data.length; i++) {
          tdata.addRow([data[i].day, data[i].Kasse, data[i].Bonds, data[i].Stocks, data[i].Futures]);
      }

      var options = {
          title: "Year Wheel"
      };

      var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
      chart.draw(tdata, options);
  });
      }