Angular11中未显示ChartsJS图例

Question

我已经阅读了我能找到的关于这个主题的所有文档和堆栈溢出问题，但我仍然看到一个奇怪的问题。问题是ChartsJS的图例(常规的javascript库，而不是特定于Angular的库)没有显示在我的angular组件中，即使图表显示正确。

我有一个折线图，我通过HTTP实时填充数据-当数据传入时，我将其添加并显示到图表中。我看到的问题是传说从来没有出现过。

以下是您感兴趣的文件：

角度组件：

export class ChartingComponent implements OnInit {
  @ViewChild('myCanvasId', {static: true}) private chartRef: any;

  chart: any;

  ephemeralData: EphemeralData = {
    id: null ,
    dateTime: "",
    heartRate: null,
    spO2: 100,
    respiratory: null,
    pulseRate: null,
    nIBPDia: null,
    nIBPMean: null,
    nIBPSys: null,
    temperature: null,
    endOfTidalCO2: null,
    airwayRespirationRate: null,
    endTidalCO2: null,
    inspiredCO2: null,
    inspiredO2: null,
    inspiredN2O: null,
    endTidalN2O: null,
    inspiredAneshetic: null,
    endTidalAneshetic: null,
    endTidalIsoflurane: null,
    inspiredIsoflurane: null,
    endTidalSevoflurane: null,
    inspiredSevoflurane: null,
    endTidalDesflurane: null,
    inspiredDesflurane: null,
    minimumAlveolarConcentration: null,
    meanAirwayPressure: null,
    positiveEndExpiratoryPressure: null,
    plateauPressure: null,
    maximumAirwayPressure: null,
    minuteVolume: null,
    expiredTidalVolume: null,
    inspiratoryTidalVolume: null,
    inspiratoryTimeExpiratoryTimeRatio: null,
    breateRate: null,
    fractionalConcentrationO2Inspired: null
  };

  constructor(private data: DataService) { }

  ngOnInit(): void {
    this.initChart(this.ephemeralData);
    interval(3000).subscribe(x => {
      this.getLatestEphemeralData();
    })
  }

  private getLatestEphemeralData()
  {
    this.data.ephemeralData().subscribe(
      (res: any) => 
      {
        this.ephemeralData.dateTime = res['dateTime'];
        this.ephemeralData.spO2 = res['spO2'];
        this.ephemeralData.respiratory = res['respiratory'];
        this.ephemeralData.nIBPDia = res['nIBPDia'];
        this.ephemeralData.nIBPMean = res['nIBPMean'];
        this.ephemeralData.nIBPSys = res['nIBPSys'];
        this.ephemeralData.temperature = res['temperature'];
        if (this.chart)
        {
          this.addChartData(this.chart, null, this.ephemeralData);
        }
      }
    )
  }

  private addChartData(chart: Chart, label: any, data: EphemeralData)
  {
      //chart.data.labels?.push(label);
      chart.data.datasets[chart.data.datasets.map(function(e) { return e.label; }).indexOf("spO2")].data.push((data.spO2));
      chart.data.datasets[chart.data.datasets.map(function(e) { return e.label; }).indexOf("respiratory")].data.push((data.respiratory));
      chart.data.datasets[chart.data.datasets.map(function(e) { return e.label; }).indexOf("nIBPDia")].data.push((data.nIBPDia));
      chart.data.datasets[chart.data.datasets.map(function(e) { return e.label; }).indexOf("nIBPMean")].data.push((data.nIBPMean));
      chart.data.datasets[chart.data.datasets.map(function(e) { return e.label; }).indexOf("temperature")].data.push((data.temperature));
    chart.update();
  }

  private initChart(chartData: EphemeralData)
  {
    //if (this.chart) 
      //this.chart = new Chart(null as any, null as any); //find a better way of doing this
    Chart.register(LineController, LineElement, PointElement, LinearScale, CategoryScale);
    this.chart = new Chart(this.chartRef.nativeElement, {
      type: 'line',
      data: {
        labels: ['spO2', 'Respiratory', 'nIBPDia', 'nIBPMean', 'nIBPSys', 'temperature'],
        datasets: [          
          {
            label: 'spO2',
            backgroundColor: 'rgb(255, 99, 132)',
            data: [0],
            borderColor: "#3cba9f",
            fill: true
          },
          {
            label: 'respiratory',
            backgroundColor: 'rgb(255, 99, 132)',
            data: [0],
            borderColor: "#ffcc00",
            fill: true
          },
          {
            label: 'nIBPDia',
            backgroundColor: 'rgb(255, 99, 132)',
            data: [0],
            borderColor: "#ffcc00",
            fill: true
          },
          {
            label: 'nIBPMean',
            backgroundColor: 'rgb(255, 99, 132)',
            data: [0],
            borderColor: "#ffcc00",
            fill: true
          },
          {
            label: 'nIBPSys',
            backgroundColor: 'rgb(255, 99, 132)',
            data: [0],
            borderColor: "#ffcc00",
            fill: true
          },
          {
            label: 'temperature',
            backgroundColor: 'rgb(255, 99, 132)',
            data: [0],
            borderColor: "#ffcc00",
            fill: true
          }
        ]
      },
       options: {
         scales: {
           x: {
             display: false,
             suggestedMin: 0,
             suggestedMax: 240,
           },
           y: {
             display: true,
             suggestedMin: 0,
             suggestedMax: 200
           },
         },
         plugins: {
            legend: {
                display: true,
                position: 'right',
                labels: {
              }
            }
          }
        }
    });
  }
}

组件的HTML内容：

<canvas #myCanvasId>{{ chart }}</canvas>

Answer 1

我认为您在initChart方法中错过了Legend的注册。您是否可以尝试导入它并将其添加为或参考示例stackblitz

Chart.register(LineController, LineElement, PointElement, LinearScale, CategoryScale, Legend);

还要检查文档以验证是否缺少更多的导入，或者在integration部分中检查替代方法。