Question

我正在用极坐标图测试 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 "...";
  }

但打字稿不接受它，我找不到一种方法来构建一个清晰的丰富的格式化程序。

非常感谢。

0

Answer 1

我在他们的文档中找到了解决方案：s://www.npmjs/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的图表对象。