未捕获承诺ReferenceError：在drawChart上未定义销售

问题描述

这是给

    fetch('http://127.0.0.1:8000/api/salesChart')
        .then(response => response.json())
        .then(data => {
            this.sales = data.sales;
             console.log(sales);
         });

Google购物车代码

<script type="text/javascript">
google.charts.load('current',{'packages':['line']});
google.charts.setonLoadCallback(drawChart);
function drawChart() {
    var data = new google.visualization.DataTable();
    sales[0].forEach(element => {
        console.log(element)
        if(element === "Month")
            data.addColumn('string',element);
        else
            data.addColumn('number',element);
    });
    sales.splice(0,1)
    data.addRows(sales)
    var options = {
        chart: {
            title:'Sales Chart'+ '('+ start +'-'+to + ')'
        },width: 600,height: 500,vAxis:{title: 'Quantity (MT)',viewWindow: {min: 0},format:'# MT'},};

    var chart = new google.charts.Line(document.getElementById('curve_chart'));
    chart.draw(data,google.charts.Line.convertOptions(options));
}

但是当id为console.log（sales）时，下面的图像数据将像这样。有时图形会出现，有时会引发错误

错误

解决方法

google的load方法和fetch方法都是异步运行的，
因此您必须等到两者都完成后才能绘制图表。

您可以使用类似于以下内容的东西...

加载Google图表，然后获取数据，然后绘制图表...

google.charts.load('current',{
  packages: ['line']
}).then(function () {
  var chart = new google.charts.Line(document.getElementById('curve_chart'));

  var options = {
      chart: {
          title:'Sales Chart'+ '('+ start +'-'+to + ')'
      },width: 600,height: 500,vAxis:{title: 'Quantity (MT)',viewWindow: {min: 0},format:'# MT'},};

  fetch('http://127.0.0.1:8000/api/salesChart')
  .then(response => response.json())
  .then(data => {
    var dataTable = new google.visualization.DataTable();

    data.sales[0].forEach(element => {
        if(element === "Month")
            dataTable.addColumn('string',element);
        else
            dataTable.addColumn('number',element);
    });
    data.sales.splice(0,1)
    dataTable.addRows(data.sales)

    chart.draw(dataTable,google.charts.Line.convertOptions(options));
  });
});