那些遇到过的问题

Chart JS +ng2-charts 不适用于 Angular+2

Enr*_* GF 27 charts ng2-charts angular

你好开发人员我一整天都在尝试在我的项目上实现图表，但是按照官方文档，我无法摆脱这个错误：

ERROR in ./node_modules/ng2-charts/__ivy_ngcc__/fesm2015/ng2-charts.js 317:8-21
"export 'pluginService' was not found in 'chart.js'
 node_modules/ng2-charts/lib/base-chart.directive.d.ts:4:59 - error TS2305: Module '"../../chart.js/types/index.esm"' has no exported member 
'ChartPoint'.
    
    4 import { ChartConfiguration, ChartDataSets, ChartOptions, ChartPoint, ChartType, PluginServiceGlobalRegistration, PluginServiceRegistrationOptions } from 'chart.js';
                                                                ~~~~~~~~~~
    node_modules/ng2-charts/lib/base-chart.directive.d.ts:4:82 - error TS2305: Module '"../../chart.js/types/index.esm"' has no exported member 
'PluginServiceGlobalRegistration'.
    
    4 import { ChartConfiguration, ChartDataSets, ChartOptions, ChartPoint, ChartType, PluginServiceGlobalRegistration, PluginServiceRegistrationOptions } from 'chart.js';
                                                                                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    node_modules/ng2-charts/lib/base-chart.directive.d.ts:4:115 - error TS2305: Module '"../../chart.js/types/index.esm"' has no exported member 'PluginServiceRegistrationOptions'.
    
    4 import { ChartConfiguration, ChartDataSets, ChartOptions, ChartPoint, ChartType, PluginServiceGlobalRegistration, PluginServiceRegistrationOptions } from 'chart.js';
                                                                                                                        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    node_modules/ng2-charts/lib/base-chart.directive.d.ts:32:12 - error TS2304: Cannot find name 'Chart'.
    
    32     chart: Chart;
                  ~~~~~
    node_modules/ng2-charts/lib/base-chart.directive.d.ts:56:35 - error TS2304: Cannot find name 'Chart'.
    
    56     getChartBuilder(ctx: string): Chart;
                                         ~~~~~
    src/app/components/graphics/graphics.component.ts:6:20 - error TS2305: Module '"../../../../node_modules/chart.js/types/index.esm"' has no exported member 'pluginService'.
    
    6 import { ChartType,pluginService} from 'chart.js';
                         ~~~~~~~~~~~~~
    

Date: 2021-04-03T22:59:36.844Z - Hash: 2c8378fd3f46cd7e10f8
6 unchanged chunks

Time: 2109ms

ERROR in ./node_modules/ng2-charts/__ivy_ngcc__/fesm2015/ng2-charts.js 317:8-21
"export 'pluginService' was not found in 'chart.js'

ERROR in ./node_modules/ng2-charts/__ivy_ngcc__/fesm2015/ng2-charts.js 324:8-21
"export 'pluginService' was not found in 'chart.js'
    
    ERROR in node_modules/ng2-charts/lib/base-chart.directive.d.ts:4:30 - error TS2724: Module '"../../chart.js/types/index.esm"' has no exported member 'ChartDataSets'. Did you mean 'ChartDataset'?
    
    4 import { ChartConfiguration, ChartDataSets, ChartOptions, ChartPoint, ChartType, PluginServiceGlobalRegistration, PluginServiceRegistrationOptions } from 'chart.js';
                                   ~~~~~~~~~~~~~
    node_modules/ng2-charts/lib/base-chart.directive.d.ts:4:59 - error TS2305: Module '"../../chart.js/types/index.esm"' has no exported member 
'ChartPoint'.
    
    4 import { ChartConfiguration, ChartDataSets, ChartOptions, ChartPoint, ChartType, PluginServiceGlobalRegistration, PluginServiceRegistrationOptions } from 'chart.js';
                                                                ~~~~~~~~~~
    node_modules/ng2-charts/lib/base-chart.directive.d.ts:4:82 - error TS2305: Module '"../../chart.js/types/index.esm"' has no exported member 
'PluginServiceGlobalRegistration'.
    
    4 import { ChartConfiguration, ChartDataSets, ChartOptions, ChartPoint, ChartType, PluginServiceGlobalRegistration, PluginServiceRegistrationOptions } from 'chart.js';
                                                                                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    node_modules/ng2-charts/lib/base-chart.directive.d.ts:4:115 - error TS2305: Module '"../../chart.js/types/index.esm"' has no exported member 'PluginServiceRegistrationOptions'.
    
    4 import { ChartConfiguration, ChartDataSets, ChartOptions, ChartPoint, ChartType, PluginServiceGlobalRegistration, PluginServiceRegistrationOptions } from 'chart.js';
                                                                                                                        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    node_modules/ng2-charts/lib/base-chart.directive.d.ts:32:12 - error TS2304: Cannot find name 'Chart'.
    
    32     chart: Chart;
                  ~~~~~
    node_modules/ng2-charts/lib/base-chart.directive.d.ts:56:35 - error TS2304: Cannot find name 'Chart'.
    
    56     getChartBuilder(ctx: string): Chart;
                                         ~~~~~
Run Code Online (Sandbox Code Playgroud)

当我尝试通过以下命令从其官方网站实现包装 chart.js 的 ng2-charts 时，所有这一切：

npm install --save ng2-charts

npm install --save chart.js
Run Code Online (Sandbox Code Playgroud)

我的 package.json 具有以下结构：

ERROR in ./node_modules/ng2-charts/__ivy_ngcc__/fesm2015/ng2-charts.js 317:8-21
"export 'pluginService' was not found in 'chart.js'
 node_modules/ng2-charts/lib/base-chart.directive.d.ts:4:59 - error TS2305: Module '"../../chart.js/types/index.esm"' has no exported member 
'ChartPoint'.
    
    4 import { ChartConfiguration, ChartDataSets, ChartOptions, ChartPoint, ChartType, PluginServiceGlobalRegistration, PluginServiceRegistrationOptions } from 'chart.js';
                                                                ~~~~~~~~~~
    node_modules/ng2-charts/lib/base-chart.directive.d.ts:4:82 - error TS2305: Module '"../../chart.js/types/index.esm"' has no exported member 
'PluginServiceGlobalRegistration'.
    
    4 import { ChartConfiguration, ChartDataSets, ChartOptions, ChartPoint, ChartType, PluginServiceGlobalRegistration, PluginServiceRegistrationOptions } from 'chart.js';
                                                                                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    node_modules/ng2-charts/lib/base-chart.directive.d.ts:4:115 - error TS2305: Module '"../../chart.js/types/index.esm"' has no exported member 'PluginServiceRegistrationOptions'.
    
    4 import { ChartConfiguration, ChartDataSets, ChartOptions, ChartPoint, ChartType, PluginServiceGlobalRegistration, PluginServiceRegistrationOptions } from 'chart.js';
                                                                                                                        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    node_modules/ng2-charts/lib/base-chart.directive.d.ts:32:12 - error TS2304: Cannot find name 'Chart'.
    
    32     chart: Chart;
                  ~~~~~
    node_modules/ng2-charts/lib/base-chart.directive.d.ts:56:35 - error TS2304: Cannot find name 'Chart'.
    
    56     getChartBuilder(ctx: string): Chart;
                                         ~~~~~
    src/app/components/graphics/graphics.component.ts:6:20 - error TS2305: Module '"../../../../node_modules/chart.js/types/index.esm"' has no exported member 'pluginService'.
    
    6 import { ChartType,pluginService} from 'chart.js';
                         ~~~~~~~~~~~~~
    

Date: 2021-04-03T22:59:36.844Z - Hash: 2c8378fd3f46cd7e10f8
6 unchanged chunks

Time: 2109ms

ERROR in ./node_modules/ng2-charts/__ivy_ngcc__/fesm2015/ng2-charts.js 317:8-21
"export 'pluginService' was not found in 'chart.js'

ERROR in ./node_modules/ng2-charts/__ivy_ngcc__/fesm2015/ng2-charts.js 324:8-21
"export 'pluginService' was not found in 'chart.js'
    
    ERROR in node_modules/ng2-charts/lib/base-chart.directive.d.ts:4:30 - error TS2724: Module '"../../chart.js/types/index.esm"' has no exported member 'ChartDataSets'. Did you mean 'ChartDataset'?
    
    4 import { ChartConfiguration, ChartDataSets, ChartOptions, ChartPoint, ChartType, PluginServiceGlobalRegistration, PluginServiceRegistrationOptions } from 'chart.js';
                                   ~~~~~~~~~~~~~
    node_modules/ng2-charts/lib/base-chart.directive.d.ts:4:59 - error TS2305: Module '"../../chart.js/types/index.esm"' has no exported member 
'ChartPoint'.
    
    4 import { ChartConfiguration, ChartDataSets, ChartOptions, ChartPoint, ChartType, PluginServiceGlobalRegistration, PluginServiceRegistrationOptions } from 'chart.js';
                                                                ~~~~~~~~~~
    node_modules/ng2-charts/lib/base-chart.directive.d.ts:4:82 - error TS2305: Module '"../../chart.js/types/index.esm"' has no exported member 
'PluginServiceGlobalRegistration'.
    
    4 import { ChartConfiguration, ChartDataSets, ChartOptions, ChartPoint, ChartType, PluginServiceGlobalRegistration, PluginServiceRegistrationOptions } from 'chart.js';
                                                                                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    node_modules/ng2-charts/lib/base-chart.directive.d.ts:4:115 - error TS2305: Module '"../../chart.js/types/index.esm"' has no exported member 'PluginServiceRegistrationOptions'.
    
    4 import { ChartConfiguration, ChartDataSets, ChartOptions, ChartPoint, ChartType, PluginServiceGlobalRegistration, PluginServiceRegistrationOptions } from 'chart.js';
                                                                                                                        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    node_modules/ng2-charts/lib/base-chart.directive.d.ts:32:12 - error TS2304: Cannot find name 'Chart'.
    
    32     chart: Chart;
                  ~~~~~
    node_modules/ng2-charts/lib/base-chart.directive.d.ts:56:35 - error TS2304: Cannot find name 'Chart'.
    
    56     getChartBuilder(ctx: string): Chart;
                                         ~~~~~
Run Code Online (Sandbox Code Playgroud)

ChartModule 是在 app.module 中实现的，以及我可能正在设置图表的模块化组件。

我不确定为什么会出现这种情况。任何帮助将是惊人的。提前致谢

Ven*_*h K 41

我也遇到了类似的问题。我不确定修复。我已经通过将图表包降级为“ng2-charts”：“^2.3.0”和“chart.js”：“^2.9.3”来解决。

  • 尽管这仍然会给你 Angular11 中的救助警告 - “CommonJS 或 AMD 依赖项可能会导致优化救助”，但如果我们能让它正常工作，迁移到 Chart.js 3 或更高版本应该会消除该警告。 (2认同)
  • 与其降级，为什么不升级到 ng2-charts@v3.0.0-rc.3 我可以确认升级可以解决这个问题。 (2认同)

S J*_*ANA 24

图表无法在 angular 中工作的原因可能是因为版本兼容性，我正在使用angular 11.2.0、npm 6.14.11和node v15.13.0。我正面临着下面提到的图表问题。

Error: node_modules/ng2-charts/lib/base-chart.directive.d.ts:17:23 - error TS2724: '"D:/myAngularWorks/testproject/node_modules/chart.js/types/index.esm"' has no exported  member named 'ChartDataSets'. Did you mean 'ChartDataset'?

17     datasets: chartJs.ChartDataSets[];
                         ~~~~~~~~~~~~~


Error: node_modules/ng2-charts/lib/base-chart.directive.d.ts:33:12 - error TS2304: Cannot find name 'Chart'.

33     chart: Chart;
              ~~~~~


Error: node_modules/ng2-charts/lib/base-chart.directive.d.ts:57:35 - error TS2304: Cannot find name 'Chart'.

57     getChartBuilder(ctx: string): Chart;
                                     ~~~~~


Error: node_modules/ng2-charts/lib/base-chart.directive.d.ts:6:57 - error TS2694: Namespace '"D:/myAngularWorks/testproject/node_modules/chart.js/types/index.esm"' has no  exported member 'ChartPoint'.

6 export declare type SingleDataSet = (number[] | chartJs.ChartPoint[]);
                                                          ~~~~~~~~~~


Error: node_modules/ng2-charts/lib/base-chart.directive.d.ts:7:56 - error TS2694: Namespace '"D:/myAngularWorks/testproject/node_modules/chart.js/types/index.esm"' has no  exported member 'ChartPoint'.

7 export declare type MultiDataSet = (number[] | chartJs.ChartPoint[])[];
                                                         ~~~~~~~~~~


Error: node_modules/ng2-charts/lib/base-chart.directive.d.ts:9:115 - error TS2694: Namespace '"D:/myAngularWorks/testproject/node_modules/chart.js/types/index.esm"' has no exported member 'PluginServiceRegistrationOptions'.

9 export declare type PluginServiceGlobalRegistrationAndOptions = chartJs.PluginServiceGlobalRegistration & chartJs.PluginServiceRegistrationOptions;
                                                                                                                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Error: node_modules/ng2-charts/lib/base-chart.directive.d.ts:9:73 - error TS2694: Namespace '"D:/myAngularWorks/testproject/node_modules/chart.js/types/index.esm"' has no  exported member 'PluginServiceGlobalRegistration'.

9 export declare type PluginServiceGlobalRegistrationAndOptions = chartJs.PluginServiceGlobalRegistration & chartJs.PluginServiceRegistrationOptions;
Run Code Online (Sandbox Code Playgroud)

这个问题可以通过使用以下命令安装 chart.js 和 ng2-charts 的兼容版本来解决：

npm install chart.js@2.9.3 --save
npm install ng2-charts@2.2.3 --save
Run Code Online (Sandbox Code Playgroud)

在您的项目中然后运行 ​​npm i 并重新启动项目。

  • 与 Angular 12 完美配合 (5认同)

amm*_*han 10

你必须更新 ng2-charts

npm install ng2-charts@v3.0.0-rc.3
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

15642 次

最近记录：

4 年，2 月 前
相关归档
Angular - 为每个请求设置标头 315
Angular 2 [隐藏]似乎不起作用？ 32
打字稿中的Angular2 DI.我们可以在node.js/non-angular项目中使用它吗？ 27
带选项卡的Angular 6 RouterLink 11
单元测试中未采用 else 路径 10
在 PrimeNg 表中同时使用复选框选择和行选择 9
Angular 不会加载 styles.css 8
在 Angular 中设置全球时区 8
使用achartengine的动态图表 2
jfreechart XYLineAndShaperanderer,XYDotRenderer和XYSplineRenderer之间的代码差异？ 2
难疑归档
如何检查jQuery中是否选中了复选框？ 4390
为什么打印"B"比打印"#"要慢得多？ 2662
如何在Bash中连接字符串变量 2624
如何逐行读取文件到列表中？ 2028
垂直对齐图像旁边的文字？ 1881
如何递归计算目录中的所有代码行？ 1536
如何在jQuery Ajax调用之后管理重定向请求 1319
纯JavaScript相当于jQuery的$ .ready() - 如何在页面/ DOM准备就绪时调用函数 1244
在HTML中嵌入PDF的推荐方法？ 1128
什么是首选的Bash shebang？ 1051