问题描述
我正在用极坐标图测试react-jsx-highcharts的可能性。
版本:
反应:17.0.1
react-jsx-highcharts:4.2.0
打字稿:4.0.3
我正在使用功能组件。因此,我的代码中没有任何“类”或“ this”。
图表代码为:
<HighchartsProvider Highcharts={Highcharts}>
<HighchartsChart polar plotOptions={plotOptions}>
<Tooltip shared
formatter={tooltipformatter}
/>
...
</HighchartsChart>
</HighchartsProvider>
我发现的所有示例都使用this.x,this.value生成丰富的格式化程序。 例如here或here
我尝试将显式类型用作:
const tooltipformatter:TooltipformatterCallbackFunction = (mycontext: TooltipformatterContextObject,mytooltip: Tooltip) => {
return "...";
}
但是打字稿不接受它,而且我找不到建立清晰丰富的格式化程序的方法。
谢谢!
解决方法
我在他们的文档中找到了解决方案:https://www.npmjs.com/package/react-jsx-highcharts ,它在“例外 1”中提到:
Where Highcharts events are concerned - instead of passing events as an object,we use the React convention onEventName.
因此我们可以使用 <HighchartsChart>
元素中的回调道具来获取图表对象,如下所示:
const [chart,setChart] = useState({});
const setChart = cha => {
setChart(cha);
}
...
<HighchartsProvider Highcharts={ Highcharts }>
<HighchartsChart plotOptions={ plotOptions } chart={ chartOptions } callback={ setChart }>
...
我们可以访问具有 chart
状态的图表对象。