如何在Angular10项目中使用chart.js在条形图上显示数据标签？

问题描述

在Angular项目中，我正在使用chart.js最新版本 2.9.3

来实现图表

我实现了甜甜圈图，完美的堆叠条形图，现在我必须实现在y轴上包含数据标签的堆叠条形图。

因此，从使用 chartjs-plugin-datalabels 插件的chart.js文档中，我试图在此处显示标签，但出现cli错误 decalare模块chart.js

要解决此错误，我通过遵循此解决方案https://github.com/chartjs/chartjs-plugin-datalabels/pull/121#issuecomment-473327301

安装了“ @ types / chart.js”：“ ^ 2.9.27”

现在在我的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;

什么是thease错误，如何解决该问题，

但是在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","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

请提出任何建议

预先感谢

解决方法

带有标签的示例图表如下

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Bar Chart Example in Angular 4';

  // ADD CHART OPTIONS. 
  chartOptions = {
    responsive: true    // THIS WILL MAKE THE CHART RESPONSIVE (VISIBLE IN ANY DEVICE).
  }

  labels =  ['JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC'];

  // STATIC DATA FOR THE CHART IN JSON FORMAT.
  chartData = [
    {
      label: '1st Year',data: [21,56,4,31,45,15,57,61,9,17,24,59] 
    },{ 
      label: '2nd Year',data: [47,28,54,77,51,24]
    }
  ];

  // CHART COLOR.
  colors = [
    { // 1st Year.
      backgroundColor: 'rgba(77,83,96,0.2)'
    },{ // 2nd Year.
      backgroundColor: 'rgba(30,169,224,0.8)'
    }
  ]
  
  // CHART CLICK EVENT.
  onChartClick(event) {
    console.log(event);
  }
}

angular chartjs-plugin-annotation charts javascript