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

Question

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

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;
                                         ~~~~~

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

npm install --save ng2-charts

npm install --save chart.js

我的 package.json 有这样的结构：

{
  "name": "front",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postinstall": "ngcc"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~10.0.5",
    "@angular/cdk": "^10.2.7",
    "@angular/common": "~10.0.5",
    "@angular/compiler": "~10.0.5",
    "@angular/core": "~10.0.5",
    "@angular/forms": "~10.0.5",
    "@angular/material": "^10.2.7",
    "@angular/platform-browser": "~10.0.5",
    "@angular/platform-browser-dynamic": "~10.0.5",
    "@angular/router": "~10.0.5",
    "@mapbox/mapbox-gl-geocoder": "^4.7.0",
    "@ngrx/effects": "^10.1.2",
    "@ngrx/store": "^10.1.2",
    "@ngrx/store-devtools": "^10.1.2",
    "@swimlane/ngx-charts": "^17.0.1",
    "@swimlane/ngx-datatable": "^19.0.0",
    "angular-datatables": "^11.1.1",
    "bootstrap": "^4.6.0",
    "chart.js": "^3.0.1",
    "chartjs-plugin-datalabels": "^0.7.0",
    "datatables.net": "^1.10.20",
    "datatables.net-dt": "^1.10.20",
    "jquery": "^3.6.0",
    "mapbox-gl": "^2.2.0",
    "ng2-charts": "^2.4.2",
    "popper.js": "^1.16.1",
    "rxjs": "~6.5.5",
    "tslib": "^2.0.0",
    "uuid": "^8.3.2",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1000.4",
    "@angular/cli": "~10.0.4",
    "@angular/compiler-cli": "~10.0.5",
    "@types/datatables.net": "^1.10.18",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/jquery": "^3.3.33",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~3.3.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.9.5"
  }
}

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

我不确定为什么会出现这种情况。任何帮助都会很棒。提前致谢

Answer 1

我也遇到了类似的问题。我不确定 fix.I 是否已通过将图表包降级为 "ng2-charts": "^2.3.0" 和 "chart.js": "^2.9.3".[=10 来解决=]

Answer 2

图表在 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;

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

npm install chart.js@2.9.3 --save
npm install ng2-charts@2.2.3 --save

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

Answer 3

你必须更新 ng2-charts

npm install ng2-charts@v3.0.0-rc.3

Answer 4

我遇到了同样的问题，我通过更改版本解决了它：

npm 安装 ng2-charts@2.2.3 chart.js@2.9.3 --save

Answer 5

对于 angular 12.2.2 以下的依赖版本对我有用

   "ng2-charts": "^2.4.2",`
   "chart.js": "^2.9.3",`

Answer 6

不兼容 b/w ng2-charts 和 chart.js 的相同问题。

固定：

"chart.js": "^2.9.4",

“ng2-图表”：“^2.4.2”

Angular CLI: 9.0.3
Node: 16.10.0
OS: linux x64

Angular: 
... 
Ivy Workspace: 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.900.3
@angular-devkit/core         9.0.3
@angular-devkit/schematics   9.0.3
@schematics/angular          9.0.3
@schematics/update           0.900.3
rxjs                         6.5.3

Answer 7

更改版本

"chart.js": "^2.9.4", “ng2-图表”：“^2.4.2”

在package.json和

npm i

构建

像魅力一样工作..

Answer 8

对于Angular 12.2.16 我用过 "chart.js": "^2.9.3", "chartjs-plugin-annotation": "^0.5.7", “ng2-图表”：“^2.3.0” 这对我有用。

将依赖版本更改为Package.json中的上述版本。
只需删除您的 node_modules 文件夹。
然后执行 npm -install --save。
重新启动服务器。

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

Chart JS +ng2-charts not working on Angular+2

charts

ng2-charts

angular