Angular 角度5和chart.js ts错误

在Angular 5中，我安装了chartjs及其类型，如下所示：

添加chart.js--保存

纱线添加@types/chartjs--dev

我有这样的图表，一切看起来都很好，但在终端我有以下错误。。如何解决此问题，，谢谢：

我的图表此代码在ngAfterinit中：

import * as Chart from 'chart.js';


new Chart(<HTMLCanvasElement>document.getElementById("user-rev-chart"), {
  type: 'horizontalBar',
  data: {
    labels: ["5 star", "4 start", "3 start", "2 star", "1 star"],
    datasets: [
      {
        fill: true,
        label: false,
        backgroundColor: ["#a1a7b3", "#a1a7b3", "#a1a7b3", "#a1a7b3", "#a1a7b3"],
        data: [10, 2, 5, 4, 5]
      }
    ]
  },
  options: {
    maintainAspectRatio: false,
    responsive: false,
    legend: {display: false},
    title: {
      display: false,
      text: ''
    },
    scales:
      {
        yAxes: [{
          // barPercentage: 0.4,
          barThickness: 20,
          barPercentage: .5,
          categoryPercentage: .2,
          isFixedWidth: true,
          //Number - Pixel width of the bar
          barWidth: 20,
          gridLines: {
            display: false
          },
          ticks: {
            min: 0,
            stepSize: 1,
            fixedStepSize: 1,
          }
        }],
        xAxes: [{
          display: false,
          gridLines: {
            display: false
          },
          ticks: {
            min: 0,
            stepSize: 1,
            fixedStepSize: 1,
          }
        }],
      }
  }
});

试试这是一个非常有用的chartjs角度库

npm install angular2-chartjs chart.js --save
npm install @types/chart.js --save

在app.module.ts中导入并声明图表模块

...
import { ChartModule } from 'angular2-chartjs';

@NgModule({
  imports:      [...,  ChartModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

在AppComponent.ts中声明图表图表、类型、数据、选项属性并在ngOnInit方法中赋值

...
@ViewChild(ChartComponent) chart: ChartComponent;
type;
data;
options;
...

ngOnInit() {

    this.type = 'horizontalBar';
    this.data = {
        labels: ["5 star", "4 start", "3 start", "2 star", "1 star"],
        datasets: [
            {
                fill: true,
                label: false,
                backgroundColor: ["#a1a7b3", "#a1a7b3", "#a1a7b3", "#a1a7b3", "#a1a7b3"],
                data: [10, 2, 5, 4, 5]
            }
        ]
    }
    this.options = {
        maintainAspectRatio: false,
        responsive: false,
        legend: { display: false },
        title: {
            display: false,
            text: ''
        },
        scales:
            {
                yAxes: [{
                    // barPercentage: 0.4,
                    barThickness: 20,
                    barPercentage: .5,
                    categoryPercentage: .2,
                    isFixedWidth: true,
                    //Number - Pixel width of the bar
                    barWidth: 20,
                    gridLines: {
                        display: false
                    },
                    ticks: {
                        min: 0,
                        stepSize: 1,
                        fixedStepSize: 1,
                    }
                }],
                xAxes: [{
                    display: false,
                    gridLines: {
                        display: false
                    },
                    ticks: {
                        min: 0,
                        stepSize: 1,
                        fixedStepSize: 1,
                    }
                }],
            }
    }
}

在AppComponent.html中模板包括图表标记

...
<chart #chart [type]="type" [data]="data" [options]="options" style="height: 100%"></chart>

。。。

---

用于实现水平条的预览链接

检查打印文档时获得的内容。getElementById（“用户修订图表”）我获得了canvas id=“用户修订图表”\u ngcontent-c8=“”dir=“rtl”height=“200”width=“300”ng reflect dir=“rtl”>我最近遇到了这个问题。。。虽然我的图表配置是在

new chart（）…

声明之外声明的。我所做的是添加一个类型，如so

let data:ChartConfiguration={type:'horizontalBar….}

，这样我就能够看到导致类型错误的属性。。。希望这有帮助

...
<chart #chart [type]="type" [data]="data" [options]="options" style="height: 100%"></chart>