ng2-charts 工具提示和图例停止工作

Question

图表一直运行良好，但突然间就不行了。 Here's a demonstration of the problem.

如您所见，工具提示是透明的且闪烁的，它们不会移动到我悬停的下一个点。此外，当我单击它们的标签时，图例不会转动 on/off 行。

这是我的选择：

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-software 的网站上复制了折线图，它一直有效，直到我使用了自己的标签和数据集。还是没弄明白他们是怎么了。

Answer 1

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

ng2-charts 工具提示和图例停止工作

ng2-charts tooltip and legend stopped working

chart.js

ng2-charts