Chart.js Chartjs/ng2图表悬停线不工作

我正在尝试使用Angular cli应用程序上的ng2图表优化我的图表。一般来说，一切正常，唯一不正常的是悬停线跟踪数据点。这是我尝试制作的理想图表模型，我也尝试遵循其代码：

但是，当我在图表上悬停时，只显示工具提示

这是我的密码：

plugin-hoverline.ts：（从下面的链接复制并粘贴，@GRUNT提供信用）

banner.component.ts：（图表组件）

从'@angular/core'导入{Component，OnInit}；
从“../../services/historicalbipiservice”导入{historicalbipiservice}；
导入“./plugin hoverline”；
@组成部分({
选择器：“应用程序横幅”，
templateUrl:'./banner.component.html'，
样式URL:['./banner.component.scss']
})
导出类BannerComponent实现OnInit{
currentDate:string=newdate（）.toJSON（）.slice（0,10）.replace（/-/g，'-'）；
私有数据URL:string='historical/close.json？start=2013-09-01&end='+this.currentDate；
建造商（
私人历史顾问公司：历史顾问公司
) {}
//线条图
公共线形图数据：任意=[
{数据：[]，标签：'BTC'}
];
公共lineChartLabels:Array=[]；
公共线形图选项：任意={
回答：是的，
MaintaintAspectRatio:false，
布局：{
填充：0
},
lineOnHover：{
启用：对，
线条颜色：“#bbb”，
线宽：1
},
比例：{
雅克斯：[{
显示：假，
scaleLabel：{
显示：假，
标签字符串：“美元”
},
滴答声：{
//分:0,，
//最高：5000，
步长：500，
显示：假，
镜子：是的，
标签偏移：7，
填充：-10，
回调：函数（值、索引、值）{
返回“$”+值；
}
},
网格线：{
显示：对，
标记长度：0
}
}],
xAxes：[{
滴答声：{
显示：假，
镜子：是的
},
网格线：{
显示：假，
标记长度：0
}
}]
},
要素：{
要点：{
半径：0
},
行：{
张力：0，//0禁用贝塞尔曲线
}
},
悬停：{
模式：“最近的”，
交集：错
},
工具提示：{
模式：“最近的”，
交集：错，
背景颜色：“rgb（95,22,21）”，
回调：{
标题：函数（工具提示项、数据）{
返回（工具提示项[0]|{}）['xLabel']；
},
标签：函数（工具提示项、数据）{
返回“$”+tooltipItem.yLabel.ToLocalString（）；
},
labelColor:函数（工具提示项、图表）{
让dataset=chart.config.data.datasets[tooltipItem.datasetIndex]；
返回{
backgroundColor:dataset.backgroundColor
}
}
}
}
};
公共LineChartColor:数组=[
{
背景颜色：“rgba（199,32,48,0.9’，
边框颜色：“rgb（95,22,21）；”，
pointBackgroundColor:'rgba（218208163,0.9）'，
pointHoverBackgroundColor:'rgba（218208163,0.9）'，
pointHoverBorderColor:“rgb（218208163）”，
点半径：5，
阶梯线：错误
}
];
公共线形图图例：布尔值=false；
公共lineChartType:string='line'；
//事件
公共目录（e:任何）：无效{
控制台日志（e）；
}
公共图表悬停（e:任何）：无效{
控制台日志（e）；
}
恩戈尼尼特（）{
this.historicalbipiservice.getBpiData（this.dataUrl）
.订阅(
res=>{
//this.lineChartData=Object.keys（res.bpi）.map（函数（键）{return res.bpi[key]；}）；
此.lineChartData[0].data=Object.values（res.bpi）；
this.lineChartLabels=Object.keys（res.bpi）；
//log（this.lineChartData、this.lineChartLabels）；
}
)
}
}

模板：

<div class="chart">
      <canvas baseChart height="360px"
        [datasets]="lineChartData"
        [labels]="lineChartLabels"
        [options]="lineChartOptions"
        [colors]="lineChartColors"
        [legend]="lineChartLegend"
        [chartType]="lineChartType"
        (chartHover)="chartHovered($event)"
        (chartClick)="chartClicked($event)"></canvas>
    </div>

---

尝试使用以下代码：

图表组件

import { Component, OnInit } from '@angular/core';
import { HistoricalBpiService } from '../../services/historical-bpi.service';
import './plugin-hoverline';

@Component({
   selector: 'app-banner',
   templateUrl: './banner.component.html',
   styleUrls: ['./banner.component.scss']
})
export class BannerComponent implements OnInit {

   currentDate: string = new Date().toJSON().slice(0, 10).replace(/-/g, '-');

   private dataUrl: string = 'historical/close.json?start=2013-09-01&end=' + this.currentDate;

   constructor(
      private historicalBpiService: HistoricalBpiService
   ) { }

   // lineChart

   public lineChartData: any = [
      { data: [], label: 'BTC', pointHoverRadius: 5, steppedLine: false }
   ];

   public lineChartLabels: Array<any> = [];

   public lineChartOptions: any = {
      responsive: true,
      maintainAspectRatio: false,
      layout: {
         padding: 0
      },
      lineOnHover: {
         enabled: true,
         lineColor: '#bbb',
         lineWidth: 1
      },
      scales: {
         yAxes: [{
            display: false,
            scaleLabel: {
               display: false,
               labelString: 'USD'
            },
            ticks: {
               //min: 0,
               //max: 5000,
               stepSize: 500,
               display: false,
               mirror: true,
               labelOffset: 7,
               padding: -10,
               callback: function (value, index, values) {
                  return '$' + value;
               }
            },
            gridLines: {
               display: true,
               tickMarkLength: 0
            }
         }],
         xAxes: [{
            ticks: {
               display: false,
               mirror: true
            },
            gridLines: {
               display: false,
               tickMarkLength: 0
            }
         }]
      },
      elements: {
         point: {
            radius: 0
         },
         line: {
            tension: 0, // 0 disables bezier curves
         }
      },
      hover: {
         mode: 'nearest',
         intersect: true
      },
      tooltips: {
         mode: 'nearest',
         intersect: true,
         backgroundColor: 'rgb(95,22,21)',
         callbacks: {
            title: function (tooltipItems, data) {
               return (tooltipItems[0] || {})['xLabel'];
            },
            label: function (tooltipItem, data) {
               return '$ ' + tooltipItem.yLabel.toLocaleString();
            },
            labelColor: function (tooltipItem, chart) {
               let dataset = chart.config.data.datasets[tooltipItem.datasetIndex];
               return {
                  backgroundColor: dataset.backgroundColor
               }
            }
         }
      }
   };
   public lineChartColors: Array<any> = [
      {
         backgroundColor: 'rgba(199,32,48,0.9',
         borderColor: 'rgb(95,22,21);',
         pointBackgroundColor: 'rgba(218,208,163,0.9)',
         pointHoverBackgroundColor: 'rgba(218,208,163,0.9)',
         pointHoverBorderColor: 'rgb(218,208,163)'

      }
   ];
   public lineChartLegend: boolean = false;
   public lineChartType: string = 'line';


   // events
   public chartClicked(e: any): void {
      console.log(e);
   }

   public chartHovered(e: any): void {
      console.log(e);
   }

   ngOnInit() {
      this.historicalBpiService.getBpiData(this.dataUrl)
         .subscribe(
         res => {
            //this.lineChartData = Object.keys(res.bpi).map(function (key) { return res.bpi[key];});
            this.lineChartData[0].data = Object.values(res.bpi);
            this.lineChartLabels = Object.keys(res.bpi);
            //console.log(this.lineChartData,this.lineChartLabels);
         }
         )
   }
}

从'@angular/core'导入{Component，OnInit}；
从“../../services/historicalbipiservice”导入{historicalbipiservice}；
导入“./plugin hoverline”；
@组成部分({
选择器：“应用程序横幅”，
templateUrl:'./banner.component.html'，
样式URL:['./banner.component.scss']
})
导出类BannerComponent实现OnInit{
currentDate:string=newdate（）.toJSON（）.slice（0,10）.replace（/-/g，'-'）；
私有数据URL:string='historical/close.json？start=2013-09-01&end='+this.currentDate；
建造师(
私人历史顾问公司：历史顾问公司
) { }
//线条图
公共线形图数据：任意=[
{数据：[]，标签：'BTC'，pointHoverRadius:5，steppedLine:false}
];
公共lineChartLabels:Array=[]；
公共线形图选项：任意={
回答：是的，
MaintaintAspectRatio:false，
布局：{
填充：0
},
lineOnHover：{
启用：对，
线条颜色：“#bbb”，
线宽：1
},
比例：{
雅克斯：[{
显示：假，
scaleLabel：{
显示：假，
标签字符串：“美元”
},
滴答声：{
//分:0,，
//最高：5000，
步长：500，
显示：假，
镜子：是的，
标签偏移：7，
填充：-10，
回调：函数（值、索引、值）{
返回“$”+值；
}
},
网格线：{
显示：对，
标记长度：0
}
}],
xAxes：[{
滴答声：{
显示：假，
镜子：是的
},
网格线：{
显示：假，
标记长度：0
}
}]
},
要素：{
po
import { Component, OnInit } from '@angular/core';
import { HistoricalBpiService } from '../../services/historical-bpi.service';
import './plugin-hoverline';

@Component({
   selector: 'app-banner',
   templateUrl: './banner.component.html',
   styleUrls: ['./banner.component.scss']
})
export class BannerComponent implements OnInit {

   currentDate: string = new Date().toJSON().slice(0, 10).replace(/-/g, '-');

   private dataUrl: string = 'historical/close.json?start=2013-09-01&end=' + this.currentDate;

   constructor(
      private historicalBpiService: HistoricalBpiService
   ) { }

   // lineChart

   public lineChartData: any = [
      { data: [], label: 'BTC', pointHoverRadius: 5, steppedLine: false }
   ];

   public lineChartLabels: Array<any> = [];

   public lineChartOptions: any = {
      responsive: true,
      maintainAspectRatio: false,
      layout: {
         padding: 0
      },
      lineOnHover: {
         enabled: true,
         lineColor: '#bbb',
         lineWidth: 1
      },
      scales: {
         yAxes: [{
            display: false,
            scaleLabel: {
               display: false,
               labelString: 'USD'
            },
            ticks: {
               //min: 0,
               //max: 5000,
               stepSize: 500,
               display: false,
               mirror: true,
               labelOffset: 7,
               padding: -10,
               callback: function (value, index, values) {
                  return '$' + value;
               }
            },
            gridLines: {
               display: true,
               tickMarkLength: 0
            }
         }],
         xAxes: [{
            ticks: {
               display: false,
               mirror: true
            },
            gridLines: {
               display: false,
               tickMarkLength: 0
            }
         }]
      },
      elements: {
         point: {
            radius: 0
         },
         line: {
            tension: 0, // 0 disables bezier curves
         }
      },
      hover: {
         mode: 'nearest',
         intersect: true
      },
      tooltips: {
         mode: 'nearest',
         intersect: true,
         backgroundColor: 'rgb(95,22,21)',
         callbacks: {
            title: function (tooltipItems, data) {
               return (tooltipItems[0] || {})['xLabel'];
            },
            label: function (tooltipItem, data) {
               return '$ ' + tooltipItem.yLabel.toLocaleString();
            },
            labelColor: function (tooltipItem, chart) {
               let dataset = chart.config.data.datasets[tooltipItem.datasetIndex];
               return {
                  backgroundColor: dataset.backgroundColor
               }
            }
         }
      }
   };
   public lineChartColors: Array<any> = [
      {
         backgroundColor: 'rgba(199,32,48,0.9',
         borderColor: 'rgb(95,22,21);',
         pointBackgroundColor: 'rgba(218,208,163,0.9)',
         pointHoverBackgroundColor: 'rgba(218,208,163,0.9)',
         pointHoverBorderColor: 'rgb(218,208,163)'

      }
   ];
   public lineChartLegend: boolean = false;
   public lineChartType: string = 'line';


   // events
   public chartClicked(e: any): void {
      console.log(e);
   }

   public chartHovered(e: any): void {
      console.log(e);
   }

   ngOnInit() {
      this.historicalBpiService.getBpiData(this.dataUrl)
         .subscribe(
         res => {
            //this.lineChartData = Object.keys(res.bpi).map(function (key) { return res.bpi[key];});
            this.lineChartData[0].data = Object.values(res.bpi);
            this.lineChartLabels = Object.keys(res.bpi);
            //console.log(this.lineChartData,this.lineChartLabels);
         }
         )
   }
}