Angular、打字稿、google 图表 - 类型 (Date|number)[][] 不可分配给类型 Array<Array<string|number>>

Question

我使用 angular 8 和 google 图表模块。

我试图创建一个 Google Calendar Chart 以将其添加到其他一些已经工作的 google 图表中。

然而，在我component.html传递数据时，我收到 Type (Date|number)[][] is not assignable to type Array<Array<string|number>> 的错误（IDE 发出的警告）。我不知所措，因为对我来说，我似乎按要求传递了日期和值的二维数组。

虽然我的前端确实可以编译，但是当我转到带有 google 日历的页面时，页面 crashes/gets 卡住了。

我的东西。component.html:

<google-chart
            [type]="Calendar"
            [data]="calendarChartData"  <----------------------- HERE IS THE ERROR
            [columnNames]="calendarChartColumnNames"
            [options]="calendarChartOptions">
</google-chart>

我的something.component.ts:

calendarChartOptions = {
    title: 'Some title',
    height: 350,
    calendar: {
      dayOfWeekLabel: {
        fontName: 'Times-Roman',
        fontSize: 12,
        color: '#1a8763',
        bold: true,
        italic: true,
      },
      dayOfWeekRightSpace: 10,
      cellSize: 10,
    }
  };
  calendarChartColumnNames = ['Date', 'someNumber'];
  calendarChartData = [
    [new Date(2019, 3, 13), 333],
    [new Date(2019, 9, 16), 372],
    [new Date(2019, 9, 17), 5333],
    [new Date(2019, 9, 18), 3702],
    [new Date(2019, 9, 19), 3103],
    [new Date(2019, 9, 20), 2244],
    [new Date(2019, 9, 21), 9531],
    [new Date(2019, 9, 22), 5503]
  ];

我的something.module.ts:

...
import { GoogleChartsModule } from 'angular-google-charts';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
...

Answer 1

我以前没有使用过 Google 图表...

从错误看来，您需要做的就是将日期转换为字符串..

...
calendarChartData = [
    [new Date(2019, 3, 13).toISOString(), 333],
    [new Date(2019, 3, 13).toDateString(), 333], // not sure exactly which format the module requires.
    ...
  ];

Angular、打字稿、google 图表 - 类型 (Date|number)[][] 不可分配给类型 Array<Array<string|number>>

Angular, typescript, google charts - Type (Date|number)[][] is not assignable to type Array<Array<string|number>>

google-visualization

typescript

angular