Easy Pie Chart : Bug percentage not centered?

问题

I have a symfony project, I use bootstrap for style, and I want to use Easy Pie Chart for a dashboard page.

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

But I have this :

The text is not centered, why ?

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

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>

It seems missing the style = "width: 100px; height: 100px; line-height: 100px;" in the div block, why is not added dynamically ?

回答1:

Check this fiddle

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>

回答2:

Thanks to ppollono, I add this in my 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'
})

It works well, but I don't think if it's the better solution

回答3:

I use this code and is Work

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

You can change "data-percent" value

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

You can change size like this

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

回答4:

To answer your question:

The text is not centered, why ?

In my experience it's because the line height of the percentage and the line height of canvas are different and the percentage needs extra padding/margin left. So both elements are in a dom box sitting at the same baseline i.e. aligned on bottom 0, left 0.

Vertical Center

The percentage text doesn't float vertically because it's line height is less than the line height of the chart. So it's suppressed/pushed down because it cant rise above the top of it's container.

So to allow the text to float up to the vertical center of the chart you need to set the line height of the percentage span to be the same as the line height of the chart. The text will then float up to the middle of it's line height which will be the middle of the chart.

Horizontal Center

Then there is the horizontal center. Since the text is aligned left 0, you need a right ward "bump" and for that I used some padding-left.

As to whether or not this is a "bug" i dunno. I think it expected that you will edit the CSS as necessary for your project rather than the plugin running this calculation for you... tho it would be a fairly simple thing to compute.

来源：https://stackoverflow.com/questions/20274928/easy-pie-chart-bug-percentage-not-centered

标签

jquery

css

twitter-bootstrap

symfony

pie-chart