如何在工具提示悬停在点 Highcharts 上动态更改图表标题 .. React JS

Posted 2023-05-08

【中文标题】如何在工具提示悬停在点 Highcharts 上动态更改图表标题 .. React JS

【英文标题】：How to change the chart title dynamically on tooltip hover in the points Highcharts.. React JS

【发布时间】：2021-09-27 11:02:48

【问题描述】：

如何在 Highcharts 中悬停时动态更改图表标题 JSfiddle

http://jsfiddle.net/q4b7dvmx/1/

尝试使用 setState，但效果不佳

tooltip:
enabled: true,
                    borderRadius: 0,
                    borderWidth: 0,
                    shadow: false,
                    shared: true,
                    usehtml: true,
                    zIndex: 99999,
                    
                    formatter() 
                        // ToolTip Built Here
                        
                        const  x , y  = this; 

                    
                        let tooltipString = `<div > $y
                                             </div>`;

                                            //  that.props.updateDates( this.points[0].series.userOptions.dates[this.points[0].key] );
                            return tooltipString;
                    

【问题讨论】：

这能回答你的问题吗？ How can I access a hover state in reactjs?

【参考方案1】：

最简单的方法是在工具提示formatter 函数中更改标题文本属性。

    tooltip: 
        ...,
        formatter(e) 
            const 
                x,
                y
             = this;

            e.chart.title.attr(
                text: 'ftest' + ' x value: ' + x
            );
        
    

---

现场演示： http://jsfiddle.net/BlackLabel/tk1avpze/

API 参考： https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr

【参考方案2】：

您是指悬停在数据点上吗？在这种情况下，您的演示对图表标题没有任何作用。

无论哪种方式，您都应该查看此帖子； How can I access a hover state in reactjs?

编辑；

你看到https://api.highcharts.com/highcharts/tooltip.formatter - 它解决了格式化程序。从类似问题的外观来看，这似乎是答案；

Highcharts.js : get specific value from data to tooltip

【讨论】：

图表工具提示悬停时，xAxis 值应动态显示在图表标题上..

你看到了吗api.highcharts.com/highcharts/tooltip.formatter

在工具提示悬停时使用 setTitle 更新，就像这样 this.points[0].series.chart.setTitle(text: 'new chart title' ).... 谢谢