javascript - Chart.js 属性 'type' 的类型不兼容。类型 'string' 不可分配给类型 '"行” | "bar"| "scatter"

Question

client:159 src/app/analytics-page/analytics-page.component.ts:211:26 - error TS2345: Argument of type '{ type: string; options: { responsive: boolean; }; data: { labels: string[]; datasets: { label: string; data: number[]; borderColor: string; steppedLine: boolean; fill: boolean; }[]; }; }' is not assignable to parameter of type 'ChartConfiguration<"line" | "bar" | "scatter" | "bubble" | "pie" | "doughnut" | "polarArea" | "radar", number[], string>'.
  Types of property 'type' are incompatible.
    Type 'string' is not assignable to type '"line" | "bar" | "scatter" | "bubble" | "pie" | "doughnut" | "polarArea" | "radar"'.

211       new Chart(gainCtx, createChartConfig(gainConfig))

import {AfterViewInit, Component, ElementRef, OnDestroy, ViewChild} from '@angular/core'
import {AnalyticsService} from '../shared/services/analytics.service'
import {AnalyticsPage, ChartConfig} from '../shared/interfaces'
import {Chart} from 'chart.js'
import {Subscription} from 'rxjs'

@Component({
  selector: 'app-analytics-page',
  templateUrl: './analytics-page.component.html',
  styleUrls: ['./analytics-page.component.scss']
})
export class AnalyticsPageComponent implements AfterViewInit, OnDestroy {

  @ViewChild('gain') gainRef!: ElementRef
  @ViewChild('order') orderRef!: ElementRef

  aSub!: Subscription
  average!: number
  pending = true

  constructor(private service: AnalyticsService) {
  }

  ngAfterViewInit() {
    const gainConfig: any = {
      label: 'Выручка',
      color: 'rgb(255, 99, 132)'
    }

    const orderConfig: any = {
      label: 'Заказы',
      color: 'rgb(54, 162, 235)'
    }

    this.aSub = this.service.getAnalytics().subscribe((data: AnalyticsPage) => {
      this.average = data.average

      gainConfig.labels = data.chart.map(item => item.label)
      gainConfig.data = data.chart.map(item => item.gain)

      orderConfig.labels = data.chart.map(item => item.label)
      orderConfig.data = data.chart.map(item => item.order)

      // **** Gain ****
      // gainConfig.labels.push('08.05.2018')
      // gainConfig.labels.push('09.05.2018')
      // gainConfig.data.push(1500)
      // gainConfig.data.push(700)
      // **** /Gain ****

      // **** Order ****
      // orderConfig.labels.push('08.05.2018')
      // orderConfig.labels.push('09.05.2018')
      // orderConfig.data.push(8)
      // orderConfig.data.push(2)
      // **** /Order ****

      const gainCtx = this.gainRef.nativeElement.getContext('2d')
      const orderCtx = this.orderRef.nativeElement.getContext('2d')
      gainCtx.canvas.height = '300px'
      orderCtx.canvas.height = '300px'

      new Chart(gainCtx, createChartConfig(gainConfig))
      new Chart(orderCtx, createChartConfig(orderConfig))

      this.pending = false
    })
  }

  ngOnDestroy() {
    if (this.aSub) {
      this.aSub.unsubscribe()
    }
  }

}


function createChartConfig({labels, data, label, color}: ChartConfig) {
  return {
    type: 'line',
    options: {
      responsive: true
    },
    data: {
      labels,
      datasets: [
        {
          label, data,
          borderColor: color,
          steppedLine: false,
          fill: false
        }
      ]
    }
  }
}

问题出在 type: 'line', . Chart.js 不工作，它不适用于任何类型，抛出错误。

Answer 1

看起来您的 TypeScript 编译器正在提示，因为图表 type property 是特定类型而不是字符串。
选项 1:
导入 ChartType 并转换 type作为ChartType .

import {  Chart, ChartType, ...} from 'chart.js';

 ...

function createChartConfig({labels, data, label, color}: ChartConfig) {
  return {
    type: 'line' as ChartType,
    options: {
   ...

选项 2: (更简单/hacky的方式)
将整个配置转换为 any。

new Chart(gainCtx, createChartConfig(gainConfig) as any);

在任何情况下，您都需要导入和注册所需的 Controller 、元素、秤等。注册 registerables注册所有内容，但最好只注册特定图表所需的内容。见 Integration instructions了解更多信息。

import { Chart, registerables } from 'chart.js';
...
Chart.register(...registerables);