안녕하세요.
게시물의 추천 비추천 숫자로 이렇게 출력하려면 어떻게 해야할까요?
답변 부탁드립니다.
PHP | PHP 5.x |
---|---|
CMS | XpressEngine |
안녕하세요.
게시물의 추천 비추천 숫자로 이렇게 출력하려면 어떻게 해야할까요?
답변 부탁드립니다.
그래프 구현은 복잡하진 않은 거여서 대강 소스 만들어봤는데 한번 응용해보세요.
추천, 비추천 버튼까지 넣으시려면 잘 배치하셔야 할 겁니다.
대강 요런 모양새가 나오네요.
<div class="vote_blame_bar" style="font-size: 0;"> {@ $vc = $oDocument->get('voted_count'); $bc = $oDocument->get('blamed_count'); $vcr = round(($vc / ($vc + $bc)) * 100, 1); $bcr = round(($bc / ($vc + $bc)) * 100, 1); } <div class="voted_count" style="display: inline-block; width: 40px; font-size: 12px; text-align: right; vertical-align: middle;">{$lang->cmd_vote}</div> <div class="blamed_bar" title="{$bc}({$bcr}%)" style="position: relative; display: inline-block; width: calc(100% - 80px); height: 20px; background-color: #00f; font-size: 12px; color: #fff; text-align: right; vertical-align: middle;"> <span>{$bc}({$bcr}%)</span> <div class="voted_bar" title="{$vc}({$vcr}%)" style="position: absolute; top: 0; left: 0; width: {$vcr}%;height: 20px;background-color: #f00; color: #fff; text-align: left;"> <span>{$vc}({$vcr}%)</span> </div> </div> <div class="blamed_count" style="display: inline-block; width: 40px; font-size: 12px; text-align: left; vertical-align: middle;">{$lang->cmd_vote_down}</div> </div>
일단 추천이나 비추천이 0개일 때 퍼센트가 NaN으로 나오는 문제가 있는 걸 확인했는데, 이건 위의 코드 4행을
$vcr = $vc ? round(($vc / ($vc + $bc)) * 100, 1) : 0; $bcr = $bc ? round(($bc / ($vc + $bc)) * 100, 1) : 0;
으로 바꿔주면 되는 것 같습니다.
<div class="vote_blame_bar" style="font-size: 0;"> {@ $vc = $oDocument->get('voted_count'); $bc = $oDocument->get('blamed_count'); $vcr = $vc ? round(($vc / ($vc + $bc)) * 100, 1) : 0; $bcr = $bc ? round(($bc / ($vc + $bc)) * 100, 1) : 0; } <div class="voted_count" style="display: inline-block; width: 40px; font-size: 12px; text-align: right; vertical-align: middle;">{$lang->cmd_vote}</div> <div class="blamed_bar" title="{$bc}({$bcr}%)" style="position: relative; display: inline-block; width: calc(100% - 80px); height: 20px; background-color: #00f; font-size: 12px; color: #fff; text-align: right; vertical-align: middle;"> <span>{$bc}({$bcr}%)</span> <div class="voted_bar" title="{$vc}({$vcr}%)" style="position: absolute; top: 0; left: 0; width: {$vcr}%;height: 20px;background-color: #f00; color: #fff; text-align: left;"> <span>{$vc}({$vcr}%)</span> </div> </div> <div class="blamed_count" style="display: inline-block; width: 40px; font-size: 12px; text-align: left; vertical-align: middle;">{$lang->cmd_vote_down}</div> </div>