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目录放在我的服务器将为其提供服务的地方....并验证它们正在服务,但是当我尝试构建图表时,我收到此错误.我从他们的文档中获取了所有图表代码,因此我非常确定该部分是正确的,但我不明白为什么我会收到此错误.

Answer 1

获得相同错误的另一个原因是,id引用的元素不是a <canvas>.<div>我的HTML源代码中有一个元素,当然它不起作用.

Answer 2

ctx在调用构造函数时,您没有传递context().
这将是创建新图表的正确方法:

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

Answer 3

我参加聚会有点晚了,但如果其他开发者到达这篇文章,请确保你没有参考文档或窗口.有角度的团队不鼓励直接访问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>

Answer 4

另外，java 脚本必须位于画布声明之后。

Answer 5

出现此错误是因为我尝试在构造函数而不是ngAfterContentInit上设置图表

我个人对于将画布 id作为上下文字符串没有任何问题

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