代码之家  ›  专栏  ›  技术社区  ›  devmrh

角度5图表。js无法创建图表

  •  1
  • devmrh  · 技术社区  · 7 年前

    我最近添加了图表。js到我的angular 5项目,我正在尝试创建线型图,但我有一个错误: Failed to create a chart: can't acquire context from the given item 在浏览器控制台中,如何解决此问题?

    public chart = [];
    ngOnInit() {
    this.chart = new Chart('canvas', {
          type: 'line',
          data: {
            labels: ["a", "b", "c", "d", "e"],
            datasets: [
              {
                title: "Some Data",
                values: [25, 40, 30, 35, 100],
                borderColor: "#3cba9f",
                fill: false
              },
            ]
          },
          options: {
            legend: {
              display: false
            },
            scales: {
              xAxes: [{
                display: true
              }],
              yAxes: [{
                display: true
              }],
            }
          }
        });
    }
    

    组件html:

    <div *ngIf="chart">
      <canvas #canvas id="canvas">{{ chart }}</canvas>
    </div>
    
    2 回复  |  直到 7 年前
        1
  •  4
  •   erajuan    7 年前

    在组件中。html

    问题是ngIf。只要*ngIf==false,画布就不存在,因此图表无法找到画布。js。将标记更改为,它应该可以工作

    <div [hidden]="!chart">
      <canvas id="canvas">{{ chart }}</canvas>
    </div>
    
        2
  •  2
  •   Radonirina Maminiaina    7 年前

    作为 documentation 表示:

    要创建图表,我们需要实例化chart类。为此, 我们需要传入 绘制图表的画布

    因此,您的代码应该如下所示:

    var canvas = <HTMLCanvasElement> document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    this.chart = new Chart(ctx, {
          type: 'line',
          data: {
            labels: ["a", "b", "c", "d", "e"],
            datasets: [
              {
                title: "Some Data",
                values: [25, 40, 30, 35, 100],
                borderColor: "#3cba9f",
                fill: false
              },
            ]
          },
          options: {
            legend: {
              display: false
            },
            scales: {
              xAxes: [{
                display: true
              }],
              yAxes: [{
                display: true
              }],
            }
          }
        });
    }