reactjs - 自定义工具提示不透明度始终为 1

Question

我在react-chartjs-2中有一个自定义工具提示；我找到了制作自定义工具提示的解决方案，但我的工具提示始终可见，在该解决方案中，当 tooltip.opacity 为 0 时，工具提示会隐藏，但在我的情况下，工具提示不透明度始终为 1，smbd 可以帮助我吗？

        tooltips: {
            enabled: false,
            mode: 'x',
            intersect: false,
            custom: (tooltipModel) => {
                if (tooltipModel.opacity === 0) {
                    // never called because opacity is always 1
                    this.hide();
                    return;
                }
                // const position = this.chartRef.current.chartInstance.canvas.getBoundingClientRect();

                // set position of tooltip
                // const left = position.left + tooltipModel.caretX;
                // const top = position.top + tooltipModel.caretY;

                // set values for display of data in the tooltip
                const date = tooltipModel.dataPoints[0].xLabel;
                const value = tooltipModel.dataPoints[0].yLabel;

                // this.setPositionAndData(top, left, date, value);
            },

Answer 1

只是为了向任何其他需要这方面帮助的人澄清。

当您为自定义工具栏创建句柄时，需要注意不要覆盖 this(scope) 对象。尝试使用箭头功能并删除绑定(bind)，fn 将自动获取新范围，并且当您从图表条/线等移出时，不透明度将更新。

如果您尝试使用内联箭头函数覆盖 onClick 函数，图例也会出现同样的问题。下面是一些示例。

_tooltip = (tooltipModel) => {
...
}
_legendOnClick = (ev) => {
    ev.preventDefault()
}
render() {
    const defaultOpt = {
      legend: {
        onClick: this._legendOnClick
      },
      tooltips: {
        enabled: false,
        custom: this._tooltip,
        mode: 'index'
      }
    }
}

如果你想提高性能，你应该从渲染方法中删除defaultOpt。

就是这样