悬停上的 Chartjs / ng2-charts 线不起作用

Question

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

https://stackblitz.com/edit/line-chart?file=app%2Fapp.component.ts

但是，当我将鼠标悬停在图表上时，仅显示工具提示。

这是我的代码：

plugin-hoverline.ts：(从下面的链接复制和粘贴，信用由@GRUNT)

https://istack.000webhostapp.com/chartjs-plugin-hoverline.js

banner.component.ts： (chart component)

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' }
];
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: false
},
tooltips: {
mode: 'nearest',
intersect: false,
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)',
pointHoverRadius: 5,
steppedLine: false
}
];
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);
}
)
}
}

模板：

<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>

Answer 1

尝试使用以下代码：

图表组件

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);
}
)
}
}

您应该在数组中设置pointHoverRadius属性而不是lineChartColorslineChartData，同时将intersect属性设置为truehover和tooltips