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

问题描述

这是针对

  fetch（'http://127.0.0.1:8000/api/salesChart'）
。然后（response => response.json（））
 .then（data => {
 this.sales = data.sales; 
 console.log（sales）; 
 }）; 
  

Google Chart代码

 <脚本类型=文本/ javascript> 
 google.charts.load（‘current’，{’packages’：[’line’]}）； 
 google.charts.setOnLoadCallback（drawChart）; 
函数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'+'（ '+开始+'-'+至+'）'
}，
宽度：600，
高度：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'，{
 package：['line'] 
}）。then（函数（）{
 var chart = new google.charts.Line（document.getElementById（’curve_chart'））; 
 
 var选项= {
图表：{
标题：'Sales Chart'+'（'+ start +'-'+ to +'）'
} ，
宽度：600，
高度：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） ）; 
}）; 
}）； 
  

This is for

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

Google CHart Code

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

But when id console.log(sales) Below images data will come like this.and sometimes graph will come and sometimes throws errors

Error

解决方案

both google's load method and the fetch method run asynchronously,
so you have to wait until both have completed before trying to draw the chart.

you could use something similar to the following...

load google charts, then fetch the data, then draw the chart...

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

这篇关于未捕获（承诺）ReferenceError：在drawChart上未定义销售的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！