javascript - JS - Google 图表 - 无法读取未定义的属性 'getChartLayoutInterface'

Question

我最近遇到了一个问题，控制台错误如下:

Cannot read property 'getChartLayoutInterface' of undefined

我已经阅读了其他问题，从我所看到的情况来看，这是因为 Google Vizulation API 尚未加载，我的代码如下:

<script type="text/javascript">

        // Load the Visualization API and the piechart package.
        google.charts.load('current', {'packages':['corechart']});

        // Set a callback to run when the Google Visualization API is loaded.
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {
          var jsonData = $.ajax({
              url: "assets/main/getFrontData.php",
              dataType: "json",
              async: false,
              type: 'post',
              }).responseText;
          var data = new google.visualization.DataTable(jsonData);
          var options = {
            backgroundColor: 'none',
            lineWidth: 4,
            areaOpacity: .2,
            legend: { position: 'none' },
            colors: ['#007cb0'],
            width: 550,
            height: 300
          }    
          // Create our data table out of JSON data loaded from server.


         var boundingBox = chart.getChartLayoutInterface().getChartAreaBoundingBox(); 
   $('#backgroundChart').css('background-position', boundingBox.left + "px " + boundingBox.top + "px").css('background-size', boundingBox.width + "px " + boundingBox.height + "px");

          // Instantiate and draw our chart, passing in some options.
          var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
          chart.draw(data, options);
        }
</script>

重点是在图表中放置相同大小的背景图像，任何有关抛出错误原因的帮助将不胜感激。

Answer 1

您的问题存在是因为“chart”在此行中引用之前未定义

 var boundingBox = chart.getChartLayoutInterface().getChartAreaBoundingBox(); 

如果在引用该对象之前没有定义该对象的实例，您的环境将始终返回“未定义”。

也许重新定位“图表”实例会对您有好处。将此部分移至边界框实例化上方:

var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);`

这将确保在引用图表进行 DOM 操作之前图表存在于您的 DOM 中。