本文介绍了易饼图:错误百分比不居中?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个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>
这篇关于易饼图:错误百分比不居中?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!