Question

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

所以，在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>

在我的信息中心页面中，我有：

{% 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 %}

但我有这个：

enter image description here

文字不在中心，为什么？

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

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

如果我检查生成的代码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>

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

Answer 1

选中此fiddle

您忘记在包装器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>

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

我使用此代码并且正在工作

<span class="chart" data-percent="86">
<span class="percent"></span>
</span>

您可以更改＆＃34;数据百分比＆＃34;值

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

回答你的问题：

文字不在中心，为什么？

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

垂直中心

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

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

横向中心

然后是水平中心。由于文本左对齐，你需要一个正确的病房＆＃34; bump＆＃34;为此我用了一些填充物。

至于这是否是一个＆＃34; bug＆＃34;我不知道。我认为你期望你将为你的项目编辑CSS，而不是为你运行这个计算的插件...这将是一个相当简单的计算。

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

4 个答案: