Question

window.onload = function() {
 var gradientStroke = 'rgba(0, 119, 220, 0.6)',
 gradientFill = 'rgba(0, 119, 220, 0.4)';

var ctx = document.getElementById('chart').getContext("2d");

var myChart = new Chart(ctx, {
type: 'line',
data: {
   labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL"],
   datasets: [{
      label: "Data",
      borderColor: gradientStroke,
      pointBorderColor: gradientStroke,
      pointBackgroundColor: gradientStroke,
      pointHoverBackgroundColor: gradientStroke,
      pointHoverBorderColor: gradientStroke,
      pointBorderWidth: 5,
      pointHoverRadius: 5,
      pointHoverBorderWidth: 1,
      pointRadius: 3,
      fill: true,
      backgroundColor: gradientFill,
      borderWidth: 2,
      data: [50, 80, 130, 65, 100, 66, 86],
   }]
},
options: {
   responsive: false,
   legend: {
      position: "top"
   },
   scales: {
      yAxes: [{
         ticks: {
            fontColor: "rgba(255,255,255,0.5)",
            fontStyle: "bold",
            beginAtZero: true,
            maxTicksLimit: 5,
            padding: 20
         },
         gridLines: {
            drawTicks: false,
            display: false
         }

      }],
      xAxes: [{
         gridLines: {
            zeroLineColor: "rgba(255,255,255,0.5)"
         },
         ticks: {
            padding: 20,
            fontColor: "rgba(255,255,255,0.5)",
            fontStyle: "bold"
         }
      }]
   }
}
});
function machs() {
   addData(myChart, [45, 50, 30, 34, 61, 53, 42], 0);
   } 
function addData(chart, data, datasetIndex) {
      chart.data.datasets[datasetIndex].data = data;
      chart.update();
      }

   }

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />  
        <title>JavaScript Learning</title>
        
         
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>

        
    </head>

<body>
    <form>   
        <input type="button" id = "Hallo" value="Machen" onclick="machs()" />
    </form>

     <div>
<canvas id="chart" width="400" height="400" ></canvas>
     </div>
          
  
</body>
        

</html>

该程序的问题是，如果我按下按钮，它应该使用函数machen（），但不是。如果我删除window.onload ...，那就可以了。

我想使用window.onload，否则我需要将.js文件中的放到正文中，但是我希望它们放在头部。

我需要在一页上使用3个chartjs。

使用window.onload之后，“功能未定义”

0 个答案: