VM5111:1249未捕获类型错误:无法读取属性'x'为null

VM5111:1249 Uncaught TypeError: Cannot read property 'x' of null

本文关键字：属性 null 读取 1249 类型 VM5111 错误      更新时间：2023-09-26

你好，我有这个错误，似乎无法理解。我正在学习谷歌饼图，并能够使用谷歌api提供的示例。但现在我打算将div悬停，并使piechat爆炸。当鼠标离开div时，它会返回到一个正常的piechart。但是当我悬停在div上时出现了一个错误。以下是我的代码：

$(document).ready(function() {
    google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
    
        var data = google.visualization.arrayToDataTable([
            ['Task', 'Hours per Day'],
            ['Work',     11],
            ['Eat',      2],
            ['Commute',  2],
            ['Watch TV', 2],
            ['Sleep',    7]
        ]);
      
        var options = {
            title: 'My Daily Activities'
        };
      
        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
      
        chart.draw(data, options);
    }
    
    
    var div1 = document.getElementById('piechart');
    
    $(div1).mouseover(function(){
        google.charts.setOnLoadCallback(drawChart1);
    });
    function drawChart1() {
        var data = google.visualization.arrayToDataTable([
            ['Language', 'Speakers (in millions)'],
            ['Assamese', 13], ['Bengali', 83], ['Bodo', 1.4],
            ['Dogri', 2.3], ['Gujarati', 46], ['Hindi', 300],
            ['Kannada', 38], ['Kashmiri', 5.5], ['Konkani', 5],
            ['Maithili', 20], ['Malayalam', 33], ['Manipuri', 1.5],
            ['Marathi', 72], ['Nepali', 2.9], ['Oriya', 33],
            ['Punjabi', 29], ['Sanskrit', 0.01], ['Santhali', 6.5],
            ['Sindhi', 2.5], ['Tamil', 61], ['Telugu', 74], ['Urdu', 52]
        ]);
      
        var options = {
            title: 'Indian Language Use',
            legend: 'none',
            pieSliceText: 'label',
            slices: {  4: {offset: 0.2},
                      12: {offset: 0.3},
                      14: {offset: 0.4},
                      15: {offset: 0.5},
            },
        };
      
        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);
    }
});
<div id="piechart" style="width: 900px; height: 500px;"></div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
 <script type="text/javascript" src="pie_chart.js"></script>

这里有一个在同一图表上同时使用mouseover和mouseout的示例

使用全页面视图，它似乎工作不太顺利，并不总是捕获mouseout。。。

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});
function drawChart() {
  var data = google.visualization.arrayToDataTable([
      ['Task', 'Hours per Day'],
      ['Work',     11],
      ['Eat',      2],
      ['Commute',  2],
      ['Watch TV', 2],
      ['Sleep',    7]
  ]);
  var options = {
    backgroundColor: 'cyan',
    title: 'My Daily Activities',
    legend: 'none'
  };
  var data1 = google.visualization.arrayToDataTable([
    ['Language', 'Speakers (in millions)'],
    ['Assamese', 13], ['Bengali', 83], ['Bodo', 1.4],
    ['Dogri', 2.3], ['Gujarati', 46], ['Hindi', 300],
    ['Kannada', 38], ['Kashmiri', 5.5], ['Konkani', 5],
    ['Maithili', 20], ['Malayalam', 33], ['Manipuri', 1.5],
    ['Marathi', 72], ['Nepali', 2.9], ['Oriya', 33],
    ['Punjabi', 29], ['Sanskrit', 0.01], ['Santhali', 6.5],
    ['Sindhi', 2.5], ['Tamil', 61], ['Telugu', 74], ['Urdu', 52]
  ]);
  var options1 = {
    backgroundColor: 'cyan',
    title: 'Indian Language Use',
    legend: 'none',
    pieSliceText: 'label',
    slices: {
      4: {offset: 0.2},
      12: {offset: 0.3},
      14: {offset: 0.4},
      15: {offset: 0.5},
    },
  };
  var div1 = document.getElementById('piechart');
  var div2 = document.getElementById('msg');
  $(div1).mouseover(function(){
    div2.innerHTML = 'over'
    chart.draw(data1, options1);
  });
  $(div1).mouseout(function(){
    div2.innerHTML = 'out'
    chart.draw(data, options);
  });
 
  var chart = new google.visualization.PieChart(div1);
  chart.draw(data, options);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="piechart"></div>
<div id="msg"></div>

相关文章：