Chart JS +ng2-charts 不适用于 Angular+2 [英] Chart JS +ng2-charts not working on Angular+2
本文介绍了Chart JS +ng2-charts 不适用于 Angular+2的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
开发人员您好，我一整天都在尝试在我的项目上实现图表，但是按照官方文档，我无法摆脱这个错误:
Hello developers i have been literally the whole day trying to implement charts on my proyect , but following the official docs there is not way i could rid off this error :
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 时，所有这些:
All this when I'm trying to implement ng2-charts wrapping chart.js from its official site through the commands:
npm install --save ng2-charts
npm install --save chart.js
我的 package.json 具有以下结构:
My package.json has this structure:
{
"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 中实现的，以及我可能会在其中设置图表的模块化组件.
And the ChartModule is implemented in the app.module, as well as the modularized component I might be setting the charts at.
我不确定为什么会出现这种情况.任何帮助将是惊人的.提前致谢
I'm not sure why this situation. Any help would be amazing. Thanks in advance
推荐答案
我也遇到了类似的问题.我不确定修复.我已经通过将图表包降级到ng2-charts"来解决:^2.3.0".和chart.js":^2.9.3".
I too got the similar problem. I am not sure about the fix.I have resolved by downgrading the charts packages to "ng2-charts": "^2.3.0" and "chart.js": "^2.9.3".
这篇关于Chart JS +ng2-charts 不适用于 Angular+2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
