未捕获(按约定)TypeError:无法在drawChart读取未定义的属性"0" [英] Uncaught (in promise) TypeError: Cannot read property '0' of undefined at drawChart

问题描述

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

1. 我已经在ajax函数之外定义了此图表
2. 每当我调用服务器时，我在开发人员控制台中遇到错误(script.js:96未捕获(承诺)TypeError:无法在drawChart读取未定义的属性'0')
3. 输入参数并调用n次后，我在控制台中没有看到任何错误4)每当我运行服务器时，我都不想看到错误.

推荐答案

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

as you've discovered, the function gets called from the callback method without the data.
however, it is not a good idea to remove the callback,
as it is possible that the function may be called before google charts has fully loaded.
which would cause other errors.

有几种方法可以确保Google图表已加载.
我们可以使用 load 方法返回的承诺.

there are a few ways to ensure google charts has loaded.
we can use the promise the load method returns.

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

as well, the load method will wait for the page to load by default.
so we can use google's load method in place of jquery's ready method.

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

recommend the following changes to ensure google charts has fully loaded,
and that the data gets properly passed to the chart.

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

这篇关于未捕获(按约定)TypeError:无法在drawChart读取未定义的属性"0"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！