Highchart在初始加载时无法显示正确的大小，仅在React js中调整窗口大小时会重新调整大小

问题描述

目前，我正在React中开发图表。我正在使用Highchart。我的问题是，当我的图表第一次加载时，大小没有跟随容器的大小，当我调整窗口大小时，只有图表显示正确的大小。

建议使用许多解决方案

 chart.reflow();

但是如何在React代码中使用它？

我尝试过

.highcharts-container,.highcharts-container svg {
  width: 100% !important;
}

不起作用

总是在初始时图表会像这样

我需要图表完全显示在黄线上

我的图表代码

 this.setState({
  chartDrawSector: {
    chart: {
      type: 'column',height: '600',events: {
        load: function(event) {
          event.target.reflow();// i tried this not working also..
        }
      }
    },title: {
      text: 'Sector All'
    },// subtitle: {
    //   text: 'Source: Worldclimate.com'
    // },xAxis: {
      categories: sectorName[0],crosshair: true
    },yAxis: {
      min: 0,title: {
        text: displayMode == 'f' ? 'figures' : 'Percentage %'
      }
    },tooltip: {
      headerFormat: '<span style="font-size:10px">{point.key}</span><table>',pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
        '<td style="padding:0"><b>{point.y:.1f} </b></td></tr>',footerFormat: '</table>',shared: true,useHTML: true
    },plotOptions: {
      column: {
        pointPadding: 0.2,borderWidth: 0
      }
    },series: [{
      name: 'Ultimate Negative',data: n30Data[0],color: 'rgb(100,30,22 )'

    },{
      name: 'Ultimate Positive',data: gt30Data[0],color: 'rgb(27,79,114)'

    },]
  }
})

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）