1. 라이브러리 불러오기
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<link href="https://fonts.googleapis.com/css?family=Crete+Round" rel="stylesheet">
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
2. HTML 태그 삽입
<body>
<div id="myChart"></div>
</body>
3. Javascript 코드
// 워드클라우드 모듈불러오기
zingchart.MODULESDIR = 'https://cdn.zingchart.com/modules/';
//워드클라우드 환경설정
var myConfig = {
type: 'wordcloud',
options: {
words: [
{
text: "테슬라",
count: 80
},
{
text: "애플",
count: 70
},
{
text: "아마존",
count: 60
},
{
text: "월마트",
count: 50
},
{
text: "삼성",
count: 40
},
{
text: "현대차",
count: 30
},
{
text: "구글",
count: 20
},
{
text: "넥슨",
count: 10
},
{
text: "SK하이닉스",
count: 25
},
{
text: "LG생활건강",
count: 8
},
{
text: "카카오",
count: 5
},
{
text: "텐센트",
count: 3
},
{
text: "페이스북",
count: 7
},
{
text: "넷마블",
count: 24
},
{
text: "쇼박스",
count: 35
},
{
text: "CJ E&M",
count: 16
},
{
text: "디즈니",
count: 47
},
{
text: "넷플릭스",
count: 19
},
{
text: "기업A",
count: 3
},
{
text: "기업B",
count: 3
},
{
text: "기업C",
count: 3
},
{
text: "기업D",
count: 3
},
{
text: "기업E",
count: 3
},
],
minLength: 5,
ignore: [""],
maxItems: 40,
aspect: 'spiral', // 'flow-top' | 'flow-center'
colorType: 'palette',
palette: ['#D32F2F', '#5D4037', '#1976D2', '#E53935', '#6D4C41', '#1E88E5', '#F44336', '#795548', '#2196F3', '#EF5350', '#8D6E63', '#42A5F5'],
style: {
fontFamily: 'Crete Round',
hoverState: {
backgroundColor: '#D32F2F',
borderRadius: 2,
fontColor: 'white'
},
tooltip: {
text: '%text: %hits',
visible: true,
alpha: 0.9,
backgroundColor: '#1976D2',
borderRadius: 2,
borderColor: 'none',
fontColor: 'white',
fontFamily: 'Georgia',
textAlpha: 1
}
}
},
source: {
//text: '--President Barack Obama<br> Selma 50th anniversary speech<br>March 7, 2015',
//Source: https://obamawhitehouse.archives.gov/the-press-office/2015/03/07/remarks-president-50th-anniversary-selma-montgomery-marches
fontColor: '#64B5F6',
fontSize: 10,
fontFamily: 'Georgia',
fontWeight: 'normal',
marginBottom: '10%'
}
};
//워드클라우드 렌더링
zingchart.render({
id: 'myChart',
data: myConfig,
height: 400,
width: '100%'
});
5. 결과확인
더 자세한 내용은 공식 홈페이지를 참고.
https://www.zingchart.com/docs/chart-types/wordcloud
Word Cloud | ZingChart
Note: See our Word Cloud Gallery for inspiration on all the different word cloud possibilities.
www.zingchart.com
'javascript' 카테고리의 다른 글
| [chart.js] javascript에서 레이더차트 구현하기 (0) | 2022.05.12 |
|---|---|
| [Jquery] 검색어 자동완성 기능 autocomplete, ajax와 연동 (0) | 2022.04.27 |