chart.js图表​​未显示在网页上

Question

我对javascript很陌生，我的任务是创建一个条形图以显示数据。我搜索并发现了chart.js。当我在编辑器中尝试代码时，一切看起来都很完美，但是当我在Web浏览器中检查工作时，该图表根本不会显示。我确定我缺少基本知识，但是我不确定是什么。 subscriptions-graph.js是我存放js代码的地方，也是教授所要求的。

在我的HTML代码中，我有：

<script src="js/subscriptions-graph.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

<div className="container">
  <canvas id="myChart" width="200" height="30"></canvas>
</div>

我的JavaScript代码是：

window.onload = function() {

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["January", "February", "March", "April", "May","June", "July", "August", "September", "October", "November", "December"],
        datasets: [{
            label: ' # of Subscribers',
            data: [40, 10, 100, 65, 75, 120, 121, 175, 220, 275, 300, 15],
            backgroundColor: [
                'rgba(255, 99, 132)',
                'rgba(54, 162, 235)',
                'rgba(255, 206, 86)',
                'rgba(75, 192, 192)',
                'rgba(153, 102, 255)',
                'rgba(255, 159, 64)',
                'rgba(55, 99, 132)',
                'rgba(154, 162, 235)',
                'rgba(255, 206, 186)',
                'rgba(75, 192, 92)',
                'rgba(253, 102, 255)',
                'rgba(255, 159, 175)'
            ]

        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    },
});
}