如何使用角图表和chart.js之控制图的宽度？

Question

我使用角图（和角度，很明显）和chart.js之于单一页面上绘制多个图表。目前，每个图表占据屏幕的整个宽度。我已经尝试了许多不同的变体，以基于“window.innerWidth”的比率和许多不同的结构变化来限制宽度。我所有的努力都被忽略了。它绘制一个完全正常图表，但是有一个不移宽度（除当我扩大/缩小整体窗口变化的）。

这是我目前的HTML的摘录：

<div ng-repeat="dataCenterData in dataCenterDataList"> 
 
\t <div ng-style="{'width': windowWidth/2}"> 
 
\t \t <canvas id="daily-chart-{{dataCenterData.dataCenter}}" 
 
\t \t \t class="chart chart-bar" chart-data="dataCenterData.data" 
 
\t \t \t chart-labels="dataCenterData.labels" 
 
\t \t \t chart-series="dataCenterData.series" 
 
\t \t \t chart-options="dataCenterData.options"></canvas> 
 
\t </div> 
 
\t <div ng-style="{'width': windowWidth/2}"> 
 
\t \t <canvas id="last30Minutes-chart-{{dataCenterData.dataCenter}}" 
 
\t \t class="chart chart-line" 
 
\t \t chart-data="last30MinutesDataCenterDataList[$index].data" 
 
\t \t chart-labels="last30MinutesDataCenterDataList[$index].labels" 
 
\t \t chart-series="last30MinutesDataCenterDataList[$index].series" 
 
\t \t chart-options="last30MinutesDataCenterDataList[$index].options"></canvas> 
 
\t </div> 
 
</div>

我哪里有 “$ scope.windowWidth = window.innerWidth” 在我的控制器。我在我目前的测试情况下，它设置为“$ scope.windowWidth”确定了到1432

Answer 1

引导网格系统将帮助你在同一行的两列两个显示的图表。 bootstrap中有一行有12列。所以，对于一个两列的布局，我们将它们分成两个6这样的每个div。

<div class="container" ng-app="app" ng-controller="ChartCtrl"> 
    <div class="row"> 
     <div class="col-md-6"> 
      Column1 
     </div> 
     <div class="col-md-6"> 
      Column2 
     </div> 
    </div> 
</div> 

演示：https://jsfiddle.net/codeandcloud/vz4qhqpw/show/
源代码：https://jsfiddle.net/codeandcloud/vz4qhqpw/

依赖

1. 的jquery.js
2. Bootstrap.js
3. Bootstrap.css

如果你希望他们在两排像做

<div class="container" ng-app="app" ng-controller="ChartCtrl"> 
    <div class="row"> 
     <div class="col-md-offset-3 col-md-6"> 
      Column1 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-offset-3 col-md-6"> 
      Column2 
     </div> 
    </div> 
</div>