我正在用极坐标图测试 react-jsx-highcharts 的可能性。
版本:
React: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 ping 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
的图表对象。
本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处
评论列表(27条)