图表 JS 缩放插件在图表数据标签插件时不起作用答案

【问题标题】：Chart JS Zoom Plugins not working when chart data label plugins图表 JS 缩放插件在图表数据标签插件时不起作用
【发布时间】：2023-02-16 13:53:51
【问题描述】：

尝试以角度同时使用 Chart Js zoom 和 ChartDatalabels 但返回 from index 'PluginOptionsByType' 的所有声明必须具有相同的类型参数

我试过吹附代码从'@angular/core'导入{AfterViewInit, Component, ElementRef, OnInit, ViewChild}; 从 'chart.js' 导入 {Chart}；从“chartjs-plugin-datalabels”导入 ChartDataLabels；从 'chartjs-plugin-zoom' 导入 zoomPlugin； Chart.register（图表数据标签） Chart.register(zoomPlugin);

@Component({
  selector: 'app-deleteconfirmdialog',
  templateUrl: './deleteconfirmdialog.component.html',
  styleUrls: ['./deleteconfirmdialog.component.scss']
})
export class DeleteconfirmdialogComponent implements AfterViewInit {
  canvas: any;
  ctx: any;
  @ViewChild('chartCanvas') myCanvas!: ElementRef;
  chart:any;
  chartConfig= {
    type: 'line',
    data: {
      labels: ['January', 'February', 'March', 'April', 'May'],
      datasets: [
        {
          label: 'Data 1',
          data: [65, 59, 80, 81, 56]
        },
        {
          label: 'Data 2',
          data: [28, 48, 40, 19, 86]
        }
      ]
    },
    options: {
      zoom: {
        zoom: {
          wheel: {
            enabled: true,
          },
          pinch: {
            enabled: true
          },
          mode: 'xy',
        }
      },
      plugins: {
        // Enable data labels
        datalabels: {
          color: '#fff',
          font: {
            weight: 'bold'
          }
        }
      }
    }
  };
  ngAfterViewInit(): void {
     this.ctx = this.myCanvas.nativeElement.getContext('2d');
     let myChart = new Chart(this.ctx,{
      type: 'line',
      data: {
        labels: ['January', 'February', 'March', 'April', 'May'],
        datasets: [
          {
            label: 'Data 1',
            data: [65, 59, 80, 81, 56]
          },
          {
            label: 'Data 2',
            data: [28, 48, 40, 19, 86]
          }
        ]
      },
      options: {
       
        plugins: {
          // Enable data labels
          datalabels: {
            color: '#fff',
            font: {
              weight: 'bold'
            }
          },
          zoom: {
            // Enable zooming
            enabled: true,
            // Zooming directions. Remove the appropriate direction to disable
            // Eg. 'y' would only allow zooming in the y direction
            mode: 'xy'
          },
        }
      }
     })
  }
 

  constructor() { }
 

}

版本：角度：15 图表：4.1.1 ng2-图表：4.0.1 缩放插件：2.0.0

【问题讨论】：

标签： angular charts ng2-charts

【解决方案1】：

我有一个类似的问题。我用 hack 解决了这个问题。在 tsconfig.json 中添加 skipLibChek: true。这不是一个永久的解决方案。这解决了我的问题

【讨论】：