如何防止Chartjs工具提示回调返回相同值的多个实例

Question

我正在使用带有React的Chartjs。我有一个加密货币价格图，有三个数据集，其中一个是价格列表，一条是与初始价格相切的水平线，另一条是最高点的切线。它们在这里：

datasets: [
{
label: 'pricesData',
fill: false,
lineTension: 0,
backgroundColor: 'rgba(75,192,192,1)',
borderColor: chartColor,
borderWidth: 2,
data: prices
},
{

label: '0 line',
radius: 0,
fill: false,
borderDash: [10,5],
data: zeroLine,
backgroundColor: 'rgba(255,255,255,1)',
borderColor: 'rgba(255, 255, 255,.5)',


},
{
label: 'top Line',
radius: 0,
fill: false,
borderDash: [10,5],
data: topLine,
borderColor: 'rgba(255, 255, 255,0)'
}

我正在尝试创建一个功能，根据您在图表上的位置更改另一个组件中显示的价格。以下是标签选项中的回调函数：

callbacks: {
label: function(tooltipItem, data) {
var item = data.datasets[0].data[tooltipItem.index];
var zeroLine = data.datasets[1].data[tooltipItem.index]
let properties = {
price: item,
percentChange: (((item-zeroLine)/zeroLine)*100).toFixed(2) 
}
props.parentCallback(properties);
return(item)
}
}

现在，这与预期的一样工作，只是它运行了三次，并且返回的项用三个实例填充工具提示。我想这是因为我有三个数据集。我该如何防止这种情况，并且只调用一次props回调并只使用一个值填充工具提示？还有一个轻微的帧速率问题，我想这是由它引起的。

Answer 1

我已经回答了自己的问题。对于任何有类似问题的人，您可以使用此选项配置工具提示，使其仅使用一个数据集：

tooltips: {
filter: function (tooltipItem) {
return tooltipItem.datasetIndex === 0;
}
}