如何在chartjs数据集中为Object []使用x值中的日期，我收到一个错误：'TS2322：类型'字符串'不可分配给类型'数字'。

Posted 2023-03-16

【中文标题】如何在chartjs数据集中为Object []使用x值中的日期，我收到一个错误：\'TS2322：类型\'字符串\'不可分配给类型\'数字\'。

【英文标题】：How to use date in x value for Object[] in chartjs dataset, I am getting an error: 'TS2322: Type 'string' is not assignable to type 'number'.'如何在chartjs数据集中为Object []使用x值中的日期，我收到一个错误：'TS2322：类型'字符串'不可分配给类型'数字'。

【发布时间】：2021-12-28 15:47:02

【问题描述】：

我目前正在尝试为 Chartjs 中的数据集实现 Object[] 而不是 Primitive[]。我将 Angular 与 Chart.js 3.6.0 和 ng2-charts 3.0.0-rc.7 结合使用

line-chart.component.ts：

import  ChartConfiguration, ChartType  from 'chart.js';
import  BaseChartDirective  from 'ng2-charts';
import * as moment from "moment";

@Component(
  selector: 'app-line-chart',
  templateUrl: './line-chart.component.html',
  styleUrls: ['./line-chart.component.scss']
)
export class LineChartComponent implements OnInit 
....

public lineChartData: ChartConfiguration['data'] = 
    datasets: [
      
        data: [
          x: '2021', y: 12, > TS2322: Type 'string' is not assignable to type 'number'.
        ],
        label: 'FBSV',
      
    ],
    // empty for for dynamic structuring.
    labels: []
  ;

public lineChartOptions: ChartConfiguration['options'] = 
    plugins: 
      title: 
        display: true,
        text: this.title,
        color: '#25167A',
        font: 
          size: 15,
          weight: 'bold'
        
      ,
    ,
    elements: 
      line: 
        tension: 0.25 // creates smoother lines
      
    ,
    scales: 
      x: 
        display: true,
        title: 
          display: true,
          text: 'Year',
          color: '#25167A',
          font: 
            size: 15,
            weight: 'bold'
          
        ,
        type: 'time',
        time: 
          unit: 'year'
        
      ,
      y: 
        display: true,
        title: 
          display: true,
          text: 'Score',
          color: '#25167A',
          font: 
            size: 15,
            weight: 'bold'
          
        ,
        max: 100,
        min: 0,
        beginAtZero: true
      
    
  ;

  public lineChartType: ChartType = 'line';

  @ViewChild(BaseChartDirective) chart?: BaseChartDirective;

....

问题在于 Chart.js 3.6.0 文档中指出您应该能够使用非原始数据值： https://www.chartjs.org/docs/latest/general/data-structures.html

line-chart.component.html：

<canvas baseChart
              [data]="lineChartData"
              [options]="lineChartOptions"
              [type]="lineChartType">
      </canvas>

如何解决这个问题以便能够在 x 值中使用日期？

【参考方案1】：

您可以将自己的类型作为第二个参数传递给ChartConfiguration 接口，如下所示：

const lineChartData: ChartConfiguration<"line",  x: string, y: number []> = 
  type: "line",
  data: 
    labels: [],
    datasets: [
      
        data: [
           x: "test", y: 55 ,
           x: "hi", y: 20 ,
        ],
      ,
    ],
  ,
;

Typescript playground link

【讨论】：

这会给出错误：Type ChartConfiguration<"line", x: string, y: number[]> is not assignable to type ChartConfiguration<"bar" | "line" | "scatter" | "bubble" | "pie" | "doughnut" | "polarArea" | "radar", TData, TLabel>["data"] in the html for the lineChartData

虽然它在绑定lineChartData 或lineChartOptions 时会在html 页面中出现此错误，但它确实有效。感谢您的回答！