如何在react-highcharts中使用图表工具提示格式化程序? [英] How can I use chart tooltip formatter in react-highcharts?
本文介绍了如何在react-highcharts中使用图表工具提示格式化程序?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何使用图表工具提示格式化程序?我正在为highcharts使用react包装器.
我有这样的配置:
how can I use chart tooltip formatter?
I am using react wrapper for highcharts.
I have config like this:
const CHART_CONFIG = {
...
tooltip:
{
formatter: (tooltip) => {
var s = '<b>' + this.x + '</b>';
_.each(this.points, () => {
s += '<br/>' + this.series.name + ': ' + this.y + 'm';
});
return s;
},
shared: true
},
...
}
但是我无法使用此关键字访问图表范围,也无法从工具提示参数中获取要点.谢谢
But I can't access chart scope using this keyword and also I can't get point from tooltip param. Thanks
推荐答案
我已经遇到此问题.我已经解决了这一问题,方法是创建一个函数来格式化工具提示,然后将默认值应用于所需的数据.
I've already encountered this problem. I've solved it by creating a function to format the tooltip, and applying default values to the data I wanted.
这是一个生动的例子,代码如下:
import React, { Component } from 'react';
import { render } from 'react-dom';
import ReactHighcharts from 'react-highcharts';
import './style.css';
class App extends Component {
static formatTooltip(tooltip, x = this.x, points = this.points) {
let s = `<b>${x}</b>`;
points.forEach((point) =>
s += `<br/>${point.series.name}: ${point.y}m`
);
return s;
}
static getConfig = () => ({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
tooltip: {
formatter: App.formatTooltip,
shared: true,
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
data: [194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4]
}],
})
render() {
return (
<div>
<ReactHighcharts config={App.getConfig())} />
</div>
);
}
}
render(<App />, document.getElementById('root'));
这篇关于如何在react-highcharts中使用图表工具提示格式化程序?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文