易饼图：错误百分比不居中？ [英] Easy Pie Chart : Bug percentage not centered?
本文介绍了易饼图：错误百分比不居中？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个symfony项目，我使用bootstrap风格，我想使用简单的饼图仪表板页面。
I have a symfony project, I use bootstrap for style, and I want to use Easy Pie Chart for a dashboard page.
所以，在base.html。 twig：
So, in 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 %}
但我有这个：
文本不居中，为什么？
我试图将它添加到我的CSS，但它不工作：
I try to add this in my css but it don't work either :
.easyPieChart {
position: relative;
text-align: center;
canvas {
position: absolute;
top: 0;
left: 0;
}
}
如果我检查生成的代码html： / p>
If I check the code html generated I have :
<div class="row">
<div class="jumbotron">
<div data-percent="55" id="easy-pie-chart">
55%
<canvas height="100" width="100"></canvas></div>
</div>
</div>
似乎缺少style =width：100px; height：100px; line-height：100px; 。在div块中，为什么不动态添加？
It seems missing the style = "width: 100px; height: 100px; line-height: 100px;" in the div block, why is not added dynamically ?
推荐答案
检查小提琴
您忘记在包装器中添加一个类 =chart
You forgot to add a class in the wrapper class="chart"
<div class="row">
<div class="jumbotron">
<div class="chart" data-percent="55" id="easy-pie-chart">
<span class="percent">55</span>
</div>
</div>
</div>
这篇关于易饼图：错误百分比不居中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
