Uncaught (in promise) TypeError: Cannot read property '0' of undefined at drawChart

Question

//Ajax call
$(document).ready(function (data) {
  $("#btnGo").click(function () {
    console.log("ready!");
    $.ajax({
      url: '/api',
      type: 'POST',
      contentType: 'application/json',
      dataType: 'JSON',
      data: JSON.stringify({ startDate: $("#one").val(), endDate: $('#two').val() }),
      success: function (data) {
        
       
        var x = [data.x.count, data.x2.count, data.x3.count, data.x4.count]
        //data.x.count is getting from an api call where it will show count like 5
        drawChart(x)
        
      }

    });
  });
});
//bar chart
google.charts.load("current", { packages: ["corechart"] });
google.charts.setOnLoadCallback(drawChart);
function drawChart(x) {
  var data = google.visualization.arrayToDataTable([
    ['Tickets', 'Count', { role: "style" }],
    ['x1', x[0], "#b87333"],
    ['x2', x[1], "silver"],
    ['x3', x[2], "gold"],
    ['x4', x[3], "green"]    
  ]);
  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1,
    {
      calc: "stringify",
      sourceColumn: 1,
      type: "string",
      role: "annotation"
    },
    2]);

  var options = {
    title: "Tickets",
    width: 750,
    height: 550,
    bar: { groupWidth: "95%" },
    legend: { position: "none" },
  };
  var chart = new google.visualization.ColumnChart(document.getElementById("chart"));
  chart.draw(view, options);
}

我在 ajax 函数外定义了这个图表
每当我调用服务器时，我都会在开发人员控制台中收到错误消息（script.js:96 Uncaught (in promise) TypeError: Cannot read 属性 '0' of undefined at drawChart）
输入参数并调用 n 次后，我在控制台中没有看到任何错误 4）每当我运行服务器我不想看到错误。

Answer 1

抓紧我之前写的... 我没有看到这条线

google.charts.setOnLoadCallback(drawChart);

当加载 google 图表但您没有传递 x..

时调用

Answer 2

尝试删除这一行：

google.charts.setOnLoadCallback(drawChart);

此行将不带参数地调用您的函数 drawChart。但它需要 x 才能正常工作，因为您在调用 google.visualization.arrayToDataTable.

时会使用它

您不需要它，因为您将在 Ajax 回调中调用 drawChart。

Answer 3

我删除了这个google.charts.setOnLoadCallback(drawChart)；现在不显示错误。

Answer 4

如您所见，该函数是在没有数据的情况下从回调方法中调用的。
但是，删除回调不是一个好主意，
因为有可能在 google 个图表完全加载之前调用该函数。
这会导致其他错误。

有几种方法可以确保 google 图表已加载。
我们可以使用 promise load 方法 returns.

同样，load 方法将默认等待页面加载。
所以我们可以使用 google 的 load 方法代替 jquery 的 ready 方法。

建议进行以下更改以确保 google 图表已完全加载，
并且数据已正确传递到图表。

google.charts.load("current", {
  packages: ["corechart"]
}).then(function () {
  var options = {
    title: "Tickets",
    width: 750,
    height: 550,
    bar: { groupWidth: "95%" },
    legend: { position: "none" },
  };

  var chart = new google.visualization.ColumnChart(document.getElementById("chart"));

  $("#btnGo").click(function () {
    $.ajax({
      url: '/api',
      type: 'POST',
      contentType: 'application/json',
      dataType: 'JSON',
      data: JSON.stringify({ startDate: $("#one").val(), endDate: $('#two').val() })
    }).done(function (data) {
      var x = [data.x.count, data.x2.count, data.x3.count, data.x4.count];
      //data.x.count is getting from an api call where it will show count like 5
      drawChart(x);
    });
  });

  function drawChart(x) {
    var data = google.visualization.arrayToDataTable([
      ['Tickets', 'Count', { role: "style" }],
      ['x1', x[0], "#b87333"],
      ['x2', x[1], "silver"],
      ['x3', x[2], "gold"],
      ['x4', x[3], "green"]
    ]);

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1, {
      calc: "stringify",
      sourceColumn: 1,
      type: "string",
      role: "annotation"
    }, 2]);

    chart.draw(view, options);
  }
});

Uncaught (in promise) TypeError: Cannot read property '0' of undefined at drawChart

Uncaught (in promise) TypeError: Cannot read property '0' of undefined at drawChart

javascript

api

ajax

charts

google-visualization