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

Posted 2023-02-16

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

【英文标题】：chart.js Failed to create chart: can't acquire context from the given item

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

【参考方案1】：

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

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

<canvas id="myChart"  ></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,
                ,
            ,
        ,
    );
);