谷歌图表json数据没有加载

Question

我正在使用ASP.NET MVC和谷歌图表来尝试生成一个简单的线图和两个数据记录。我从数据库中成功提取数据，但数据未显示在我的图表上。数据由两个记录组成：两个字段：WeekOfEntry（DateTime）和Weight（十进制）。图表出现，但数据点不存在。我猜我的数据格式不正确？

这里是我的javascript：

<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', 'WeekOfEntry'); 
     data.addColumn('number', 'Weight'); 

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

     var options = { 
      title: 'Weight Progression', 
      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> 

这里是我的GetChartStatistics()方法的一部分：

var lineChartData = (from a in db.Associates 
      join aw in db.AssociateWeights 
       on a.RegistrationId equals aw.RegistrationId 
      where a.EventId == eventId && 
        a.Username == currentuser 
      select new LineChartData 
      { 
       Weight = aw.Weight, 
       WeekOfEntry = aw.WeekOfEntry 
      }); 

return Json(lineChartData, JsonRequestBehavior.AllowGet); 

编辑：这里是如何，当它被退回我的JSON数据被格式化：

"[{"Weight":190.0,"WeekOfEntry":"\/Date(1431921600000)\/"},{"Weight":121.0,"WeekOfEntry":"\/Date(1432526400000)\/"}]"

关于为什么数据未加载的任何想法ING？

Answer 1

您在for循环中遇到问题。这里是你修改的代码。

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

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

var result = $.ajax({ 
    method: 'GET', 
    url: url, 
    dataType: 'JSON', 
    async: false 
}); 
var jsonData = result.responseText; 
var data = new google.visualization.DataTable(); 
data.addColumn('string', 'WeekOfEntry'); 
data.addColumn('number', 'Weight'); 

$.each(JSON.parse(jsonData), function (index, obj) { 
    data.addRow([obj.WeekOfEntry, obj.Weight]); 
}); 

var options = { 
    title: 'Weight Progression', 
    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('chart_div')); 

chart.draw(data, options); 


public JsonResult GetChartStatistics() 
    { 
     var lineChartData = new List<LineChartData>() { 
      new LineChartData() { WeekOfEntry = "sat", Weight = 1}, 
      new LineChartData() { WeekOfEntry = "sat1", Weight = 2}, 
      new LineChartData() { WeekOfEntry = "sat2", Weight = 3}, 
      new LineChartData() { WeekOfEntry = "sat3", Weight = 4}, 
     }; 

     return Json(lineChartData, JsonRequestBehavior.AllowGet); 
    } 

Answer 2

而不是循环通过您的JSON数据，你有没有尝试arrayToDataTable函数？

var dataTableData = google.visualization.arrayToDataTable(JSON.parse(jsonData)); 

Answer 3

。在你的例子一个错字，你可能想要遍历jsonData对象，所以更换行：

for (var i = 0; i < jsonData.length; i++) 

此外

for (var i = 0; i < data.length; i++) { 

因为data parameter supports date type你可以考虑以Week作为日期而不是Json字符串。

例

google.setOnLoadCallback(drawLoseATonLineChart); 
 

 
function drawLoseATonLineChart() { 
 

 
    var jsonData = [ 
 
     { "Weight": 190.0, "WeekOfEntry": "\/Date(1431921600000)\/" }, 
 
     { "Weight": 121.0, "WeekOfEntry": "\/Date(1432526400000)\/" } 
 
    ]; 
 

 

 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('date', 'WeekOfEntry'); 
 
    data.addColumn('number', 'Weight'); 
 

 
    for (var i = 0; i < jsonData.length; i++) { 
 
     var weekOfEntry = new Date(parseInt(jsonData[i].WeekOfEntry.substr(6,13))); 
 
     data.addRow([weekOfEntry, jsonData[i].Weight]); 
 
    } 
 

 
    var options = { 
 
     title: 'Weight Progression', 
 
     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 type="text/javascript" src="https://www.google.com/jsapi?autoload={ 'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script> 
 
<div id="lose-a-ton-line-chart" style="width: 640px; height: 480px"></div>