时间戳

首页 > 解决方案 > Angular Chartjs 错误 TS2304：找不到名称 OffscreenCanvasRenderingContext2D

angular - Angular Chartjs 错误 TS2304：找不到名称 OffscreenCanvasRenderingContext2D

问题描述

我正在使用带有 Angular 和 Ionic 的 chartjs：

安装：

HTML

<!-- Graph -->
<div class="chart">
  <canvas #myChart></canvas>
</div>

TS

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

Chart.register(...registerables);


const ctx = this.myChart.nativeElement;
this.chartHolder = new Chart(ctx, {
  type: 'doughnut',
  data,
  options
});

终端错误

ERROR in ../ node_modules / chart.js / types / index.esm.d.ts: 522: 5 - error TS2304: Cannot find name 'OffscreenCanvasRenderingContext2D'.
522 | OffscreenCanvasRenderingContext2D

        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  ./ node_modules / chart.js / types / index.esm.d.ts: 524: 5 - error TS2304: Cannot find name 'OffscreenCanvas'.
524 | OffscreenCanvas
        ~~~~~~~~~~~~~~~
  ./ node_modules / chart.js / types / index.esm.d.ts: 525: 35 - error TS2304: Cannot find name 'OffscreenCanvas'.
525 | { canvas: HTMLCanvasElement | OffscreenCanvas }
                                      ~~~~~~~~~~~~~~~
  ./ node_modules / chart.js / types / index.esm.d.ts: 526: 62 - error TS2304: Cannot find name 'OffscreenCanvas'.
526 | ArrayLike<CanvasRenderingContext2D | HTMLCanvasElement | OffscreenCanvas>;
                                                                 ~~~~~~~~~~~~~~~
  ./ node_modules / chart.js / types / index.esm.d.ts: 3351: 66 - error TS2315: Type 'DeepPartial' is not generic.
3351 export type ScaleOptions<TScale extends ScaleType = ScaleType> = DeepPartial<ScaleOptionsByType<TScale>>;
                                                                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  ./ node_modules / chart.js / types / index.esm.d.ts: 3365: 65 - error TS2315: Type 'DeepPartial' is not generic.
3365 export type ChartOptions<TType extends ChartType = ChartType> = DeepPartial<
                                                                         ~~~~~~~~~~~~
      3366   CoreChartOptions<TType> &
             ~~~~~~~~~~~~~~~~~~~~~~~~~~~
         ...
      3371   ChartTypeRegistry[TType]['chartOptions']
           ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
      3372 >;

标签： angulartypescriptionic-frameworkchart.js

解决方案

我希望我仍然可以帮助您和其他人解决这个问题。

OffscreenCanvas创建错误是因为它是此处所述的实验技术。

因此，很可能会产生错误、错误、故障等。根据我自己的经验，我的建议在 node_modules/chart.js/types/index.esm.d.ts(500) 中：

export declare type ChartItem =
  | string
  | CanvasRenderingContext2D
  // | OffscreenCanvasRenderingContext2D
  | HTMLCanvasElement
  // | OffscreenCanvas
  | { canvas: HTMLCanvasElement}// | OffscreenCanvas }
  | ArrayLike<CanvasRenderingContext2D | HTMLCanvasElement>;// | OffscreenCanvas>;

在DeepPartial我的情况下，我在node_modules / chart.js / types / utils.d.ts（13 和 14）中所做的事情：

13  type _DeepPartialArray<T> = Array<Partial<T>>
14  type _DeepPartialObject<T> = { [P in keyof T]?: Partial<T[P]> };

我所做的是改变

Array<DeepPartial<T>>

至

Array<Partial<T>>

和

{[P in keyof T] ?: DeepPartial<T[P]>}

至

{[P in keyof T] ?: Partial<T[P]>}

由于正在创建循环引用DeepPartial并且通常会产生错误，因此我对此的引用是另一种语言的，但无论如何我都会与您分享

https://www.youtube.com/watch?v=aMfvQLLqbzE&ab_channel=makigas%3Atutorialesdeprogramaci%C3%B3n

我正在使用 chart.js 使用 MEAN Stack 创建一些图表，它给我带来的问题比编译中的任何问题都多，因为图表和应用程序仍然有效。

这是一个真正的解决方案出来的时候，因为我已经研究了将近一个星期，你的问题是我在整个互联网上找到的最准确的问题，它有完全相同的错误，但仍然没有答案，我想是因为它是什么最近，尚未影响大众，这些错误的真正解决方案或纠正尚未出现。

问候！

推荐阅读