Chart.js ng2图表工具提示和图例停止工作

Chart.js ng2图表工具提示和图例停止工作,chart.js,ng2-charts,Chart.js,Ng2 Charts,这张图表一直运转良好,但突然之间就不复存在了。 正如您所看到的,工具提示是透明的和闪烁的,它们不会移动到我悬停的下一个点。此外,当我单击线条的标签时,图例不会打开/关闭线条 以下是我的选择: export const LineChartLevel3Options = { lineChartLabels: ["Tid1", "Tid2", "Tid3", "Tid4"], lineChartOptions: { responsive: false, title: { display: tru

这张图表一直运转良好,但突然之间就不复存在了。

正如您所看到的,工具提示是透明的和闪烁的,它们不会移动到我悬停的下一个点。此外,当我单击线条的标签时,图例不会打开/关闭线条

以下是我的选择:

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',
};
以及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>

编辑:它似乎与我的数据集和标签有关。我从valor软件的网站上复制了这张折线图,直到我使用了自己的标签和数据集。仍然没有找出它们的问题所在。

事实证明,将图表的数据集绑定到方法是一个坏主意。getJoinedChartData方法获取我的应用程序的一个patient对象的一些数据,并将其作为可用于图表的数组返回。相反,我在组件中创建了一个变量,并将数组分配给该变量,然后将数据集绑定到该变量。现在一切都好了

事实证明,将图表的数据集绑定到方法是个坏主意。getJoinedChartData方法获取我的应用程序的一个patient对象的一些数据,并将其作为可用于图表的数组返回。相反,我在组件中创建了一个变量,并将数组分配给该变量,然后将数据集绑定到该变量。现在一切都好了

在选项中,尝试添加工具提示对象:lineChartOptions:{响应:true,工具提示:{模式:'index',相交:false}}。您可以在选项中看到所有工具提示选项,请尝试添加工具提示对象:lineChartOptions:{响应:true,工具提示:{模式:'index',相交:false}}。您可以看到所有工具提示选项是的,我可以确认此行为。我使用getter获取数据集,工具提示也没有显示。在类属性上设置它也解决了这个问题;我还将数据绑定到getter,不仅工具提示没有显示,而且CPU使用率也越来越高。将绑定更改为属性->两个问题都已修复是的,我可以确认此行为。我使用getter获取数据集,工具提示也没有显示。在类属性上设置它也解决了这个问题;我还将数据绑定到getter,不仅工具提示没有显示,而且CPU使用率也越来越高。将绑定更改为属性->这两个问题都已修复