时间戳

首页 > 解决方案 > Highcharts 使用拖动/调整大小 react-rnd 库自动调整大小

reactjs - Highcharts 使用拖动/调整大小 react-rnd 库自动调整大小

问题描述

我想创建一个组件，其中图表的大小会随着保存图表的容器的调整大小事件自动调整。如果有人可以帮助我举个例子，那就太好了。这里是图书馆的链接。react-rnd 库

Ex somehting like this but using highcharts codebox react-rnd with googlecharts

const Highchart = () => {
 
return (

<rnd>
<div>
<HightchartsReact highcharts={Highcharts} constructorType={'chart'} options={option} /> 
</div>
</rnd>
)
}

标签： reactjshighcharts

解决方案

您需要在事件回调函数中调用chart.reflow方法。onResizeStop

return (
  <Rnd
    ...
    onResizeStop={(e, direction, ref, delta, position) => {
      const chart = this.chartComponent.current?.chart;
      if (chart) {
        chart.reflow();
      }
      ...
    }}
  >
    ...
  </Rnd>
);

来自 Highcharts API：

回流（[e]）

将图表重排到其容器。默认情况下，根据 chart.reflow 选项，在 window.resize 事件之后，图表会自动回流到其容器。但是，对于 div 调整大小没有可靠的事件，因此如果在没有窗口调整大小事件的情况下调整容器大小，则必须显式调用。

现场演示： https ://codesandbox.io/s/cranky-hoover-cz-czw5k?file=/src/index.js

API 参考： https ://api.highcharts.com/class-reference/Highcharts.Chart#reflow

推荐阅读