twitter-bootstrap 简单饼图：错误百分比未居中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20274928/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Easy Pie Chart : Bug percentage not centered?
提问by user2178964
I have a symfony project, I use bootstrap for style, and I want to use Easy Pie Chart for a dashboard page.
我有一个 symfony 项目，我使用 bootstrap 作为样式，我想使用 Easy Pie Chart 作为仪表板页面。
So, in base.html.twig :
所以，在 base.html.twig 中：
<html>
<head>
<meta charset="UTF-8" />
<title>{% block title %} Website {% endblock %}</title>
{% block stylesheets %}{% endblock %}
{% block javascripts %} {% javascripts
'js/jquery-1.10.2.min.js'
'js/bootstrap.min.js'
'js/typeahead.min.js'
'js/jquery.easypiechart.min.js'
'js/jquery.sparkline.min.js' %}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
<link rel="icon" type="image/x-icon" href="{{ asset('img/favicon.png') }}" />
</head>
<body>
{% block header %}
{% endblock %}
<div class="container">
{% block body %}
{% endblock %}
</div>
{% block javascripts_after %}
{% endblock %}
</body>
</html>
In my dashboard page I have :
在我的仪表板页面中，我有：
{% block body %}
<div class="row">
<div class="jumbotron">
<div id="easy-pie-chart" data-percent="55">
55%
</div>
</div>
</div>
{% endblock %}
{% block javascripts_after %}
<script>
$('#easy-pie-chart').easyPieChart({
animate: 2000,
scaleColor: false,
lineWidth: 12,
lineCap: 'square',
size: 100,
trackColor: '#e5e5e5',
barColor: '#3da0ea'
});
</script>
{% endblock %}
But I have this :
但我有这个：
The text is not centered, why ?
文字没有居中，为什么？
I try to add this in my css but it don't work either :
我尝试在我的 css 中添加它，但它也不起作用：
.easyPieChart {
position: relative;
text-align: center;
canvas {
position: absolute;
top: 0;
left: 0;
}
}
If I check the code html generated I have :
如果我检查生成的代码 html，我有：
<div class="row">
<div class="jumbotron">
<div data-percent="55" id="easy-pie-chart">
55%
<canvas height="100" width="100"></canvas></div>
</div>
</div>
It seems missing the style = "width: 100px; height: 100px; line-height: 100px;" in the div block, why is not added dynamically ?
似乎缺少样式 = "width: 100px; height: 100px; line-height: 100px;" 在 div 块中，为什么不动态添加？
回答by ppollono
回答by user2178964
Thanks to ppollono, I add this in my js :
感谢 ppollono，我在我的 js 中添加了这个：
$('#easy-pie-chart').css({
width : $('#easy-pie-chart > canvas').attr('width') + 'px',
height : $('#easy-pie-chart > canvas').attr('height') + 'px'
});
$('#easy-pie-chart .percent').css({
"line-height": $('#easy-pie-chart > canvas').attr('height') + 'px'
})
It works well, but I don't think if it's the better solution
它运作良好，但我不认为这是否是更好的解决方案
回答by OmarAldaja
I use this code and is Work
我使用此代码并且是工作
<span class="chart" data-percent="86">
<span class="percent"></span>
</span>
You can change "data-percent" value
您可以更改“数据百分比”值
Jquery :
查询：
$('.chart').easyPieChart({
easing: 'easeOutBounce',
onStep: function(from, to, percent) {
$(this.el).find('.percent').text(Math.round(percent));
}
});
Css :
css :
.chart {
position: relative;
display: inline-block;
width: 110px;
height: 110px;
margin-top: 50px;
margin-bottom: 50px;
text-align: center;
}
.chart canvas {
position: absolute;
top: 0;
left: 0;
}
.percent {
display: inline-block;
line-height: 110px;
z-index: 2;
}
.percent:after {
content: '%';
margin-left: 0.1em;
font-size: .8em;
}
You can change size like this
你可以像这样改变大小
.chart {
/* ... */
width: 200px;
height: 200px;
/* ... */
}
.percent {
/* ... */
line-height: 200px;
/* ...*/
}
$(function() {
$('.chart').easyPieChart({
easing: 'easeOutBounce',
size: 200, /* New Size */
onStep: function(from, to, percent) {
$(this.el).find('.percent').text(Math.round(percent));
}
});
});
回答by rism
To answer your question:
回答你的问题：
The text is not centered, why ?
文字没有居中，为什么？
In my experience it's because the line height of the percentage and the line height of canvas are different and the percentage needs extra padding/margin left. So both elements are in a dom box sitting at the same baseline i.e. aligned on bottom 0, left 0.
以我的经验，这是因为百分比的行高和画布的行高不同，百分比需要额外的填充/左边距。所以这两个元素都在一个 dom box 中，位于相同的基线，即对齐在底部 0，左侧 0。
Vertical Center
垂直中心
The percentage text doesn't float vertically because it's line height is less than the line height of the chart. So it's suppressed/pushed down because it cant rise above the top of it's container.
百分比文本不会垂直浮动，因为它的行高小于图表的行高。所以它被抑制/推下，因为它不能升到它的容器顶部。
So to allow the text to float up to the vertical center of the chart you need to set the line height of the percentage span to be the same as the line height of the chart. The text will then float up to the middle of it's line height which will be the middle of the chart.
因此，为了让文本浮动到图表的垂直中心，您需要将百分比跨度的行高设置为与图表的行高相同。然后文本将浮动到它的行高的中间，这将是图表的中间。
Horizontal Center
水平中心
Then there is the horizontal center. Since the text is aligned left 0, you need a right ward "bump" and for that I used some padding-left.
然后是水平中心。由于文本左对齐 0，因此您需要一个右侧病房“凹凸”，为此我使用了一些 padding-left。
As to whether or not this is a "bug" i dunno. I think it expected that you will edit the CSS as necessary for your project rather than the plugin running this calculation for you... tho it would be a fairly simple thing to compute.
至于这是否是一个“错误”，我不知道。我认为它希望您根据项目的需要编辑 CSS，而不是为您运行此计算的插件……尽管计算起来相当简单。
