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

【问题标题】：chart.js Failed to create chart: can't acquire context from the given itemchart.js 无法创建图表：无法从给定项目获取上下文
【发布时间】：2017-05-07 22:39:39
【问题描述】：

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

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

【问题讨论】：

标签： javascript node.js chart.js

【解决方案1】：

调用构造函数时，您没有传递画布的 2d 上下文 (ctx)。来自documentation：

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

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

【讨论】：

很好的答案！谢谢！
另一个原因可能是您在 canvas 标签之前添加了脚本，在添加 canvas html 标签之后添加脚本。

【解决方案2】：

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

【讨论】：

我有这个确切的错字！
哇，谢谢，伙计。我真的很困惑为什么它不起作用，直到我删除了 div 并将 id 放在 canvas 标签中。

【解决方案3】：

我参加聚会有点晚了，但如果其他开发人员看到这篇文章，请确保您没有引用文档或窗口。 Angular 团队不鼓励直接访问 dom 变量。改用 ElementRef

import { Component, OnInit, ElementRef } from '@angular/core';
@Component({
  selector: 'my-compo',
  templateUrl: 'mycompo.html',
})
export class MyCompo implements OnInit {
   myChart:any;
   constructor(private elementRef: ElementRef) {
   }

  ngOnInit(){
   this.chartit();
  }

  chartit(){
     let htmlRef = this.elementRef.nativeElement.querySelector(`#yourCavasId`);
     this.myChart = new Chart(htmlRef, {
        //your data here
     });
  }

}

@mavroprovato 建议的 HTML

<canvas id="yourCavasId" ></canvas>

【讨论】：

看起来 querySelector 正在选择图表的 parent 元素。即：<div #myCanvas> <canvas id="canvas">{{ chart }}</canvas> </div>

【解决方案4】：

你可以使用

将此添加到您的模板中
<canvas #myCanvas width="500" height="300"></canvas>

将此添加到您的组件中

@ViewChild('myCanvas') canvasRef: ElementRef;
  constructor()

当准备好绘制时调用这个

 this.ctx = this.canvasRef.nativeElement.getContext('2d');
         this.chart = new Chart(this.ctx, {....})

【讨论】：

【解决方案5】：

出现此错误是因为我试图在 constructor 而不是 ngAfterContentInit

上设置图表

我个人认为将 canvas id 作为上下文字符串没有问题

this.chart = new Chart('myChartId', {...})

【讨论】：

【解决方案6】：

只是一个小提示。如果您通过添加上下文解决了问题，但图表仍未显示，则将 <canvas> 元素放在 <div> 元素中，否则将不会显示。

参考：Charts.js sets canvas width/height to 0 and displays nothing

【讨论】：

请使用 cmets 部分

【解决方案7】：

就我而言，我在画布上使用 ngIf，然后将其移至其父 div。在这两种情况下，我都收到此错误：chart.js 无法创建图表：无法从给定项目获取上下文。

即使应用了上述所有方法，我也无法解决它。所以我将 ngIf 更改为 ngStyle 并显示：（条件）？无：阻止。它对我有用。

【讨论】：

【解决方案8】：

我正在使用带有 Angular 9 的 Chart.JS。

如果 ID 与图表的实例化不匹配，通常会发生这种情况。确保您在canvas 元素中具有这样的 ID 属性 -

<canvas id="myCanvasId">{{ myChart }}</canvas>

你在实例化图表时正确地做到了这一点 -

this.myChart = new Chart('myCanvasId', {
....
}

在另一个屏幕上，由于<canvas> 的父元素上存在*ngIf，我遇到了同样的问题。

要克服这个问题，您可以从父级中删除 *ngIf 或在开头使用空数组初始化图表变量 - myChart: []。

【讨论】：

【解决方案9】：

另外，java脚本必须在canvas的声明之后。

【讨论】：

【解决方案10】：

也遇到了这个问题，我的解决方法是将图表创建放在 DOMContentLoaded addEventListener 中。当然，在这样做之前必须满足 CDN 和画布先决条件

document.addEventListener("DOMContentLoaded", function () {

    const ctx = document.getElementById("myChart")

    const myChart = new Chart(ctx, {
        type: "bar",
        data: {
            labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
            datasets: [
                {
                    label: "# of Votes",
                    data: [12, 19, 3, 5, 2, 3],
                    backgroundColor: [
                        "rgba(255, 99, 132, 0.2)",
                        "rgba(54, 162, 235, 0.2)",
                        "rgba(255, 206, 86, 0.2)",
                        "rgba(75, 192, 192, 0.2)",
                        "rgba(153, 102, 255, 0.2)",
                        "rgba(255, 159, 64, 0.2)",
                    ],
                    borderColor: [
                        "rgba(255, 99, 132, 1)",
                        "rgba(54, 162, 235, 1)",
                        "rgba(255, 206, 86, 1)",
                        "rgba(75, 192, 192, 1)",
                        "rgba(153, 102, 255, 1)",
                        "rgba(255, 159, 64, 1)",
                    ],
                    borderWidth: 1,
                },
            ],
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true,
                },
            },
        },
    });
});

【讨论】：