折线图上未加载数据 - 使用 jQuery AJAX。和 ASP.NET MVC答案

【问题标题】：Data not loading on Line Chart - using jQuery AJAX. and ASP.NET MVC折线图上未加载数据 - 使用 jQuery AJAX。和 ASP.NET MVC
【发布时间】：2017-09-09 10:48:22
【问题描述】：

我正在使用来自谷歌图表的简单折线图并且数据没有加载我只需要两个值来显示工作时间和该特定月份的天数。我能够将数据存储在数组中，但我希望从数据库中提取数据。

     <script type="text/javascript">

    //Load the Visualization API library and the linechart library.
    google.load('visualization', '1.0', { 'packages': ['corechart'] });

    //Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawLoseATonLineChart);

    //Callback that creates and populates a data table, instantiates the line chart,
    //passes in the data, and draws it.
    function drawLoseATonLineChart() {

        var url = "@Url.Action("GetChartStatistics")";

        var jsonData = $.ajax({
            method: 'GET',
            url: url,
            dataType: 'JSON',
            async: false
        }).responseText;

        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Date');
        data.addColumn('number', 'Hours');

        for (var i = 0; i < data.length; i++) {
            data.addRow([jsonData[i].Date, jsonData[i].Hours]);
        }

        var options = {
            title: 'Employees hours worked',
            legend: {
                position: 'right',
                alignment: 'center'
            },
            vAxis: {
                title: 'Weight'
            },
            hAxis: {
                title: 'Week',
                slantedText: true,
                slantedTextAngle: 45

            },
            colors: ['E81A00']
        };

        var chart = new google.visualization.LineChart(document.getElementById('lose-a-ton-line-chart'));

        chart.draw(data, options);
    }
</script>

我的控制器 GetStatisics()方法

           var line = (from a in db.employees
            join p in db.time
                on a.id = p.id
            where a.Username == currentuser
            select new line
            {
                Date = a.Datecaptured,
                 Hours = a.Hours
            });

return Json(line, JsonRequestBehavior.AllowGet);

请帮忙

【问题讨论】：

我猜你的意思是for (var i = 0; i < jsonData.length; i++) {（不是data.length）
是的，先生，我想是的，但在我的控制器中，m 仍然出现错误
你打电话给GetChartStatistics，但告诉我们GetStatisics。当您发布不完整的代码并且不告诉我们您遇到什么错误时，我们怎么可能知道您遇到了什么错误。
抱歉我弄错了... var line part 单词行加了下划线

标签： javascript jquery asp.net ajax asp.net-mvc

【解决方案1】：

更改 jsonData.length 而不是 data.length

function drawLoseATonLineChart() {

var url = "@Url.Action("GetChartStatistics")";

var jsonData = $.ajax({
    method: 'GET',
    url: url,
    dataType: 'JSON',
    async: false
}).responseText;

var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Hours');
//just put "jsonData"  instead of  "data"
   for (var i = 0; i < jsonData.length; i++) {
         data.addRow([jsonData[i].Date, jsonData[i].Hours]);
     }
var options = {
    title: 'Employees hours worked',
    legend: {
        position: 'right',
        alignment: 'center'
    },
    vAxis: {
        title: 'Weight'
    },
    hAxis: {
        title: 'Week',
        slantedText: true,
        slantedTextAngle: 45

    },
    colors: ['E81A00']
};

var chart = new google.visualization.LineChart(document.getElementById('lose-a-ton-line-chart'));

chart.draw(data, options);

}

【讨论】：