ChartJS 并排保存两个饼图

8cdiaqws 于 2023-04-20 发布在 Chart.js

关注(0)|答案(2)|浏览(189)

我有下面的代码，其中两个饼图显示自上而下。相反，我需要显示他们并排。
我试过下面的方法，但我没有做到这一点。
有人能帮我知道我哪里做错了吗？

编码

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

chart.js

来源：https://stackoverflow.com/questions/48071212/keep-two-pie-charts-side-by-side

2条答案

按热度按时间

2ul0zpep1#

我已经把代码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>

赞(0）回复(0）举报 2023-04-20

yc0p9oo02#

像这样的东西应该让你开始：

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

赞(0）回复(0）举报 2023-04-20

我来回答

ChartJS 并排保存两个饼图

2条答案

相关问题

热门标签

最新问答