c# - MVC 4 和 Google Charts - 如何将折线图的数据从 Controller 传递到 View ？

Question

我正在尝试显示这样收集的信息( 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);
    }

..在谷歌图表中，像这样( 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);
};

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

---

答案:

这执行了获取和非常灵活的转换数据，正如上面编写的 Controller 已经 jsonyfied 移交的那样。很棒的链接:this blog post

               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);
                   }
               }

Answer 1

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() 返回一个 XMLHttpRequest。它的初始 responseText 将是空的，直到请求以状态 4 完成。你做错的是，你立即传递 XMLHttpRequest。

更新

在你的 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);
    }