Question

我目前正在使用Angular 6和angular-chart，我正在尝试使用渐变为条形图着色，但是angular-cli显示了编译错误：

error TS1068: Unexpected token. A constructor, method, accessor, or property was expected.
src/app/home/client/employee-home/employee-home.component.ts(38,6): error TS1128: Declaration or statement expected.
src/app/home/client/employee-home/employee-home.component.ts(38,40): error TS1109: Expression expected.
src/app/home/client/employee-home/employee-home.component.ts(55,17): error TS1005: ';' expected.
src/app/home/client/employee-home/employee-home.component.ts(57,14): error TS1005: ';' expected.
src/app/home/client/employee-home/employee-home.component.ts(60,1): error TS1128: Declaration or statement expected.

在这行代码中：

let ctx: CanvasRenderingContext2D =  this.canvasRef.nativeElement.getContext('2d');

我的html：

   <canvas #canvas id="canvas" baseChart class="chart" [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [colors]="barChartColors" [legend]="barChartLegend" [chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>

打字稿：

import { Component, OnInit,ViewChild,ElementRef } from '@angular/core';

@Component({
  selector: 'app-employee-home',
  templateUrl: './employee-home.component.html',
  styleUrls: ['./employee-home.component.css']
})
export class HomeComponent implements OnInit {

  @ViewChild('canvas') canvasRef: ElementRef;

public barChartOptions: any = {
      scaleShowVerticalLines: false,
      responsive: true,
      maintainAspectRatio: false

    };

     public barChartLabels: string[] = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio'];

     public barChartType = 'bar';
     public barChartLegend = false;

     public barChartData: any[] = [
      { data: [65, 59, 80, 81, 56, 55, 40], label: 'Horas extra' }
    ];

  let ctx: CanvasRenderingContext2D =  this.canvasRef.nativeElement.getContext('2d');



var gradientStroke = ctx.createLinearGradient(0, 200, 0, 100)

gradientStroke.addColorStop(0,"rgba(0,0,240,0.6)" );
gradientStroke.addColorStop(0.7, "rgba(255, 255, 51,0.5)");
gradientStroke.addColorStop(1, "rgba(248,64,0,0.6)");

     public barChartColors: Array<any> = [


      {

        backgroundColor: ["red", "orange", "green", "blue", "yellow", "purple"], 
        borderColor: 'rgba(148,159,177,1)',
        pointBackgroundColor: 'rgba(148,159,177,1)',
        pointBorderColor: '#fff',
        pointHoverBackgroundColor: '#fff',
        pointHoverBorderColor: 'rgba(148,159,177,0.8)'
      }

    ];



  constructor() { };

  ngOnInit() {
  };

}

我尝试了一些在此论坛上发布的解决方案，但没有结果。我如何创建渐变以供以后使用？

Angular 6无法创建CanvasRenderingContext2D

0 个答案: