Блог

в настоящее время я разрабатываю диаграмму в своем 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)'

    },

    ]
  }
})