在 Angular 项目中，我正在使用 chart.js 最新版本2.9.3实现图表
我完美地实现了圆环图，堆积条形图，现在我必须实现在y轴上包含数据标签的堆积条形图。
因此，从使用chartjs-plugin-datalabels插件的 chart.js 文档中，我尝试在此处显示标签，我得到了 cli error decalare module chart.js
为了解决上述错误，我安装了“@types/chart.js”：“^2.9.27”，遵循此解决方案https://github.com/chartjs/chartjs-plugin-datalabels/pull/121#issuecomment-473327301
现在在我的 package.json
-
"@types/chart.js": "^2.9.27",
"chart.js": "^2.9.3",
"chartjs-plugin-datalabels": "^0.7.0",
但是在安装 @types 之后，我遇到了很多之前没有的 cli 错误
The types of 'elements.point.pointStyle' are incompatible between these types.
Type 'string' is not assignable to type 'PointStyle'
The expected type comes from property 'options' which is declared here on type 'ChartConfiguration'
src/app/dashboard1/litmus-utilization-chart/litmus-utilization-chart.component.ts:48:11 - error TS2339: Property 'elements' does not exist on type 'typeof Chart'.
48 Chart.elements.Rectangle.prototype.draw = function () {
Object literal may only specify known properties, and 'yAlign' does not exist in type 'ChartTooltipOptions'.
352 yAlign: "top",
~~~~~~~~~~~~~
node_modules/@types/chart.js/index.d.ts:297:9 297 工具提示？：ChartTooltipOptions；
什么是这些错误，如何解决这些错误，，
但在 stackerzbilz Angular 10 项目中，它工作正常，不了解问题的根本原因 https://stackblitz.com/edit/angular-10-base-template-2hul5i
我的 Package.json
{
"name": "Litmus",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve --open",
"build": "ng build",
"build:prod": "ng build --configuration production",
"test": "jest",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"jest": {
"preset": "jest-preset-angular",
"setupFilesAfterEnv": [
"<rootDir>/setupJest.ts"
],
"testPathIgnorePatterns": [
"<rootDir>/node_modules/",
"<rootDir>/dist/",
"<rootDir>/src/test.ts"
]
},
"dependencies": {
"@angular/animations": "^10.0.11",
"@angular/cdk": "^10.1.3",
"@angular/common": "~10.0.1",
"@angular/compiler": "~10.0.1",
"@angular/core": "~10.0.1",
"@angular/forms": "~10.0.1",
"@angular/material": "^10.1.3",
"@angular/platform-browser": "~10.0.1",
"@angular/platform-browser-dynamic": "~10.0.1",
"@angular/router": "~10.0.1",
"@volo/abp.ng.account": "~3.0.4",
"@volo/abp.ng.audit-logging": "~3.0.4",
"@volo/abp.ng.identity": "~3.0.4",
"@volo/abp.ng.identity-server": "~3.0.4",
"@volo/abp.ng.language-management": "~3.0.4",
"@volo/abp.ng.saas": "~3.0.4",
"@volo/abp.ng.text-template-management": "~3.0.4",
"@volo/abp.ng.theme.lepton": "~3.0.4",
"chart.js": "^2.9.3",
"chartjs-plugin-datalabels": "^0.7.0",
"jest": "^26.0.1",
"jest-preset-angular": "^8.2.1",
"moment": "^2.29.1",
"moment-timezone": "^0.5.31",
"rxjs": "~6.5.4",
"tslib": "^2.0.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.1000.0",
"@angular-devkit/build-ng-packagr": "~0.1000.0",
"@angular/cli": "~10.0.0",
"@angular/compiler-cli": "~10.0.1",
"@angular/language-service": "~10.0.1",
"@ngxs/logger-plugin": "^3.6.2",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.11.1",
"codelyzer": "^5.1.2",
"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",
"ng-packagr": "^10.0.0",
"ngxs-schematic": "^1.1.9",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~3.9.5"
}
}
tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"module": "esnext",
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2018",
"dom"
]
},
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true
}
}
tsconfig.app.json
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": []
},
"files": [
"src/main.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.d.ts"
]
}
添加 "@types/chart.js": "^2.9.27" 后，出现错误图像 2，如果我没有添加错误图像 1
请给任何建议
提前致谢