Facile camembert : Bug le pourcentage n'est pas centré?

J'ai un projet symfony, j'utilise bootstrap pour le style, et je veux utiliser Facile à Tarte Graphique pour une page de tableau de bord.

Donc, dans la base.html.rameau :

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

Dans mon tableau de bord la page j'ai :

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

Mais j'ai ceci :

Le texte n'est pas centré, pourquoi ?

J'ai essayer d'ajouter ça dans mon css mais ça ne fonctionne pas non plus :

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

Si j'ai vérifier le code html généré, j'ai :

<div class="row">
        <div class="jumbotron">
            <div data-percent="55" id="easy-pie-chart">
                55%
            <canvas height="100" width="100"></canvas></div>
        </div>
    </div>

Il semble manquant style = "width: 100px; height: 100px; line-height: 100px;" dans le bloc div, pourquoi n'est pas ajouté dynamiquement ?

OriginalL'auteur user2178964 | 2013-11-28

2

Cochez cette violon

Vous avez oublié d'ajouter une classe dans l'emballage 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> 
```
Mhhh, je ne comprends pas vraiment, si j'ajoute cette classe, et le CSS pour eux, il n'est pas dynamique. Si je change la taille de la simple camembert en js, le texte n'est pas centré, et de plus, j'ai besoin de mettre à jour le css... Dans la documentation de facile camembert ils ne parlent pas de ça...
Je ne peux pas croire qu'ils n'ont pas un moyen de mettre à jour les règles css des éléments. Vous pouvez faire un workarround vérifier ce violon jsfiddle.net/Palapas/52VtD/764 je vais mettre à jour la réponse
Oui, ça fait bizarre... Votre solution est bonne, mais est-il un moyen pour obtenir l'option "taille" dans la liste de paramètre, pour adapter la position du texte, sans utiliser une variable ?
Avez-vous plusieurs instances du graphique dans la même page? Je peux faire une fonction pour mettre à jour ces valeurs css

OriginalL'auteur ppollono

Grâce à ppollono, j'ai ajouter dans mon 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'
})

Il fonctionne bien, mais je ne pense pas que si c'est la meilleure solution

OriginalL'auteur user2178964

- Je utiliser ce code et est le Travail

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

Vous pouvez modifier les données " % " valeur

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

Vous pouvez changer la taille comme cette

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

OriginalL'auteur OmarAldaja

0

Pour répondre à votre question:

Le texte n'est pas centré, pourquoi ?

Dans mon expérience, c'est parce que la hauteur de la ligne du pourcentage et de la hauteur de la ligne de toile sont différents et le pourcentage des besoins de rembourrage supplémentaire/de la marge de gauche. De sorte que les deux éléments sont dans un dom zone assis à la même ligne de base c'est à dire aligné sur le fond à 0, left 0.

Centre Vertical

Le pourcentage de texte n'est pas flotter à la verticale parce que c'est la ligne d'une hauteur inférieure à la hauteur de la ligne du graphique. Il est donc supprimée/poussé vers le bas parce qu'il ne peut pas s'élever au-dessus du haut de son conteneur.

Afin de permettre le texte de flotter à la verticale du centre du graphique, vous devez définir la ligne de hauteur du pourcentage de la durée sera la même que la hauteur de la ligne du graphique. Le texte sera ensuite flotter au milieu de la hauteur de la ligne, qui sera le milieu du tableau.

Centre Horizontal

Puis il y a le centre horizontal. Puisque le texte est aligné à gauche de 0, vous avez besoin d'un droit de paroisse "bosse" et pour cela j'ai utilisé certains padding-left.

Quant à savoir si ou non il s'agit d'un "bug", je ne sais pas. Je pense qu'il attend de vous que vous allez modifier le CSS nécessaire pour votre projet, plutôt que le plugin exécution de ce calcul pour vous... tho il serait assez simple à calculer.

OriginalL'auteur rism

Vous devez vous connecter pour publier un commentaire.