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引用的元素不是<canvas>。我的HTML源代码中有一个<div>元素，当然它没有用。

Answer 2

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

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

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

可以使用以下任何格式：

var ctx = document.getElementById('myChart');
var ctx = document.getElementById('myChart').getContext('2d');
var ctx = $('#myChart');
var ctx = 'myChart';

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

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

你可以使用

在模板中添加这个 <activity android:name=".ThirdActivity" android:theme="@style/AppTheme2">

将其添加到您的组件

let input = [ { data: [1,2,3] }, { data: [4,5,6] } ];

let result = input.reduce((result, entry) => result.concat(entry.data), []);

console.log(result);

准备好时画这个

<canvas #myCanvas width="500" height="300"></canvas>

Answer 5

出现此错误是因为我试图在构造函数而不是 ngAfterContentInit

上设置图表

我个人将 canvas id 用作上下文字符串

没有问题

db.col.aggregate([
    {
        $match: { $expr: { $or: $or } }
    },
    // other aggregation stages
])

Answer 6

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

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

Answer 7

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

Answer 8

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

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

Answer 9

我在Angular 9中使用Chart.JS。

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

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

并且您在实例化图表时正确地拥有了它-

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

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

要解决此问题，您可以从父级中删除*ngIf，也可以在开头用一个空数组-myChart: []初始化图表变量。

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

9 个答案: