Geek Answers Handbook

Easy Pie Chart: percentage of errors not centered?

I have a symfony project, I use bootstrap for the style, and I want to use the Easy Pie Chart for the toolbar 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>

On my toolbar page:

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

enter image description here

The text is not centered, why?

I am trying to add this to my css, but it does not work either:

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

If I check the code generated by html, 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>

There seems to be no style = "width: 100px; height: 100px; line-height: 100px;" in a div block, why is it not being added dynamically?

+4
source share
4 answers

Tick fiddle

You forgot to add a class to 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

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

, ,

+1

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

"data-percent"

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));
        }
    });
});
+1

:

, ?

, ​​ , /. , , , 0, 0.

, . , /, .

, , , , . , .

. 0, "" , padding-left.

, "", . , , CSS , , ... .

0

More articles:


All Articles