并排保留两个饼图

时间:2018-01-03 04:33:34

标签: html canvas chart.js pie-chart

我有下面的代码,其中两个饼图显示为自上而下。相反,我需要并排显示它们。

我尝试了以下方法,但我未能实现。

有人可以帮我知道我哪里做错了吗?

代码

<div id="contain">  
    <div id="canvas-holder" style="width:50%" class="col-xs-6">
        <canvas id="chart-area" width="400" height="450"  style="display: block; float:left;margin-left:2em">
        <!--<canvas id="chart-area-km" width="400" height="450" style="display: block; float:right;margin-left:2em">-->
    </canvas></div>
    <!-- <div style="width: 50%">
        <canvas id="canvas" height="450" width="600"></canvas>
    </div>-->
    <div id="canvas-holder-keymsg" style="width:50%" class="col-xs-6">
        <canvas id="chart-area-km" width="400" height="450" style="display: block; float:right;margin-left:2em">
    </canvas></div>

    </div>

2 个答案:

答案 0 :(得分:1)

我已经放了代码jsfiddle。正确使用帆布支架

 <div id="contain">
 <div id="canvas-holder" style="background-color:#ff3400;width:50%;float: right;" \
 class="col-xs-6">
 <canvas id="chart-area" width="400" height="450" \
 style=" float:left;margin-left:2em"></canvas></div>
 <div id="canvas-holder" style="background-color:#000;width:50%;float: right;" \
 class="col-xs-6">
 <canvas id="chart-area-km" width="400" height="450" \
 style="float:left;margin-left:2em"></canvas></div>
 </div>

答案 1 :(得分:0)

这样的事情应该让你开始:

<div id="contain">  
    <div id="canvas-holder" style="float:left;">
        <canvas id="chart-area" width="400" height="450" style="background-color:#ff3400;">
    </canvas></div>
    <div id="canvas-holder-keymsg" style="float:right;">
        <canvas id="chart-area-km" width="400" height="450" style="background-color:#289182;">
    </canvas></div>
</div>