basic-tag-cloud 스킨 수정이 안되어서 그런데요 도와주실분

basic-tag-cloud 스킨 수정이 안되어서 그런데요 도와주실분

QA

basic-tag-cloud 스킨 수정이 안되어서 그런데요 도와주실분

답변 1

본문

2083565649_1699748377.9418.png

전세계 이슈 태그들이 너무 글쓰기 작아서 그런데요 소스 수정해도 안바뀌어서요

 

고수님들 도와주세요

 

<?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) 참고하시면됩니다.

 

조언한가지 드린다면?

항상 무엇을 원한는 값을 보일려구 하지마시구 항상 오류와 경고가 있는지 수시로 체크하시고 이같은 오류와 경고를 무시하시지마시고 해결하시고.. 그다음 내가 원한 는 그림을 그려볼려구 하십시오.

오류와 경고를 해결하지않고 넘어간다면 또다른곳에 문제 되는 부분은 항상 나오게 되어 있습니다. 보기에는 원한는 그림이 나왔다하더라고 또한 사용자 입장에서 문제 없어보여도 , 분명 언제가는 어느곳에서 사용자 입장에서는 짜증스러운 문제가 나오기 마련입니다.

항상 느림의 미학으로 찬찬히 하세요 응원합니다. 화이팅!~

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 7
© SIRSOFT
현재 페이지 제일 처음으로