使用来自数据库的 JSON 数据动态填充 Google 甘特图

Question

我正在使用来自 Google 开发人员的甘特图，我正在尝试使用数据库中的数据而不是硬编码数据来生成图表。

图表结构为：任务 ID、任务名称、结束日期、持续时间、完成百分比、依存关系，以便显示数据。（示例 - https://developers.google.com/chart/interactive/docs/gallery/ganttchart#data-format）

我的代码如下：

我的控制器 JSON 填充甘特图的方法如下：

 public ActionResult GetChartData()
    {
        var schedulingData = db.Schedules.Select(x => new{ x.StartDate,x.EndDate,x.TaskName});

        return Json(schedulingData,JsonRequestBehavior.AllowGet);
    }

我只需要从数据库中提取的开始日期、结束日期、任务名称。其他字段将被硬编码。（因此我认为我的问题出在哪里）。

我的代码如下：

<html>

<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    google.charts.load('current', { 'packages': ['gantt'] });
    google.charts.setOnLoadCallback(drawChart);

     function drawChart() {
         var data = new google.visualization.DataTable();
         data.addColumn('string', 'Task ID');
         data.addColumn('string', 'Task Name');
         data.addColumn('string', 'Resource')
         data.addColumn('date', 'Start Date');
         data.addColumn('date', 'End Date');
         data.addColumn('number', 'Duration');
         data.addColumn('number', 'Percent Complete');
         data.addColumn('string', 'Dependencies');   

  
         $.getJSON("@Url.Action("GetChartData")", null, function (chartData) {
              $.each(chartData, function (i, item) {
                  data.addRow([item.TaskName, item.TaskName, "test", item.StartDate, 
              item.EndDate, null, 100, null]);
              });

         var options = {
            height: 400,
            gantt: {
              trackHeight: 30
            }
          };

         var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
          chart.draw(data, options);
      
       }
     </script>
   </head>
<body>
<div id="chart_div"></div>
</body>

如您所见，我正在对行所需字段的一半进行硬编码，并使用 javascript 检索其余字段，如下所示：

$.getJSON("@Url.Action("GetChartData")", null, function (chartData) {
          $.each(chartData, function (i, item) {
              data.addRow([item.TaskName, item.TaskName, "test", item.StartDate, item.EndDate, 
               null, 100, null]);
          });

使用上面的代码时，我的图表根本没有显示。 $.getJSON 部分代码似乎破坏了它，因为如果我对图表的一些数据进行硬编码，并注释掉 $.getJSON 调用，它就可以正常工作。

我做错了什么？谢谢。

更新：通过 Rahaturs 代码更改，我有以下代码：

 function drawChart() {
         var data = new google.visualization.DataTable();
         data.addColumn('string', 'Task ID');
         data.addColumn('string', 'Task Name');
         data.addColumn('string', 'Resource')
         data.addColumn('date', 'Start Date');
         data.addColumn('date', 'End Date');
         data.addColumn('number', 'Duration');
         data.addColumn('number', 'Percent Complete');
         data.addColumn('string', 'Dependencies');


  
         $.getJSON("@Url.Action("GetChartData")", null, function (chartData) {
             $.each(chartData, function (i, item) {
                 data.addRow([item.TaskName, item.TaskName, "test", item.StartDate, item.EndDate, null, 100, null]);
             });
         }

             $.ajax({
                 method: "GET",
                 url: "/GetChartData"
             })
                 .done(function (msg) {

                     var options = {
                         height: 400,
                         gantt: {
                             trackHeight: 30
                         }
                     };

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

                 });
 }

这是我在运行时收到的错误：

Answer 1

您的代码不会等待 $.getJSON 完成执行。在从服务器获取数据之前，chart.draw(data, options); 将使用空值执行。

调用 jquery ajax 并成功执行以下图表渲染代码：

<script type="text/javascript">
    google.charts.load('current', { 'packages': ['gantt'] });
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Task ID');
        data.addColumn('string', 'Task Name');
        data.addColumn('string', 'Resource')
        data.addColumn('date', 'Start Date');
        data.addColumn('date', 'End Date');
        data.addColumn('number', 'Duration');
        data.addColumn('number', 'Percent Complete');
        data.addColumn('string', 'Dependencies');   


        $.ajax({
            method: "GET",
            url: "/GetChartData"
        })
        .done(function( data ) {
        
            var options = {
                height: 400,
                gantt: {
                  trackHeight: 30
                }
              };

            var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
            chart.draw(data, options);
    
        });   
    }
</script>

使用来自数据库的 JSON 数据动态填充 Google 甘特图

Dynamically filling Google Gantt with JSON data from database

html

asp.net-mvc

json

google-visualization