[Anychart] tag cloud 생성 시 글자 크기가 일정한 문제 해결한 과정

Anychart(자바스크립트 라이브러리)로 tag cloud 생성했을 때 다음과 같은 문제가 발생했다.

value 값의 크기에 따라 글자 크기가 달라야 하는데 모두 글자 크기가 일정한 것이다.

value 값이 다름에도 글자 크기가 일정한 모습

value 값

 

 

 

공식문서에 나온 샘플을 그대로 복붙하면 해결되지 않을까란 생각에 아래와 같이 수정 및 추가를 했다.

공식 문서에 나온 샘플(https://www.anychart.com/products/anychart/gallery/Tag_Cloud/Alice_In_Wonderland.php)

 

다음 코드를 JSP에 수정 및 추가

<script src="${contextPath}/js/bd/ojt4.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-tag-cloud.min.js"></script>
<link href="https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css" type="text/css" rel="stylesheet">
<link href="https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css" type="text/css" rel="stylesheet">
<style type="text/css">

  html,
  body,
  #container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }

</style>

 

JS에 아래 코드를 추가

		        // set chart title
		        chart
		          .title(
		            'Top 200 word\'s in "Alice\'s Adventures in Wonderland" by Lewis Carroll'
		          )
		          // set array of angles, by which words will be placed
		          .angles([0])
		          // enabled color range
		          .colorRange(true)
		          // set color scale
		          .colorScale(anychart.scales.ordinalColor())
		          // set settings for normal state
		          .normal({
		            fontFamily: 'Times New Roman'
		          })
		          // set settings for hovered state
		          .hovered({
		            fill: '#df8892'
		          })
		          // set settings for selected state
		          .selected({
		            fill: '#df8892',
		            fontWeight: 'bold'
		          });

 

 

하지만 결과는 다음과 같았다.

value 값이 잘 적용되어 있는 것을 알 수 있으나, 글자 크기 문제는 그대로였다. 

 

 

혹시나 height가 낮은 게 문제가 아닐까 싶어 height를 500px로 지정했으나 문제는 해결되지 않았다.

 

 

그래서 F12를 눌러서 코드를 확인해 보는데, 여기에서는 각 데이터마다 font size가 달랐다.

그런데 CSS를 보니까 font-size가 12px로 important가 되어있었다. 

그래서 해당 CSS파일에서 font-size를 제거해줬더니 원하는 대로 나오게 되었다.

 

오늘도 문제 해결