javascript - 谷歌图表 JSON

标签 javascript php ajax charts google-visualization

尝试在本地主机中通过 PHP 和 AJAX 使用 JSON 数据创建谷歌甘特图。我收到以下错误。我无法理解错误及其加载方式。:

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 脚本 - 这会读取示例甘特图详细信息字符串并提取数据: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"}
        ]}
        ]
  ]  
 }

最佳答案

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

然而，这将导致图表代码的其余部分在数据返回之前运行，
这将导致不同的错误

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

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

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

清理 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>

关于javascript - 谷歌图表 JSON，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53383083/

上一篇：javascript - React-Redux - onClick 在每次状态更改时触发

下一篇：javascript - 如何打开新克隆的 Bootstrap 选择字段？

相关文章：

javascript - 如何从异步调用中填充 ng-table 上的选择过滤器

php - 从 Twitter 请求特定信息

java - 似乎无法让从我的 Android 应用程序发送的 http 获取参数显示在我的 PHP 页面上

json - 获取 AJAX 使用从 Flask 发送的 JSON 数据填充数据表并单独渲染 html

javascript - 如何在警报框中获取 Ajax 调用的结果

javascript - Q promise 链接，未调用错误处理程序

javascript - 如何处理 catch 中的错误 - vue.js

javascript - IE HTML 单选更改事件

PHP函数mysqli_bind_param参数错误

javascript - Jquery 和 CSS 表现奇怪

©2024 IT工具网  联系我们