简单的饼图：错误百分比不居中？

我有一个symfony项目，我使用bootstrap作为样式，我想使用Easy Pie Chart作为仪表板页面。

所以，在base.html.twig中：

    {% 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' %}  {% endjavascripts %} {% endblock %}    {% block header %} {% endblock %} 
 {% block body %} {% endblock %} 
 {% block javascripts_after %} {% endblock %}   

在我的仪表板页面中，我有：

 {% block body %} 
 
 
 55% 
 
 
 {% endblock %} {% block javascripts_after %}  $('#easy-pie-chart').easyPieChart({ animate: 2000, scaleColor: false, lineWidth: 12, lineCap: 'square', size: 100, trackColor: '#e5e5e5', barColor: '#3da0ea' });  {% endblock %} 

但我有这个：

文字没有居中，为什么？

我尝试在我的CSS中添加它，但它也不起作用：

 .easyPieChart { position: relative; text-align: center; canvas { position: absolute; top: 0; left: 0; } } 

如果我检查生成的代码html我有：

 
 
 
 55% 
 
  

似乎缺少style =“width：100px; height：100px; line-height：100px;” 在div块中，为什么不动态添加？

Answer 1

检查这个小提琴

你忘了在包装器class="chart"添加一个类

 
 
 
 55 
 
  

Answer 2

感谢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' }) 

它运作良好，但我认为这不是更好的解决方案

Answer 3

我用这个代码就是Work

您可以更改“数据百分比”值

Jquery：

 $('.chart').easyPieChart({ easing: 'easeOutBounce', onStep: function(from, to, percent) { $(this.el).find('.percent').text(Math.round(percent)); } }); 

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

你可以像这样改变大小

 .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)); } }); }); 

Answer 4

回答你的问题：

文字没有居中，为什么？

根据我的经验，这是因为百分比的线高和canvas的线高不同，百分比需要额外的填充/边距。 因此，两个元素都位于相同基线的dom框中，即在底部0，左边0对齐。

垂直中心

文本百分比不会垂直浮动，因为它的行高小于图表的行高。 所以它被抑制/推压，因为它不能超过它的容器顶部。

因此，要允许文本浮动到图表的垂直中心，您需要将百分比范围的行高设置为与图表的行高相同。 然后文本将浮动到它的行高中间，这将是图表的中间位置。

水平中心

然后是水平中心。 由于文本左对齐0，你需要一个正确的区域“凹凸”，为此我使用了一些填充左边。

至于这是否是一个“虫子”，我不知道。 我认为你期望你将根据项目的需要编辑CSS，而不是为你运行这个计算的插件…这将是一个相当简单的计算。