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

我正在用极坐标图测试 react-jsx-highcharts 的可能性。

我正在用极坐标图测试 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 来生成丰富的格式化程序。例如herehere

我试图使用显式类型:

const tooltipFormatter:TooltipFormatterCallbackFunction = (mycontext: TooltipFormatterContextObject, mytooltip: Tooltip) => {
    return "...";
  }

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

非常感谢。

0

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

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(964)
Nest.js-"无效命令:start"
上一篇
为什么XInput通过USB识别DualSense控制器 而不是蓝牙
下一篇

相关推荐

发表评论

登录 后才能评论

评论列表(40条)