Angular 5 和 chart.js ts 错误

Question

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

纱线添加chart.js --save

纱线添加@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,
          }
        }],
      }
  }
});

错误：

 ERROR in src/app/components/home/detail/detail.component.ts(253,77): error TS2345: Argument of type '{ type: string; data: { labels: string[]; datasets: { fill: true; label: boolean; backgroundColor...' is not assignable to parameter of type 'ChartConfiguration'.
  Types of property 'data' are incompatible.
    Type '{ labels: string[]; datasets: { fill: true; label: boolean; backgroundColor: string[]; data: numb...' is not assignable to type 'ChartData'.
      Types of property 'datasets' are incompatible.
        Type '{ fill: true; label: boolean; backgroundColor: string[]; data: number[]; }[]' is not assignable to type 'ChartDataSets[]'.
          Type '{ fill: true; label: boolean; backgroundColor: string[]; data: number[]; }' is not assignable to type 'ChartDataSets'.
            Types of property 'label' are incompatible.
              Type 'boolean' is not assignable to type 'string'.

Answer 1

尝试angular2-chartjs，这是一个非常有用的 chartjs 角度库

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

在 app.module.ts 中导入并声明ChartModule

...
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>

用于实现单杠的预览链接https://stackblitz.com/edit/angular-geq984