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

Question

如何在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;
}
}

Answer 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

Answer 2

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

不管怎样，你都应该查看这篇帖子；如何在reactjs中访问悬停状态？

编辑；

你看到了吗https://api.highcharts.com/highcharts/tooltip.formatter-它寻址格式化程序。从一个类似的问题来看，这似乎是答案；

Highcharts.js：从数据中获取特定值到工具提示