类型- ChartJS - Angular 13上不存在属性“图表”

zlhcx6iw  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(208)

我对Angular很陌生,这是我用Angular开发的第一个页面。我正在尝试在ChartJS条形图中实现onClick功能。
当我尝试在ChartJS的onClick中访问this.chart时遇到此错误,

  1. Property 'chart' does not exist on type '_DeepPartialObject<CoreChartOptions<"bar"> & ElementChartOptions<"bar"> & PluginChartOptions<"bar"> & DatasetChartOptions<"bar"> & ScaleChartOptions<...> & BarControllerChartOptions>'.ts(2339)

下面是我的代码:

图形.组件.html

  1. <div class="chart-container">
  2. <canvas id="canvas">{{ chart }}</canvas>
  3. </div>

图形.组件.ts:

  1. import { Inject, Injectable, Component, OnInit } from '@angular/core';
  2. import {Chart, ChartConfiguration, ChartItem, registerables} from 'chart.js';
  3. @Component({
  4. selector: 'app-graphs',
  5. templateUrl: './graphs.component.html',
  6. styleUrls: ['./graphs.component.scss']
  7. })
  8. export class AssessmentGraphsComponent implements OnInit
  9. {
  10. constructor() { }
  11. chart: any;
  12. if(this.chart)
  13. {
  14. this.chart.destroy();
  15. }
  16. Chart.register(...registerables);
  17. this.chart = new Chart('canvas', {
  18. type:'bar',
  19. data:
  20. {
  21. labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple'],
  22. datasets: [
  23. {
  24. label: 'Something 1',
  25. backgroundColor: 'lightblue',
  26. borderColor: 'rgb(255, 99, 132)',
  27. data: [1, 1, 3, 5, 2]
  28. },
  29. {
  30. label: 'Something 2',
  31. backgroundColor: 'green',
  32. borderColor: 'rgb(255, 99, 132)',
  33. data: [1,2,3,4,5]
  34. },
  35. {
  36. label: 'Something 3',
  37. backgroundColor: 'blue',
  38. borderColor: 'rgb(255, 99, 132)',
  39. data: [3,4,5,1,2]
  40. },
  41. ]
  42. },
  43. options:
  44. {
  45. responsive: true,
  46. scales:
  47. {
  48. x: {display: true},
  49. y: {beginAtZero: true, display: true, ticks: {precision: 0}}
  50. },
  51. events: ['click'],
  52. onClick: function(e)
  53. {
  54. console.log("CLICKED"); // This is working
  55. // This line shows this error:
  56. // Property 'chart' does not exist on type '_DeepPartialObject<CoreChartOptions<"bar"> & ElementChartOptions<"bar"> & PluginChartOptions<"bar"> & DatasetChartOptions<"bar"> & ScaleChartOptions<...> & BarControllerChartOptions>'.ts(2339)
  57. const points = this.chart.getElementsAtEventForMode(e, 'nearest', { intersect: true }, true);
  58. if (points.length)
  59. {
  60. const firstPoint = points[0];
  61. const label = this.chart.data.labels[firstPoint.index];
  62. const value = this.chart.data.datasets[firstPoint.datasetIndex].data[firstPoint.index];
  63. }
  64. }
  65. }
  66. });

我使用的代码如下:
https://www.chartjs.org/docs/latest/developers/api.html#getelementsateventformode-e-mode-options-usefinalposition
有人能帮我一下吗,谢谢。

mcdcgff0

mcdcgff01#

您可以使用onClick侦听器中的第三个参数来避免此问题,该参数已经是chartInstance:

  1. onClick: (evt, activeEls, chartInstance) => {
  2. // Custom code
  3. }

相关问题