由网友(討恹7.騙)分享简介：const gainContext = this.gainRef.nativeElement.getContext('2d')gainContext.canvas.height = '300px'new Chart(gainContext, createChartConfig(gainConfig))function...

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

  new Chart(gainContext, createChartConfig(gainConfig))


function createChartConfig({type, labels, data, label, color}: ChartConfig): ChartConfiguration<"line">{

  console.log('3 Chart.defaults', Chart.defaults)

  return {
type: "line",
data: {
  labels,
  datasets: [
    {
      label,
      data,
      borderColor: color,
      stepped: false,
      fill: false
    }
  ]
}
  }

这不起作用:它无法识别官方文档中必须的类型属性.

This is not working: It not recognize the type property as it must in official documentation.

让 myChart = new Chart(gainContext, {类型:'线'，

let myChart = new Chart(gainContext, { type: 'line',

我做错了什么?

推荐答案

我们可以通过三种方式做到这一点

We can do this in three ways

通过导入:

By importing:

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

然后注册所有的组件

Chart.register(...registerables);

最后有一条单独的路径可以为您完成上述操作，在一行中:

finally there is an separate path to do just the above for you, in one line:

import Chart from 'chart.js/auto';

通过导入和注册@Tatyana Molchanova 评论的所需部分

By importing and registering the required part as commented by @Tatyana Molchanova

import { Chart, ChartConfiguration, LineController, LineElement, PointElement, LinearScale, Title} from 'chart.js' 

然后在实例化新图表之前将其注册到组件中

and then register it in component before instantiating new Chart

Chart.register(LineController, LineElement, PointElement, LinearScale, Title);