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

【问题标题】：How do I prevent Chartjs tooltip callback returning multiple instances of the same value?如何防止 Chartjs 工具提示回调返回相同值的多个实例？
【发布时间】：2020-10-23 16:09:18
【问题描述】：

我正在使用带有 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)
                }
            }

现在它可以像预期的那样工作，只是它运行了 3 次，并且返回的项目用三个实例填充了工具提示。我想这是因为我有三个数据集。我将如何防止这种情况并且只调用一次道具回调并只用一个值填充工具提示？我想还有一个轻微的帧速率故障。

【问题讨论】：

标签： javascript reactjs chart.js react-chartjs react-chartjs-2

【解决方案1】：

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

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

【讨论】：