如何将Donut Chart JS放入Bootstrap列? [英] How to fit Doughnut Chart JS into Bootstrap column?
问题描述
我希望Chart.js中的Donut图形适合我的引导列。我也希望此列具有特定的大小(实际上,我更关心高度)。问题在于canvas div的大小实际上大于我的列div,并且所有图表相互重叠。理想情况下,我希望所有4个图表都对齐到该行的右边,并在右边留一点空间(例如10px的空白)。
I want my Doughnut graphic from Chart.js to fit into my bootstrap column. I also want this column to be specific size (actually, I more concerned about height). The problem is that size of canvas div is actually bigger than my column div and all charts overlap on each other. Ideally, I want all 4 charts to be aligned to the right of the row and have a little space from the right (some margin of 10px for example).
ve尝试在div列和画布上使用边距/填充设置。无法弄清...
I've tried to play around with margin/padding settings on the column div and canvas. Can't figure it out...
这里是 jsfiddle 示例
我的HTML:
<div class="row">
<div class="col-sm-3">
Some content
</div>
<div class="col-sm-3">
Some other content
</div>
<div class="col-sm-2"></div>
<div class="col-sm-1">
<div class="chart-container" style="position: relative; width: 200px; height: 100px;">
<canvas id="chart1" width="200" height="100"></canvas>
</div>
</div>
<div class="col-sm-1">
<div class="chart-container" style="position: relative; width: 200px; height: 100px;">
<canvas id="chart2" width="200" height="100"></canvas>
</div>
</div>
<div class="col-sm-1">
<div class="chart-container" style="position: relative; width: 200px; height: 100px;">
<canvas id="chart3" width="200" height="100"></canvas>
</div>
</div>
<div class="col-sm-1">
<div class="chart-container" style="position: relative; width: 200px; height: 100px;">
<canvas id="chart4" width="200" height="100"></canvas>
</div>
</div>
</div>
和我的JS:
var myNewChart;
var data = [{
value: 30,
color: "#F7464A"
}, {
value: 50,
color: "#E2EAE9"
}, {
value: 100,
color: "#D4CCC5"
}, {
value: 40,
color: "#949FB1"
}, {
value: 100,
color: "#4D5360"
}];
var options = {
animation: true,
animationEasing: 'easeInOutQuart',
animationSteps: 80
};
//Get the context of the canvas element we want to select
var ctx1 = document.getElementById("chart1")
.getContext("2d");
var ctx2 = document.getElementById("chart2")
.getContext("2d");
var ctx3 = document.getElementById("chart3")
.getContext("2d");
var ctx4 = document.getElementById("chart4")
.getContext("2d");
/*******************************************************/
myNewChart1 = new Chart(ctx1).Doughnut(data, options);
myNewChart2 = new Chart(ctx2).Doughnut(data, options);
myNewChart3 = new Chart(ctx3).Doughnut(data, options);
myNewChart4 = new Chart(ctx4).Doughnut(data, options);
推荐答案
您可以添加一些CSS来正确设置Chart.js的样式画布
和 div
容器:
You can add some CSS to properly style Chart.js canvas
and div
container:
canvas {
width: 100%;
height: 100%;
display: block;
}
div.chart-container {
padding: 1px;
}
检查此小提琴已更新: http://jsfiddle.net/beaver71/ht7uevay/
Check this fiddle updated: http://jsfiddle.net/beaver71/ht7uevay/
这篇关于如何将Donut Chart JS放入Bootstrap列?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!