一行显示几个chartJs的图表
因为chartJs在canvas展示图表的时候会直接在canvas上修改相关css样式大小之类的,所以无法修改canvas的样式,可以在canvas的外层套div,然后用弹性盒子模型处理:
HTML
<div class="box-flex">
<div class="flex">
<canvas #chartPie1 height="200"></canvas>
</div>
<div class="flex">
<canvas #chartPie2 height="200"></canvas>
</div>
</div>
css:
.box-flex{
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.flex{
width: 0;
-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
/*width: 20%;*/ /* For old syntax, otherwise collapses. */
-webkit-flex: 1; /* Chrome */
-ms-flex: 1; /* IE 10 */
flex: 1;
}