如何防止 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)

                }

            }

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

Answer 1

对于有类似问题的任何人，您可以使用此选项配置工具提示，以便它只使用一个数据集：tooltips: {filter: function (tooltipItem) {    return tooltipItem.datasetIndex === 0;}}