不支持框架寬度的Angular highchart和ng-grid標題

Question

我有幾張圖表利用highcharts插件和指令，以及使用ng-grid通過我的應用程序的表格。在查看主頁後直接查看帶圖表或表格的頁面時，圖表和表格不考慮其框架寬度，並且展開爲寬度爲1900像素（請參閱圖像：http://i.imgur.com/6uDrZBc.png?1）。在刷新頁面一次之後，圖表和網格就像它們應該放在框架內一樣。什麼可能導致這個問題？

下面的代碼，讓我知道，如果任何其他代碼會有所幫助。謝謝。

HTML爲違規網頁之一：

<div class="col-md-7" id="chart"> 
    <div class="panel panel-default"> 
     <div class="panel-heading" ng-init="isCollapsed = false"> 
      <div class="panel-title"> 
       Top 8 Drugs by 2013 Revenue 
       <button class="pull-right btn btn-xs" ng-click="isCollapsed = !isCollapsed"><span 
         class="text-center" 
         ng-class="{'fa fa-plus': isCollapsed, 'fa fa-minus': !isCollapsed}"></span></button> 
      </div> 
     </div> 
     <div class="panel-body" collapse="isCollapsed" ng-if="Revenues[0].evaluate_productRevenue2013 > 0"> 
      <div class="col-xs-12" ng-cloak> 
       <highchart id="company-chart-overview-1" config="chartConfig"></highchart> 
      </div> 
      <div class="row-fluid col-xs-offset-5"> 
       <div class='my-legend'> 
        <div class='legend-title'>RxScore Safety Indicator </div> 
        <div class='legend-scale'> 
         <ul class='legend-labels'> 
          <li><span style='background:#008000;'></span>Low</li> 
          <li><span style='background:#FFFF00;'></span></li> 
          <li><span style='background:#E69628;'></span></li> 
          <li><span style='background:#FF0004;'></span>High</li> 
         </ul> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Highcharts配置：

exports.getOverviewChart =函數（RevenueSlices）{ VAR的companyName;

var Series = [ 
     {name: 'Revenue ($MM USD)', data: [], type: 'column'} 
    ]; 
    var cCategories = []; 
    var colors = ['green', 'yellow', '#CD7D0F', 'red']; 
    var thresholds = [47.17, 55.81, 61.83, 82.83]; 
    var cleanSlices = _.reject(RevenueSlices, function (sl) { 
     return sl.BrandName === "Unknown"; 

    }); 

    cleanSlices = _.filter(cleanSlices, function (cs) { 
     return Math.abs(cs.evaluate_productRevenue2013) > 0; 
    }); 

    angular.forEach(cleanSlices, function (o) { 
     var s = Math.abs(o.metric_rxscore); 
     var color; 
     if (s >= thresholds[2]) { 
      color = colors[3]; 
     } else if (s >= thresholds[1]) { 
      color = colors[2]; 
     } else if (s >= thresholds[0]) { 
      color = colors[1]; 
     } else if (s >= 1) { 
      color = colors[0]; 
     } else { 
      color = 'lightgrey'; 
     } 

     companyName = o.parent; 
     cCategories.push(o.BrandName); 
     Series[0].data.push({name: o.BrandName, color: color, y: Math.abs(o.evaluate_productRevenue2013)}); 
    }); 
    var overviewChart = { 
     options: { 
      chart: { 
       type: 'StockChart' 
      }, legend: { 
       enabled: false 
      }, 


      exporting: { 
       enabled: false 
      }, 
      plotOptions: { 
       series: { 
        stacking: '' 
       } 
      } 
     }, 
     size: { 
      // width: 573, 
      height: 380 
     }, 
     xAxis: { 
      title: { 
       text: 'Drug' 
      }, 
      categories: cCategories 
     }, 
     yAxis: { 
      title: { 
       text: '2013 Revenue' 
      }, 
      labels: { 
       format: '{value} $MM USD' 
      } 


     }, credits: { 
      enabled: false 
     }, 
     series: Series, 
     title: { 
      style: { 'display': 'none' } 
     } 

    }; 


    return overviewChart; 

}; 

NG-網格選項：

var tmp = companyChartService.getOverviewChart(Revenues.slice(0, 8)); 
$scope.colDefs = companyGridService.getColDefs(); 
$scope.ToolTipper = tooltipService.getTooltip; 

$scope.colDefs = companyGridService.getColDefs(); 

$scope.myData = Revenues; 
$scope.gridOptions = { 
    data: 'myData', 
    enableSorting: true, 
    enableColumnResize: true, 
    showGroupPanel: true, 
    enableCellGrouping: true, 
    showColumnMenu: true, 
    enablePinning: true, 
    showFilter: true, 
    jqueryUITheme: true, 
    //cellClass: 'drugName', 
    columnDefs: 'colDefs' 
    //rowClass: 'drugName' 
}; 

Answer 1

這個問題是由，正在與納克級的指令適用錯誤的CSS規則造成的。直到新狀態加載後，css才被刪除，因此儘管它不可​​見，但它會影響ng-grid和highcharts用來確定其大小的頁面寬度。重寫css並刪除ng-class後，問題就解決了。

對於那些有類似的問題，再過可能的解決方案在NG-電網教程突出位置http://ui-grid.info/docs/#/tutorial/108_hidden_grids：

1. 給電網一個特定的高度和寬度，如下面的例子。
2. 使用ng-if可以防止網格被渲染，直到它所在的元素（tab/accordion/etc）處於活動狀態，就像在這個plunker中一樣。
3. 使用autoResize功能讓網格根據需要重繪。這可能會導致閃爍，因爲檢查週期爲250ms。 這是一個展示這一點的蹲伏者。