GoogleChart JSON

时间：2018-11-19 21:45:03

标签： javascript php ajax charts google-visualization

尝试在本地主机中通过PHP和AJAX使用JSON数据创建google GANTT图表。我收到以下错误。我无法理解该错误及其加载方式。：

Uncaught TypeError: Cannot read property '3' of undefined
    at gvjs_Tba (jsapi_compiled_default_module.js:132)
    at new gvjs_R (jsapi_compiled_default_module.js:131)
    at Object.<anonymous> (ganttchart.html:23)
    at c (jquery.min.js:4)
    at Object.fireWith [as resolveWith] (jquery.min.js:4)
    at k (jquery.min.js:6)
    at XMLHttpRequest.r (jquery.min.js:6)
gvjs_Tba @ jsapi_compiled_default_module.js:132
gvjs_R @ jsapi_compiled_default_module.js:131
(anonymous) @ ganttchart.html:23
c @ jquery.min.js:4
fireWith @ jquery.min.js:4
k @ jquery.min.js:6
r @ jquery.min.js:6
XMLHttpRequest.send (async)
send @ jquery.min.js:6
ajax @ jquery.min.js:6
drawChart @ ganttchart.html:18
Promise.then (async)
google.G.K.U.hl @ loader.js:231
(anonymous) @ ganttchart.html:11

我的HTML DOC，其中对PHP页面进行AJAX引用。我将以前版本的AJAX调用更改为包含完成

  <html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">

    google.charts.load('current', {'packages':['gantt']});

    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      $.ajax({
        url: "getGanttData.php", // make this url point to the data file
        dataType: "json"
      }).done(function (jsonData) {
        // Create our data table out of JSON data loaded from server.
        var data = new google.visualization.DataTable(jsonData);

        var options = {
          //explorer: {axis: 'horizontal'}
          height: 275,
          gantt: {
            defaultStartDateMillis: new Date(2019, 1, 1)
          }
        };

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
        chart.draw(data, options);
      });
    }
    </script>
  </head>

  <body>

  <div id="intro">
    <h1>Supervisor's Dashbaord</h1>
    </div>
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
  </body>
</html>

PHP脚本-这将读取示例gantt详细信息字符串并提取数据：getGanttData.php 

<?php 

$string = file_get_contents("sampleGanttData.json");
echo $string;

?>

我的JSON数据：sampleGanttData.json 

    {
  "cols": [{"id": "ID", "label": "Task ID", "type": "string"},
         {"id": "Name", "label": "Task Name", "type": "string"},
         {"id": "Resource", "label": "Resource", "type": "string"},
         {"id": "Start", "label": "Start Date", "type": "date"},
         {"id": "End", "label": "End Date", "type": "date"},
         {"id": "Duration", "label": "Duration", "type": "number"},
         {"id": "Percent", "label": "Percentage complete", "type": "number"},
         {"id": "Dependencies", "label": "Dependencies", "type": "string"}
  ],
  "rows": [
            {"c":[{"v": "T101"},
             {"v": "WO:1 - create Design"},
             {"v": "Engineer"},
             {"v":"null"},
             {"v":"null"},
             {"v": 2.0},
             {"v": 2.0},
             {"v":"null"}
        ]},

        [{"c":[{"v": "T102"},
             {"v": "WO:1 - Gain Design Approval"},
             {"v": "Engineer"},
             {"v":"null"},
             {"v":"null"},
             {"v": 3.0},
             {"v": 0.0},
             {"v":"T101"}
        ]}
        ]
  ]  
 }

1 个答案:

答案 0 :(得分：1)

是的，您需要删除async: false才能删除弃用警告

但是，这将导致其余图表代码在数据返回之前运行，
会导致其他错误

由于success函数也已被弃用，
将其余代码移至done承诺以更正此问题，
如下... 

// Load the Visualization API and the piechart package.
google.charts.load('current', {'packages':['gantt']});

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

function toMilliseconds(hour) {
  return hour * 60 * 1000 *60;
}

function drawChart() {
  $.ajax({
    url: "getGanttData.php", // make this url point to the data file
    dataType: "json"
  }).done(function (jsonData) {
    // Create our data table out of JSON data loaded from server.
    var data = new google.visualization.DataTable(jsonData);

    var options = {
      //explorer: {axis: 'horizontal'}
      height: 275,
      gantt: {
        defaultStartDateMillis: new Date(2019, 1, 1)
      }
    };

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
    chart.draw(data, options);
  });
}

更新

json数据格式错误。第二行中有一个额外的打开和关闭数组支撑，请参见注释。 

{
  "cols": [{"id": "ID", "label": "Task ID", "type": "string"},
         {"id": "Name", "label": "Task Name", "type": "string"},
         {"id": "Resource", "label": "Resource", "type": "string"},
         {"id": "Start", "label": "Start Date", "type": "date"},
         {"id": "End", "label": "End Date", "type": "date"},
         {"id": "Duration", "label": "Duration", "type": "number"},
         {"id": "Percent", "label": "Percentage complete", "type": "number"},
         {"id": "Dependencies", "label": "Dependencies", "type": "string"}
  ],
  "rows": [
            {"c":[{"v": "T101"},
             {"v": "WO:1 - create Design"},
             {"v": "Engineer"},
             {"v":"null"},
             {"v":"null"},
             {"v": 2.0},
             {"v": 2.0},
             {"v":"null"}
        ]},

        // the following opening brace ([) should be removed
        [{"c":[{"v": "T102"},
             {"v": "WO:1 - Gain Design Approval"},
             {"v": "Engineer"},
             {"v":"null"},
             {"v":"null"},
             {"v": 3.0},
             {"v": 0.0},
             {"v":"T101"}
        ]}
        ]  // <-- one of these closing braces should be removed
  ]  // <-- one of these closing braces should be removed
}

此外，如果要使用null值，则该值不应用引号引起来。 

{"v":"null"}  // <-- bad
{"v":null}    // <-- good

但是，至少一行应该有开始和结束日期，
在提供的数据样本中，两行的日期均为null。

清理json应该可以绘制图表，
参见以下工作片段... 

google.charts.load('current', {
  packages: ['gantt']
}).then(function () {
  var data = new google.visualization.DataTable({
    "cols": [
      {"id": "ID", "label": "Task ID", "type": "string"},
      {"id": "Name", "label": "Task Name", "type": "string"},
      {"id": "Resource", "label": "Resource", "type": "string"},
      {"id": "Start", "label": "Start Date", "type": "date"},
      {"id": "End", "label": "End Date", "type": "date"},
      {"id": "Duration", "label": "Duration", "type": "number"},
      {"id": "Percent", "label": "Percentage complete", "type": "number"},
      {"id": "Dependencies", "label": "Dependencies", "type": "string"}
    ],
    "rows": [
      {"c":[
        {"v": "T101"},
        {"v": "WO:1 - create Design"},
        {"v": "Engineer"},
        {"v": null},
        {"v": null},
        {"v": 2.0},
        {"v": 2.0},
        {"v": null}
      ]},
      {"c":[
        {"v": "T102"},
        {"v": "WO:1 - Gain Design Approval"},
        {"v": "Engineer"},
        {"v": "Date(2019, 1)"},
        {"v": "Date(2019, 2)"},
        {"v": 3.0},
        {"v": 0.0},
        {"v": "T101"}
      ]}
    ]
  });

  var options = {
    height: 275,
    gantt: {
      defaultStartDateMillis: new Date(2019, 1, 1)
    }
  };

  var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
  chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

相关问题
最新问题