如何使用图表工具提示格式化程序？我正在为 highcharts 使用 react 包装器。
我有这样的配置：
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
},
...
}
但是我无法使用此关键字访问图表范围，也无法从工具提示参数中获得要点。谢谢
OP 无法弄清楚如何使用this关键字访问图表的范围。简单的答案是因为 OP 使用了一个粗箭头函数。相反，请尝试根据 OP 代码的此修改版本使用普通函数：
const CHART_CONFIG = {
...
tooltip:
{
formatter() { // Use a normal fn, not a fat arrow fn
// Access properties using `this`
// Return HTML string
},
shared: true
},
...
}
我已经遇到过这个问题。我通过创建一个函数来格式化工具提示，并将默认值应用于我想要的数据，从而解决了这个问题。
这是一个实时示例，代码如下：
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 组件用作工具提示本身的一部分。
const Item = ({name, value}) => <div> {name}: {value}</div>
const config = {
formatter(this) {
const container = document.createElement("div");
return this.points.map(point => {
ReactDOM.render(
<Item name={point.series.name} value={point.y}/>
)
return container.innerHTML
}
}
}
Highcharts 预计 tootlip fromatter 将返回一个 HTML 字符串。当对 Highcharts 使用 react 包装器时，可以使用格式化数据编写自定义工具提示组件，然后在设置格式化程序功能时的选项中，您可以使用ReactDOMServer 的 renderToString方法，该方法将从给定元素创建 HTML 字符串。虽然 renderToString 主要用于服务器端渲染，但它可以毫无问题地用于浏览器环境。
import ReactDOMServer from 'react-dom/server';
import CustomTooltip from './CustomTooltip';
const options = {
tooltip: {
formatter() {
return ReactDOMServer.renderToString(<CustomTooltip {...this} />);
},
},
};