Highchart消失在調整大小，並沒有採取父寬度

Question

我實際上在包含一些統計信息的頁面中工作，並且我得到了一個highcharts的問題。我在互聯網上搜索解決方案已經過了2個小時，並且沒有找到任何解決方案。

第一個問題，我使用引導程序3，所以我的容器是col-xs-6寬。在我的文檔中，寬度大約爲350px。該圖表保持600px寬的渲染。

當然，我發現了方法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 
       }); 

但仍然有第二個，這實在是不可思議。 有什麼想法？