[解決済み] chart.js チャートの作成に失敗しました: 与えられたアイテムからコンテキストを取得できません。

質問

私はnodeに入ったことがないので、ググっても全く情報が見つからないので、私がここで何か大きな間違いを犯しているのは間違いないと思います。

私はdjangoのサイトを持っていて、JSのチャート作成ライブラリが欲しかったので、chart.jsを選びました。

私はインストールし、ドキュメントを気に入りましたが、その後、私は何をすべきか分からないので、空白を埋め、できるだけ彼らのガイドに従おうとしました。私のhtmlはこんな感じです...。

<script src="/public/node_modules/chart.js/dist/Chart.js"></script>

<canvas id="myChart" width="400" height="400"></canvas>

<script>    
    var ctx = document.getElementById("myChart");
    console.log(ctx);

    var options = {}

    var data = {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [
            {
                label: "My First dataset",
                fill: false,
                lineTension: 0.1,
                backgroundColor: "rgba(75,192,192,0.4)",
                borderColor: "rgba(75,192,192,1)",
                borderCapStyle: 'butt',
                borderDash: [],
                borderDashOffset: 0.0,
                borderJoinStyle: 'miter',
                pointBorderColor: "rgba(75,192,192,1)",
                pointBackgroundColor: "#fff",
                pointBorderWidth: 1,
                pointHoverRadius: 5,
                pointHoverBackgroundColor: "rgba(75,192,192,1)",
                pointHoverBorderColor: "rgba(220,220,220,1)",
                pointHoverBorderWidth: 2,
                pointRadius: 1,
                pointHitRadius: 10,
                data: [65, 59, 80, 81, 56, 55, 40],
                spanGaps: false,
            }
        ]
    };

    var myChart = new Chart({
        type: 'line',
        data: data,
        options: options
    })
</script>

私はただ、あるサンプルを動作させようとしているのです。npmでダウンロードしたnode_modulesのディレクトリを、サーバーが提供できる場所に置き、提供されていることを確認したのですが、チャートを作ろうとするとこのエラーが発生します。チャートコードは全てドキュメントから引用しているので、その部分は間違いないと思うのですが、なぜこのようなエラーが発生するのかが分かりません。

どうすればいいですか？

canvas の 2 次元コンテキストを渡していない ( ctx ) のコンストラクタを呼び出しています。からの ドキュメント :

チャートを作成するには、Chart クラスのインスタンスを作成する必要があります。これを行うには のノード、jQuery インスタンス、または 2 次元コンテキストを渡す必要があります。 のキャンバスに描画します。

<canvas id="myChart" width="400" height="400"></canvas>

以下のいずれかの形式を使用することができる。

var ctx = document.getElementById('myChart'); // node
var ctx = document.getElementById('myChart').getContext('2d'); // 2d context
var ctx = $('#myChart'); // jQuery instance
var ctx = 'myChart'; // element id

var myChart = new Chart(ctx, {
  type: 'line',
  data: {/* Data here */},
  options: {/* Options here */}
}