Question

未捕获（在承诺中）TypeError：无法读取 drawChart 中未定义的属性“0”

2020-07-23

1016

javascript ajax api charts google-visualization

//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 property '0' of undefined at drawChart）
输入参数并调用 n 次后，控制台中没有出现任何错误 4）每当我运行服务器时，我都不想看到错误。

Answer 1

尝试删除此行：

071253124

此行将调用您的函数 drawchart 无参数。但是它需要 x 才能正常工作，因为您在调用 google.visualization.araytodatabable 。

时，您不需要它将在您的ajax回调中调用drawchart。

Answer 2

正如您所发现的，该函数从回调方法中调用时没有数据。
但是，删除回调并不是一个好主意，
因为该函数可能在 google charts 完全加载之前被调用。
这会导致其他错误。

有几种方法可以确保 google charts 已加载。
我们可以使用 load 方法返回的承诺。

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

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

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

Answer 3

删除我之前写的内容... 我没有看到这一行

google.charts.setOnLoadCallback(drawChart);

当加载 Google 图表但您没有传递 x 时会调用该行。