Question

我使用角度图表（显然是Angular）和chart.js在单个页面上绘制多个图表。目前，每个图表占据屏幕的整个宽度。我已经尝试了很多不同的变化来根据＆＃34; window.innerWidth＆＃34;的比例来限制宽度，以及许多不同的结构变化。我的所有努力都被忽略了。它绘制了一个非常精细的图表，但具有不动摇的宽度（除了在我扩展/缩小整个窗口时更改）。

以下是我当前HTML的摘录：

＆＃13;

{{1}}

＆＃13;

我在哪里＆＃34; $ scope.windowWidth = window.innerWidth＆＃34;在我的控制器中。我在目前的测试用例中确定了它的设置＆＃34; $ scope.windowWidth＆＃34;到1432年。

Answer 1

Bootstrap网格系统将帮助您在同一行的两列中显示两个图表。 bootstrap中的一行有12列。因此，对于两列布局，我们将它们分成两个div，每个6个像这样。

<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/

依赖

的jquery.js
Bootstrap.js
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>

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

1 个答案: