错误百分比不居中

错误百分比不居中

本文介绍了易饼图:错误百分比不居中?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个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>

这篇关于易饼图:错误百分比不居中?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-02 03:46