簡單的餅圖：錯誤百分比不居中？

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

它似乎缺少風格= 「width：100px; height：100px; line-height：100px;」在div塊中，爲什麼不動態添加？

來源

2013-11-28 user2178964

入住這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>

來源

2013-11-28 22:10:39 ppollono

Mhhh，我不太明白，如果我添加這個類，併爲他們的CSS，它不是動態的。如果我在js中更改簡易餅圖的大小，文本就不再居中了，我需要更新css ...在簡單的餅圖文檔中，他們不會談論這個... – user2178964

我不能說相信他們沒有辦法更新元素的css規則。你可以做一個workarround檢查這個小提琴http://jsfiddle.net/Palapas/52VtD/764/ 我會更新答案 – ppollono

是的，這似乎很奇怪... 你的解決方案是好的，但有沒有辦法在參數列表中獲取「size」選項，以適應文本位置，而不使用變量？ – user2178964

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

它運作良好，但我不認爲如果這是更好的解決方案

來源

2013-11-29 12:49:40 user2178964

我使用此代碼，並且是Wor ķ

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

您可以更改「數據％的」價值

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

改變大小

來源

2013-12-17 20:28:54 OmarAldaja

要回答你的問題：

文本不居中，爲什麼？

根據我的經驗，這是因爲百分比的線高度和畫布的線高度不同，並且百分比需要額外的填充/餘量。因此，這兩個元素都位於同一基線上的dom框中，即在底部0，左側0對齊。因爲它是線高度小於圖表的行高

垂直中心

百分比文本不垂直浮動。所以它被壓制/推下來，因爲它不能超出容器的頂部。

因此，要允許文本上浮到圖表的垂直中心，您需要將百分比跨度的行高設置爲與圖表的行高相同。文本將浮起到它的行高的中間，這將是圖表的中間。

水平居中

再有就是水平中心。由於文本左對齊，你需要一個正確的病房「凹凸」，爲此我使用了一些填充左。

至於這是否是一個「bug」，我不知道。我認爲它預計你將編輯你的項目所需的CSS，而不是爲你運行這個計算的插件......這將是一個相當簡單的事情來計算。

來源

2014-05-19 22:48:59 rism

簡單的餅圖：錯誤百分比不居中？

回答

相關問題