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

Question

我正在使用angular-chart（显然是Angular）和chart.js在单个页面上绘制多个图表。 当前，每个图表占据了屏幕的整个宽度。 我已经尝试了许多不同的变体来限制基于“ window.innerWidth”比率的宽度，以及许多不同的结构变体。 我所有的努力都被忽略了。 它绘制了一张非常精美的图表，但宽度不变（除了在我扩大/缩小整个窗口时进行更改）。

这是我当前的HTML的摘录：

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