basic-tag-cloud 스킨 수정이 안되어서 그런데요 도와주실분
관련링크
본문
전세계 이슈 태그들이 너무 글쓰기 작아서 그런데요 소스 수정해도 안바뀌어서요
고수님들 도와주세요
<?php
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
add_stylesheet('<link rel="stylesheet" href="'.$popular_skin_url.'/style.css">', 0);
if( isset($list) && is_array($list) ){
$sec = ', ';
$chart_arr = '';
for ($i=0; $i<count($list); $i++) {
if(!$list[$i]['pp_word']) continue;
$chart_arr .= '{"tag": "'.$list[$i]['pp_word'].'","count": "'.$list[$i]['cnt'].'"}'.$sec;
}
$chart_arr = substr($chart_arr, 0, strlen($chart_arr)-strlen($sec));
}
?>
<!-- Styles -->
<style>
#chartdiv {
width: 100%;
height: 300px;
}
</style>
<!-- Resources -->
<script src="<?php echo $popular_skin_url;?>/js/core.js"></script>
<script src="<?php echo $popular_skin_url;?>/js/charts.js"></script>
<script src="<?php echo $popular_skin_url;?>/js/wordCloud.js"></script>
<script src="<?php echo $popular_skin_url;?>/js/animated.js"></script>
<!-- Chart code -->
<script>
am4core.ready(function() {
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
var chart = am4core.create("chartdiv", am4plugins_wordCloud.WordCloud);
chart.fontFamily = "Malgun Gothic";
var series = chart.series.push(new am4plugins_wordCloud.WordCloudSeries());
series.randomness = 0.1;
series.rotationThreshold = 0.5;
series.data = [ <?php echo $chart_arr;?> ];
series.dataFields.word = "tag";
series.dataFields.value = "count";
series.heatRules.push({
"target": series.labels.template,
"property": "fill",
"min": am4core.color("#0000CC"),
"max": am4core.color("#CC00CC"),
"dataField": "value"
});
series.labels.template.url = "<?php echo G5_BBS_URL;?>/search.php?sfl=wr_subject&sop=and&stx={word}";
series.labels.template.urlTarget = "_blank";
series.labels.template.tooltipText = "{word}: {value}";
var hoverState = series.labels.template.states.create("hover");
hoverState.properties.fill = am4core.color("#FF0000");
/*
var subtitle = chart.titles.create();
subtitle.text = "(click to open)";
var title = chart.titles.create();
title.text = "Most Popular Tags @ StackOverflow";
title.fontSize = 20;
title.fontWeight = "800";
*/
}); // end am4core.ready()
</script>
<div class="popular_lt">
<h2 class="lat_title"><a href="#">전세계 이슈</a></h2>
<!-- HTML -->
<div id="chartdiv"></div>
<a href="#" class="lt_more"><span class="sound_only">인기검색어</span><i class="fa fa-plus" aria-hidden="true"></i><span class="sound_only"> 더보기</span></a>
</div>
----------------------------------------
css
@charset "utf-8";
.popular_lt{position:relative;margin-bottom:20px;overflow:hidden;border: 1px solid #c6cacc;background:#fff; clear:both;}
.popular_lt .lat_title {display:block;background:#fcfcfc;padding:0 20px;line-height:45px;font-size:1.083em;border-bottom:1px solid #e2e2e2;color:#253dbe;}
.popular_lt .lat_title a{color:#253dbe;display:inline-block;position:relative}
.popular_lt .lat_title a:after{position:absolute;bottom:-1px;left:0;width:100%;height:2px;background:#253dbe;content:''}
.popular_lt .lt_more {position:absolute;top:11px;right:10px;display:block;width:25px;line-height:25px;color:#aaa;border-radius:3px;text-align:center;}
.popular_lt .lt_more:hover{color:#777}
#popular {padding:0;}
#popular .popular {
position:relative;
display:inline-block;
margin: 0 6px 3px 0;
}
#popular .popular>span.txt {
border: 1px solid #e3e3e3;
color: #666;
display: inline-block;
font-size: 11px;
font-weight: 400;
letter-spacing: 1px;
padding: 8px 9px;
text-transform: uppercase;
float:left;
}
#popular .popular>span.num {
background: rgba(0,0,0,0.01);
border-color: #e3e3e3;
border-style: solid;
border-width: 1px;
display: inline-block;
font-size: 11px;
padding: 8px 9px 8px 11px;
color: #aaa;
position: relative;
margin-left: -1px;
float:left;
}
#popular .popular>span.num:before {
border-color: rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) #C6C6C6;
border-style: solid;
border-width: 4px;
content: "";
display: block;
left: 0px;
position: absolute;
top: 12px;
}
#popular .popular>span.num:after {
border-color: rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) #fff;
border-style: solid;
border-width: 4px;
content: "";
display: block;
left: -1px;
position: absolute;
top: 12px;
}
사이트 링크 추가했습니다.
사이트 하단에 있습니다.
고수님들 도와주세요
그럼 만수무강하세요
답변 1
먼저 오류 및 경고를 잡고 시작하십시오.
첫째
g5/:63 Uncaught SyntaxError: Unexpected token ')'
jquery-migrate-1.4.1.min.js?ver=210618:2 JQMIGRATE: Migrate is installed, version 1.4.1
이런 오류가 있습니다. Uncaught SyntaxError: Unexpected token ')'는 코드에서 의도하지 않은 괄호 ')'가 발견되어 발생하는 JavaScript 구문 오류입 니다 해당오류 코드를찾아 수정해주시기 바랍니다.
또한 jQuery의 이전 버전에서 사용되던 기능들이 최신 버전에서는 지원되지 않을 수 있으니 참고하시기 바랍니다.
둘째
html5 캔버스 차트기능인것 같은데요 일단 경고부터 잡아보도록 하세요
경고의 내용은 Canvas2D 컨텍스트에서 getImageData 작업을 여러 번 수행할 때,
성능 향상을 위해 willReadFrequently 속성을 true로 설정 해 주세요
셋째
#chartdiv { width: 100%; height: 300px; } 현재 이렇게 설정했는데도 차트가 링크주소대로 아주작게 나온다는것은 이차트를 위의 부모,할배가 작아도 너무작은 공간을 가지고있다는겁니다.
하여 먼저 width:500px !important; 로 먼저 강제로 사이즈가 커지는 지 체크 해보시고 문제점을 해결하시기바랍니다.
그리고 모든 Word Cloud에서 개별 단어의 크기는 value 필드에 의해 결정되므로, 현재는 모든 단어의 크기는 디폴트 입니다. 즉 현재 여기서는 폰트 크기 설정값은 없다라는거죠.
그렇다면 여기서 임의적으로 레이블안의 폰트를 설정할려면, 아래과 같이 함수 안에 폰트 설정값을 주시면됩니다.
series.labels.template.fontSize = 20;
HTML 표준 (whatwg.org) 참고하시면됩니다.
조언한가지 드린다면?
항상 무엇을 원한는 값을 보일려구 하지마시구 항상 오류와 경고가 있는지 수시로 체크하시고 이같은 오류와 경고를 무시하시지마시고 해결하시고.. 그다음 내가 원한 는 그림을 그려볼려구 하십시오.
오류와 경고를 해결하지않고 넘어간다면 또다른곳에 문제 되는 부분은 항상 나오게 되어 있습니다. 보기에는 원한는 그림이 나왔다하더라고 또한 사용자 입장에서 문제 없어보여도 , 분명 언제가는 어느곳에서 사용자 입장에서는 짜증스러운 문제가 나오기 마련입니다.
항상 느림의 미학으로 찬찬히 하세요 응원합니다. 화이팅!~