是否有任何方法可以更改悬停样式以及使用ChartJS或NG2-Charts的工具提示？我想隐藏悬停点，并且只有在我将悬停在它们上以及指示器上作为线路时显示它们。这是我要构建的确切图表模型：
https:///interactive-bitcoin-price-chart-foxkmkynmg.now.sh/
预先感谢您的提示。
编辑：我遵循Grunt的说明将此图表选项应用于我的Angular应用程序，每当我悬停时，请使用Tooltip显示完整图表，但线条跟踪指示器却没有。这是我的代码：
插件 - 摆线：
export class PluginHoverline {
posX: null;
isMouseOut:boolean = false;
drawLine(chart, posX) {
const ctx = chart.ctx,
x_axis = chart.scales['x-axis-0'],
y_axis = chart.scales['y-axis-0'],
x = posX,
topY = y_axis.top,
bottomY = y_axis.bottom;
if (posX < x_axis.left || posX > x_axis.right) return;
// draw line
ctx.save();
ctx.beginPath();
ctx.moveTo(x, topY);
ctx.lineTo(x, bottomY);
ctx.lineWidth = chart.options.lineOnHover.lineWidth;
ctx.strokeStyle = chart.options.lineOnHover.lineColor;
ctx.stroke();
ctx.restore();
};
beforeInit(chart) {
chart.options.events.push('mouseover');
};
afterEvent(chart, event) {
if (!chart.options.lineOnHover || !chart.options.lineOnHover.enabled) return;
if (event.type !== 'mousemove' && event.type !== 'mouseover') {
if (event.type === 'mouseout') this.isMouseOut = true;
chart.clear();
chart.draw();
return;
}
this.posX = event.x;
this.isMouseOut = false;
chart.clear();
chart.draw();
this.drawLine(chart, this.posX);
var metaData = chart.getDatasetMeta(0).data,
radius = chart.data.datasets[0].pointHoverRadius,
posX = metaData.map(e => e._model.x);
posX.forEach(function(pos, posIndex) {
if (this.posX < pos + radius && this.posX > pos - radius) {
chart.updateHoverStyle([metaData[posIndex]], null, true);
chart.tooltip._active = [metaData[posIndex]];
} else chart.updateHoverStyle([metaData[posIndex]], null, false);
}.bind(this));
chart.tooltip.update();
};
afterDatasetsDraw(chart, ease) {
if (!this.posX) return;
if (!this.isMouseOut) this.drawLine(chart, this.posX);
};
}
banner.component.ts ：（图表组件）
import { Component, OnInit } from '@angular/core';
import { HistoricalBpiService } from '../../services/historical-bpi.service';
import { PluginHoverline } from './plugin-hoverline';
@Component({
selector: 'app-banner',
templateUrl: './banner.component.html',
styleUrls: ['./banner.component.scss']
})
export class BannerComponent implements OnInit {
private dataUrl: string = 'historical/close.json';
constructor(
private historicalBpiService:HistoricalBpiService
) {}
// lineChart
public lineChartData:any = [
{ data:[], label: 'Bitcoin price' }
];
public lineChartLabels:Array<any> = [];
public lineChartOptions:any = {
responsive: true,
maintainAspectRatio: false,
layout: {
padding: 0
},
lineOnHover: {
enabled: true,
lineColor: '#bbb',
lineWidth: 1
},
scales: {
yAxes: [{
display: true,
scaleLabel: {
display: false,
labelString: 'USD'
},
ticks: {
display: false
},
gridLines: {
display: true,
tickMarkLength: 0
}
}],
xAxes: [{
ticks: {
display: false
},
gridLines: {
display: false,
tickMarkLength: 0
}
}]
},
elements: {
point: {
radius: 3
},
line: {
tension: 0.4, // 0 disables bezier curves
}
},
hover: {
mode: 'nearest',
intersect: false
},
tooltips: {
mode: 'nearest',
intersect: false,
backgroundColor: 'rgb(95,22,21)',
callbacks: {
label: function (tooltipItems, data) {
return data.datasets[tooltipItems.datasetIndex].label + ' : ' + '$' + tooltipItems.yLabel.toLocaleString();
},
labelColor: function(tooltipItem, chart) {
var dataset = chart.config.data.datasets[tooltipItem.datasetIndex];
return {
backgroundColor : dataset.backgroundColor
}
}
}
}
};
public lineChartColors:Array<any> = [
{
backgroundColor: 'rgba(199,32,48,0.8',
borderColor: 'rgb(95,22,21);',
pointBackgroundColor: 'rgba(218,208,163,0.8)',
pointHoverBackgroundColor: 'rgba(218,208,163,0.8)',
pointHoverBorderColor: 'rgb(218,208,163)',
pointHoverRadius: 6,
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>
不幸的是，目前还没有内置功能。但是，您可以使用 this 图表插件（一旦出于我自己的目的而创建）来实现您的目标。
要使用插件，请在图表中设置以下选项's 选项配置：
lineOnHover: {
enabled: true,
lineColor: '#bbb',
lineWidth: 1
}
另外，请确保为数据集设置以下属性：
pointRadius: 0,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'white'
参见 - live demo
此答案是在上面的grunt答案之上构建，以便能够显示其多行图：
只需更改以下内容（他在这里提供的代码片段中）：
posX.forEach(function(pos, posIndex) {
if (this.posX < pos + radius && this.posX > pos - radius) {
chart.updateHoverStyle([metaData[posIndex]], null, true);
chart.tooltip._active = [metaData[posIndex]];
} else chart.updateHoverStyle([metaData[posIndex]], null, false);
}.bind(this));
to：
posX.forEach(function(pos, posIndex) {
var metaDatum = []
if (this.posX < pos + radius && this.posX > pos - radius) {
chart.data.datasets.forEach((dataset, ind) => {
metaDatum.push(chart.getDatasetMeta(ind).data[posIndex]);
})
chart.updateHoverStyle(metaDatum, null, true);
chart.tooltip._active = metaDatum;
} else {
metaDatum.push(metaData[posIndex]);
chart.updateHoverStyle(metaDatum, null, false);
}
}.bind(this));