Highchart исчезает при изменении размера и не принимает родительскую ширину

Question

Я на самом деле работаю на странице, которая содержит некоторые статистические данные, и у меня возникла проблема с высокими диаграммами. Прошло уже 2 часа, я искал решение в Интернете и не нашел.

Первая проблема, я использую bootstrap 3, поэтому мой контейнер col-xs-6 шириной. В моих документах это примерно 350 пикселей. Диаграмма сохраняет рендеринг шириной 600 пикселей.

Я нашел метод reflow(), конечно, и он работает, когда я запускаю его вручную в консоли FF, но я пытался выполнить его так и не работал. ..

function getContents(courses, user) { 
    $.ajax({ 
     url: BeginUrl + 'analyse/get/content', 
     type: "post", 
     data: {courses: courses, user_id: user}, 
     beforeSend: function (request) { 
      return request.setRequestHeader('X-CSRF-Token', $('meta[name="_token"]').attr('content')) 
     }, 
     error: function (data) { 
      swal("Oops", data.error.message, "error"); 
     }, 
     success: function (data) { 
      if (data.success) { 
       //update bar about content 
       $('#hero-bar').html(''); 
       $('#hero-bar').highcharts({ 
        chart: { 
         renderTo: 'hero-bar', 
         type: 'column', 
         events:{ 
          load: function() { 
           this.reflow(); 
          } 
         } 
        }, 
        credits: { 
         enabled: false 
        }, 
        legend: { 
         enabled: false 
        }, 
        title: { 
         text: null 
        }, 
        xAxis: { 
         categories: data.contents.categories, 
         crosshair: true 
        }, 
        yAxis: { 
         min: 0, 
         title: { 
          text: '' 
         } 
        }, 
        tooltip: { 
         headerFormat: '<span style="font-size:12px">{point.key}</span><table>', 
         pointFormat: '<tr>' + 
         '<td style="padding:0"><b>{point.y}</b></td></tr>', 
         footerFormat: '</table>', 
         shared: true, 
         useHTML: true 
        }, 
        plotOptions: { 
         column: { 
          pointPadding: 0.1, 
          borderWidth: 0 
         } 
        }, 
        series: data.contents.series 
       }); 
      } 
     }, 
     complete: function() { 
      $('#loader-content-box').fadeOut(400, function(){ 
       $('#content-box').fadeIn(400); 
      }); 
     } 
    }); 
} 

Я пытался в события Params, когда я строю свой график, и я попытался вручную в «полной» из Аякса с: $ («# герой-бар») Highcharts() оплавления();

Оба не работали, конечно .... Когда вручную в консоли, он работает. Я думаю, что это связано с загрузкой и отображением диаграммы, но даже в загрузке событий, которая, похоже, выполняется после того, как рендеринг графика тоже не работает. Конечно, я мог бы установить фиксированное значение в ширину, но мне нужно, чтобы он был отзывчивым.

Вторая проблема, которая обязательно привязана к первой, Когда я изменяю размер моего окна, 2 моей диаграммы просто исчезают, как я назвал метод уничтожения ... не более <rect> или что-нибудь в моем контейнере. Он делает это с предыдущим примером и следующий:

function getDeployement(courses, user) { 
    $.ajax({ 
     url: BeginUrl + 'analyse/get/deployement', 
     type: "post", 
     data: {courses: courses, user_id: user}, 
     beforeSend: function (request) { 
      return request.setRequestHeader('X-CSRF-Token', $('meta[name="_token"]').attr('content')) 
     }, 
     error: function (data) { 
      swal("Oops", data.error.message, "error"); 
     }, 
     success: function (data) { 
      if (data.success) { 
       //update bar line 
       $('#hero-graph').html(''); 
       $('#hero-graph').highcharts({ 
        credits: { 
         enabled: false 
        }, 
        chart: { 
         renderTo: 'hero-graph', 
         height: 320, 
         width: 710 
        }, 
        title: { 
         text: null, 
        }, 
        legend: { 
         enabled: false 
        }, 
        xAxis: { 
         categories: data.deployement.categories 
        }, 
        yAxis: { 
         title: { 
          text: 'No. Participants' 
         }, 
         plotLines: [{ 
          value: 0, 
          width: 1, 
          color: '#808080' 
         }] 
        }, 
        series: data.deployement.series 
       }); 
      } 
     }, 
     complete: function() { 
      $('#loader-deployement-box').fadeOut(400, function(){ 
       $('#deployement-box').fadeIn(400); 
      }); 
      getFacilitators(courses, user); 
     } 
    }); 
} 

Я искал в течение длительного времени и не нашел ничего, что может это исправить.

У кого-нибудь есть идея или у вас есть эта проблема?

Answer 1

Первая проблема решена с

$('#hero-bar').highcharts({ 
        chart: { 
         renderTo: 'hero-bar', 
         type: 'column', 
         events:{ 
          load: function(){ 
           var c = this; 
           setTimeout(function() { 
            $('#hero-bar').highcharts().reflow(); 
           }, 500); 
          } 
         } 
        }, 
        credits: { 
         enabled: false 
        }, 
        legend: { 
         enabled: false 
        }, 
        title: { 
         text: null 
        }, 
        xAxis: { 
         categories: data.contents.categories, 
         crosshair: true 
        }, 
        yAxis: { 
         min: 0, 
         title: { 
          text: '' 
         } 
        }, 
        tooltip: { 
         headerFormat: '<span style="font-size:12px">{point.key}</span><table>', 
         pointFormat: '<tr>' + 
         '<td style="padding:0"><b>{point.y}</b></td></tr>', 
         footerFormat: '</table>', 
         shared: true, 
         useHTML: true 
        }, 
        plotOptions: { 
         column: { 
          pointPadding: 0.1, 
          borderWidth: 0 
         } 
        }, 
        series: data.contents.series 
       }); 

Но еще есть второй, который на самом деле странно. Любая идея?