时间戳

首页 > 解决方案 > 如何在 react-jsx-highstock （Highcharts）中动态查找 x 轴 plotband 宽度的宽度？

javascript - 如何在 react-jsx-highstock （Highcharts）中动态查找 x 轴 plotband 宽度的宽度？

问题描述

我正在使用https://www.npmjs.com/package/react-jsx-highstock库来绘制数据。我想动态地知道绘图带的宽度，当我检查 Highcharts 时，有事件重绘和加载，我们可以通过这些事件找到绘图带的宽度（http://jsfiddle.net/hfrntt/fdTEx/4661/）。现在我想知道它在react-jsx-highstock库中是如何工作的。由于这个库提供了 react 组件，所以不知道在哪里添加这些事件。

import { Chart, HighchartsStockChart, PlotBand, Series, useChart, XAxis, YAxis } from 'react-jsx-highstock'


<HighchartsStockChart plotOptions={plotOptions}>
    <Chart {...chartOptions} />
    <GenericOptions {...genericOptions} />

     <XAxis {...xAxis}>
       {(dayBands || []).map((plotBand) => (
         <PlotBand key={`{plotBand.label?.text}`} {...plotBand} />
       ))}
     </XAxis>

     <YAxis {...yAxis}>
       {(seriesData || []).map((series, index) => (
          <Series key={index} id={index} {...series} />
        ))}
      </YAxis>
</HighchartsStockChart>

在此处输入图像描述

标签： javascriptreactjshighchartsreact-hooks

解决方案

我鼓励您使用完全支持的 highcharts-react-official 包装器。

https://github.com/highcharts/highcharts-react

https://www.npmjs.com/package/highcharts-react-official

稍后，请使用示例数据在在线编辑器上重现您的问题，您可以从这个演示开始：https ://codesandbox.io/s/highcharts-react-demo-gnev1?file=/demo.jsx

推荐阅读