ng2-charts Tooltip und Legende funktioniert nicht mehr

Question

Das Diagramm hat gut funktioniert, aber plötzlich ist es nicht mehr. Here's a demonstration of the problem.

Wie Sie sehen können, sind die QuickInfos transparent und flackern, und sie bewegen sich nicht zum nächsten Punkt, über den ich schwebe. Die Legende schaltet die Linien auch nicht ein und aus, wenn ich auf ihre Beschriftungen klicke.

Hier sind meine Optionen:

export const LineChartLevel3Options = { 
lineChartLabels: ["Tid1", "Tid2", "Tid3", "Tid4"], 
lineChartOptions: { 
responsive: false, 
title: { 
    display: true, 
    text: 'Graf over vitale værdier', 
    fontColor: 'black', 
    fontSize: 20, 
}, 
legend: { 
    labels: { 
    fontColor: '#CCC' 
    } 
}, 
scales: { 
    yAxes: [{ 
    ticks: { 
     fontColor: '#CCC' 
    }, 
    gridLines: { 
     color: 'rgba(0, 0, 0, 1)' 
    } 
    }], 
    xAxes: [{ 
    ticks: { 
     fontColor: '#CCC' 
    }, 
    gridLines: { 
     color: 'rgba(0, 0, 0, 1)' 
    } 
    }], 
} 


}, 
    lineChartColors: [ 
    { // grey 
     backgroundColor: 'rgba(255,0,0,0.3)', 
     borderColor: 'rgba(148,159,177,1)', 
     pointBackgroundColor: 'rgba(148,159,177,1)', 
     pointBorderColor: '#fff', 
     pointHoverBackgroundColor: '#fff', 
     pointHoverBorderColor: 'rgba(148,159,177,0.8)' 
    }, 
    { // dark grey 
     backgroundColor: 'rgba(77,83,96,0.2)', 
     borderColor: 'rgba(77,83,96,1)', 
     pointBackgroundColor: 'rgba(77,83,96,1)', 
     pointBorderColor: '#fff', 
     pointHoverBackgroundColor: '#fff', 
     pointHoverBorderColor: 'rgba(77,83,96,1)' 
    }, 
    { // grey 
     backgroundColor: 'rgba(148,159,177,0.2)', 
     borderColor: 'rgba(148,159,177,1)', 
     pointBackgroundColor: 'rgba(148,159,177,1)', 
     pointBorderColor: '#fff', 
     pointHoverBackgroundColor: '#fff', 
     pointHoverBorderColor: 'rgba(148,159,177,0.8)' 
    } 
    ], 
    lineChartLegend: true, 
    lineChartType: 'line', 
}; 

Und die HTML:

<canvas baseChart width="650" height="250" [datasets]="getJoinedChartData(patientService.patientLevel3)" [labels]="lineChart3.lineChartLabels" [options]="lineChart3.lineChartOptions" 
     [colors]="lineChart3.lineChartColors" [legend]="lineChart3.lineChartLegend" [chartType]="lineChart3.lineChartType"> 
     </canvas> 

EDIT: Es scheint so, es hat etwas mit meiner Datensätze und Etikett zu tun. Ich kopierte das Liniendiagramm von der Website von valor-software und es funktionierte, bis ich meine eigenen Etiketten und Datensätze mit diesem verwendet habe. Ich habe immer noch nicht herausgefunden, was mit ihnen los ist.

Answer 1

Es stellte sich heraus, dass die Bindung der dataset des Diagramms an eine Methode eine schlechte Idee ist. Die Methode getJoinedChartData() hat einige Daten von einem der Patientenobjekte meiner Anwendung genommen und sie als ein Array zurückgegeben, das mit dem Diagramm verwendet werden konnte. Stattdessen habe ich eine Variable in meiner Komponente erstellt und ihr das Array zugewiesen. Dann binde ich dataset an diese Variable. Alles ist jetzt gut.