react-chartjs-2中的工具提示更改状态更改样式

Question

我将尽力描述这一点。

我有一个折线图，上面已经按照我的设计进行了设置。剩下的唯一事情就是让工具提示框根据我悬停的特定行更改颜色。

我的逻辑是：由于我有2行（意味着2个数据集带有工具提示必须复制的颜色），所以我将动态数组索引设置为我要悬停的值。

tooltips:{
    backgroundColor: data.datasets[this.state.hoverGraphId].borderColor,

    position: "nearest", caretSize: 15, caretPadding: 20,yPadding: 15, xPadding: 15, }

要获取我悬停在（使用某些代码的索引号）上的工具提示，

callbacks: {
      title: (tooltipItem) => {
        let index = tooltipItem[0].datasetIndex;
        this.setState({hoverGraphId: index}) 
      },
    },

问题是此代码将更改悬停时的颜色，但禁用框的carel（箭头）并将其居中于悬停点上方。似乎弄乱了这段代码position: "nearest", caretSize: 15, caretPadding: 20,yPadding: 15,

我认为问题在于我将回调函数title与setState结合使用。

任何解决该问题的想法都将受到欢迎。

Line标签的外观如何：

<Line 
    data={data} 
    options={{legend: {display: false}, 
    tooltips:{
    backgroundColor: data.datasets[this.state.hoverGraphId].borderColor,
    position: "nearest", caretSize: 15, caretPadding: 20,yPadding: 15, xPadding: 15,
    callbacks: {
      title: (tooltipItem) => {
        let index = tooltipItem[0].datasetIndex;
        this.setState({hoverGraphId: index}) 
      },
    },
  },
  }}/>