Javascript 使用动态生成的JSON填充Google数据表的正确方法

我正在尝试制作一个Google数据网格（使用gstatic.com），作为MVC.net核心项目的一部分。我将Json从控制器返回到视图。我收到的json看起来是正确的（我相信），但我还没有弄清楚如何让json在数据网格中动态创建行。我看过不同的文章，但现在还没有发现这是可行的

这是我得到的

控制员：

[HttpPost]
public JsonResult ReportJson(string dateFrom, string dateTo, string ticketNumber, string stationId, string LoadingFile)
{

    DateTime dateStart = Convert.ToDateTime(dateFrom);
    DateTime dateEnd = Convert.ToDateTime(dateTo);

    List<ReportDTO> ds = new List<ReportDTO>();

    ds = repo.GetReport(dateStart, dateEnd, ticketNumber, stationId, LoadingFile);

    string objectString = ds.ToString();

    var o = JsonConvert.SerializeObject(ds);

    return Json(o);
}

以下是我在razor页面中的相关代码：

<div id="table_div"></div>
<input type="button" value="Call Json" onclick="loadChart()"/>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
      google.charts.load('current', {'packages':['table']});
      //google.charts.setOnLoadCallback(drawTable);

    function loadChart() {
        $.ajax(  
        {  
            type: 'POST',  
            data: $('#DataQuery').serialize(),
            dataType: 'JSON',  
            url: '/Report/ReportJson',  
            success:  
                function (response)  
                {  
                    drawTable(response);
                }  
        });
    }


    function drawTable(response) {

        var json_data = JSON.parse(response);

        var data = new google.visualization.DataTable();

        data.addColumn('string', 'Api');
        data.addColumn('string', 'AverageLineTemp');
        data.addColumn('string', 'BolNumber');
        data.addColumn('string', 'BottomTemp');
        data.addColumn('string', 'CarrierName');
        data.addColumn('string', 'CmdCode');
        data.addColumn('string', 'CmdName');
        data.addColumn('string', 'ConfirmedTicketNumber');
        data.addColumn('string', 'DateFrom');
        data.addColumn('string', 'DateTo');
        data.addColumn('string', 'Deg');
        data.addColumn('string', 'DestCmpId');
        data.addColumn('string', 'DestCmpName');
        data.addColumn('string', 'DriverName');
        data.addColumn('string', 'Gross');
        data.addColumn('string', 'GrossBbl');
        data.addColumn('string', 'GroupName');
        data.addColumn('string', 'Gsv');
        data.addColumn('string', 'HighTemp');
        data.addColumn('string', 'Id');
        data.addColumn('string', 'LactNumber');
        data.addColumn('string', 'LeaseName');
        data.addColumn('string', 'LeaseNumber');
        data.addColumn('string', 'LoadDateTime');
        data.addColumn('string', 'LoadingFile');
        data.addColumn('string', 'ModifiedBy');
        data.addColumn('string', 'NetVolume');
        data.addColumn('string', 'Notes');
        data.addColumn('string', 'OrdCompletiondate');
        data.addColumn('string', 'OrdConsignee');
        data.addColumn('string', 'OrdConsigneeName');
        data.addColumn('string', 'OrdHdrnumber');
        data.addColumn('string', 'RecordErrored');
        data.addColumn('string', 'RefNumber');
        data.addColumn('string', 'TicketNumber');
        data.addColumn('string', 'Timestamp');
        data.addColumn('string', 'TruckNumber');
        data.addColumn('string', 'UpdatingRecordMessage');

        //ADD ROWS????

        var table = new google.visualization.Table(document.getElementById('table_div'));

        table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
    }
</script>

load（'current'，{'packages'：['table']}）；
//google.charts.setOnLoadCallback（drawTable）；
函数负载图（）{
$.ajax（
{  
键入：“POST”，
数据：$（'#DataQuery'）。序列化（），
数据类型：“JSON”，
url:“/Report/ReportJson”，
成功：
功能（响应）
{  
牵引台（响应）；
}  
});
}
功能绘图表（响应）{
var json_data=json.parse（响应）；
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'Api'）；
data.addColumn（'string'，'AverageLineTemp'）；
data.addColumn（'string'，'BolNumber'）；
data.addColumn（'string'，'BottomTemp'）；
data.addColumn（'string'，'CarrierName'）；
data.addColumn（'string'，'CmdCode'）；
data.addColumn（'string'，'CmdName'）；
data.addColumn（'string'，'ConfirmedTicketNumber'）；
data.addColumn（'string'，'DateFrom'）；
data.addColumn（'string'，'DateTo'）；
data.addColumn（'string'，'Deg'）；
data.addColumn（'string'，'DestCmpId'）；
data.addColumn（'string'，'DestCmpName'）；
data.addColumn（'string'，'DriverName'）；
data.addColumn（'string'，'Gross'）；
data.addColumn（'string'，'GrossBbl'）；
data.addColumn（'string'，'GroupName'）；
data.addColumn（'string'，'Gsv'）；
data.addColumn（'string'，'HighTemp'）；
data.addColumn（'string'，'Id'）；
data.addColumn（'string'，'LactNumber'）；
data.addColumn（'string'，'LeaseName'）；
data.addColumn（'string'，'LeaseNumber'）；
data.addColumn（'string'，'LoadDateTime'）；
data.addColumn（'string'，'LoadingFile'）；
data.addColumn（'string'，'ModifiedBy'）；
data.addColumn（'string'，'NetVolume'）；
data.addColumn（'string'，'Notes'）；
data.addColumn（'string'，'OrdCompletiondate'）；
data.addColumn（'string'，'ord收货人'）；
data.addColumn（'string'，'OrdDelegateName'）；
data.addColumn（'string'，'OrdHdrnumber'）；
data.addColumn（'string'，'RecordErrored'）；
data.addColumn（'string'，'RefNumber'）；
data.addColumn（'string'，'TicketNumber'）；
data.addColumn（'string'，'Timestamp'）；
data.addColumn（'string'，'TruckNumber'）；
data.addColumn（'string'，'updateRecordMessage'）；
//添加行？？？？
var table=新的google.visualization.table（document.getElementById（'table_div'）；
table.draw（数据，{showRowNumber:true，宽度：'100%，高度：'100%}）；
}

带问号的部分（应该添加行的地方）是我被卡住的地方。基于不同的文章，我尝试了不同的方法，讨论了如何使用Data.Addrows（）和Data.Addrow（）将控制器的响应转换为行，但是我尝试的每种方法都给了我不同的错误。我想我应该问问正确的方法是什么，而不是问每种情况下都有什么问题。要使它正常工作，缺少什么？

您检查过了吗？谷歌和人们说这是网络服务中的一种常见方法

<div id="table_div"></div>
<input type="button" value="Call Json" onclick="loadChart()"/>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
      google.charts.load('current', {'packages':['table']});
      //google.charts.setOnLoadCallback(drawTable);

    function loadChart() {
        $.ajax(  
        {  
            type: 'POST',  
            data: $('#DataQuery').serialize(),
            dataType: 'JSON',  
            url: '/Report/ReportJson',  
            success:  
                function (response)  
                {  
                    drawTable(response);
                }  
        });
    }


    function drawTable(response) {

        var json_data = JSON.parse(response);

        var data = new google.visualization.DataTable();

        data.addColumn('string', 'Api');
        data.addColumn('string', 'AverageLineTemp');
        data.addColumn('string', 'BolNumber');
        data.addColumn('string', 'BottomTemp');
        data.addColumn('string', 'CarrierName');
        data.addColumn('string', 'CmdCode');
        data.addColumn('string', 'CmdName');
        data.addColumn('string', 'ConfirmedTicketNumber');
        data.addColumn('string', 'DateFrom');
        data.addColumn('string', 'DateTo');
        data.addColumn('string', 'Deg');
        data.addColumn('string', 'DestCmpId');
        data.addColumn('string', 'DestCmpName');
        data.addColumn('string', 'DriverName');
        data.addColumn('string', 'Gross');
        data.addColumn('string', 'GrossBbl');
        data.addColumn('string', 'GroupName');
        data.addColumn('string', 'Gsv');
        data.addColumn('string', 'HighTemp');
        data.addColumn('string', 'Id');
        data.addColumn('string', 'LactNumber');
        data.addColumn('string', 'LeaseName');
        data.addColumn('string', 'LeaseNumber');
        data.addColumn('string', 'LoadDateTime');
        data.addColumn('string', 'LoadingFile');
        data.addColumn('string', 'ModifiedBy');
        data.addColumn('string', 'NetVolume');
        data.addColumn('string', 'Notes');
        data.addColumn('string', 'OrdCompletiondate');
        data.addColumn('string', 'OrdConsignee');
        data.addColumn('string', 'OrdConsigneeName');
        data.addColumn('string', 'OrdHdrnumber');
        data.addColumn('string', 'RecordErrored');
        data.addColumn('string', 'RefNumber');
        data.addColumn('string', 'TicketNumber');
        data.addColumn('string', 'Timestamp');
        data.addColumn('string', 'TruckNumber');
        data.addColumn('string', 'UpdatingRecordMessage');

        //ADD ROWS????

        var table = new google.visualization.Table(document.getElementById('table_div'));

        table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
    }
</script>