具有功能组件和格式化程序的react-jsx-highcharts

如何解决具有功能组件和格式化程序的react-jsx-highcharts

我正在用极坐标图测试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 状态的图表对象。