Uncaught (in promise) ReferenceError: sales is not defined at drawChart

Question

这是为了

    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) 下面的图像数据会像 this.and 有时会出现图表，有时会抛出错误

错误

Answer 1

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

Uncaught (in promise) ReferenceError: sales is not defined at drawChart

Uncaught (in promise) ReferenceError: sales is not defined at drawChart

javascript

charts

google-visualization

laravel