chart.js 无法创建图表：无法从给定项目获取上下文

Question

我从来没有进入过节点，所以我很确定我在这里做错了很多事情，因为我根本无法通过谷歌搜索找到任何信息。

我有一个 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 目录放在我的服务器可以提供它们的地方….并验证它们正在被提供，但是当我尝试构建图表时出现此错误。我从他们的文档中获取了所有图表代码，所以我很确定那部分是正确的，但我不明白为什么会出现此错误。

原文由 Joff 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

调用构造函数时，您没有传递画布的二维上下文 ( ctx )。从 文档 中：

要创建图表，我们需要实例化 Chart 类。为此，我们需要传入要绘制图表的节点、jQuery 实例或画布的 2d 上下文。

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

确保在创建 Chart.js 对象的脚本 之前 在 html 中声明 canvas 标签。否则，脚本将执行并尝试查找对不存在的画布的引用。在脚本中，可以使用以下任何格式来获取对画布的引用，然后将其传递给 Chart.js 构造函数。

 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 */}
}

原文由 rckrd 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

出现相同错误的另一个原因是，如果 id 引用的元素不是 <canvas> 。我的 HTML 源代码中有一个 <div> 元素，当然它不起作用。

原文由 mavroprovato 发布，翻译遵循 CC BY-SA 3.0 许可协议