与$（document）.ready有一些范围问题

Question

$(document).ready(function(){

  var data = [
    {
        value: 30,
        color:"#F7464A",
        highlight: "#FF5A5E",
        label: "Red"
    },
    {
        value: 30,  
        color: "#46BFBD",
        highlight: "#5AD3D1",
        label: "Green"
    },
    {
        value: 30,
        color: "#FDB45C",
        opacity: 30,
        highlight: "#FFC870",
        label: "Yellow"
    }
];


    var ctx = $('#chart-area').get(0).getContext("2d");
    var myDoughnut = new Chart(ctx).Doughnut(data, {
            responsive : true,
            animateRotate: true,
            animateScale: false,
            percentageInnerCutout: 70,
            animationEasing : "easeInOutQuart"
    });

  function updateData() {
      data.forEach(function(entry) {
          entry.value += 10;
      });
  }

  document.getElementById("button").onclick = function() {
    updateData(); // for demo only
    var index = 0;

    myDoughnut.segments.forEach(function(segment) {
      segment.value = data[index++].value;
    });
      myDoughnut.update();
  };
});

有没有阅读＆＃34; myDoughnut＆＃34;的问题。这是控制台中提供的错误：未捕获的TypeError：无法读取属性＆＃39; forEach＆＃39; undefined users.js？body = 1:50

然而，当我在另一个文件上测试它并且在没有$（document）.ready或window onload的页面底部有脚本时，它可以很好地工作。