步骤
此文章基于SpringBoot的动态词云图显示。
1.数据处理
工具:
- Mysql、Jupyter Notebook
数据处理流程:
- 从数据库中读取数据
import pymysql
db = pymysql.connect(host='127.0.0.1',port=3306,user='root',password='1234',database='test',charset='utf8')
cursor = db.cursor()
sql = 'select news_content from newsinfo'
cursor.execute(sql)
result = cursor.fetchall()
db.commit()
cursor.close()
db.close()
- 将数据放入DataFrame
import pandas as pd
data = pd.DataFrame(list(result),columns=['新闻内容'])
data.head()
- 数据清洗
import re
data['新闻内容'] = data['新闻内容'].apply(lambda x : re.sub('?','',x))
data['新闻内容'] = data['新闻内容'].apply(lambda x : re.sub('\xa0','',x))
data['新闻内容'] = data['新闻内容'].apply(lambda x : re.sub('\x00','',x))
data['新闻内容'] = data['新闻内容'].apply(lambda x : re.sub('”','',x))
data['新闻内容'] = data['新闻内容'].apply(lambda x : re.sub('“','',x))
data['新闻内容'] = data['新闻内容'].apply(lambda x : re.sub('!','',x))
data['新闻内容'] = data['新闻内容'].apply(lambda x : re.sub('→','',x))
data['新闻内容'] = data['新闻内容'].apply(lambda x : re.sub('……','',x))
data['新闻内容'] = data['新闻内容'].apply(lambda x : re.sub('\u200b','',x))
data['新闻内容'] = data['新闻内容'].apply(lambda x : re.sub(':','',x))
data['新闻内容'] = data['新闻内容'].apply(lambda x : re.sub('[0-9A-Fa-f]*','',x))
data['新闻内容'] = data['新闻内容'].apply(lambda x : re.sub('▍','',x))
data['新闻内容'] = data['新闻内容'].apply(lambda x : re.sub('\t','',x))
data['新闻内容'] = data['新闻内容'].apply(lambda x : re.sub('\n','',x))
data['新闻内容'] = data['新闻内容'].apply(lambda x : re.sub('x19','',x))
data['新闻内容'] = data['新闻内容'].apply(lambda x : re.sub('·','',x))
data['新闻内容'] = data['新闻内容'].apply(lambda x : re.sub('—','',x))
data['新闻内容'] = data['新闻内容'].apply(lambda x : re.sub(')','',x))
data['新闻内容'] = data['新闻内容'].apply(lambda x : re.sub('(','',x))
data['新闻内容'] = data['新闻内容'].apply(lambda x : re.sub('-','',x))
data['新闻内容'] = data['新闻内容'].apply(lambda x : re.sub(';','',x))
data['新闻内容'] = data['新闻内容'].apply(lambda x : re.sub(':','',x))
data['新闻内容'] = data['新闻内容'].apply(lambda x : re.sub('=','',x))
data['新闻内容'] = data['新闻内容'].apply(lambda x : re.sub('"','',x))
data['新闻内容'] = data['新闻内容'].apply(lambda x : re.sub(';','',x))
data['新闻内容'] = data['新闻内容'].apply(lambda x : re.sub('\'','',x))
data['新闻内容'] = data['新闻内容'].apply(lambda x : re.sub('ontnt','',x))
data['新闻内容'] = data['新闻内容'].apply(lambda x : re.sub('\+','',x))
data['新闻内容'] = data['新闻内容'].apply(lambda x : re.sub('_','',x))
- 分词
import jieba
data['cut_words'] = data['新闻内容'].apply(lambda x : ' '.join(jieba.cut(x)))
- 去停用词
stopwords = pd.read_csv('stopwords.txt',encoding='utf-8',sep='hahaha',header=None,engine='python')
def del_stopwords(words):
output = ''
for word in words:
if word not in stopwords:
output += word
return output
data['cut_words'] = data['cut_words'].apply(del_stopwords)
data.head()
- 内容提取
这里针对所有新闻内容进行词云图展示,所以将所有分词结果合并,由于切分后的词语太多,有些词频较小,因此得进行筛选。
content_all = ' '.join(data['cut_words'])
dict = {}
for word in (content_all.split(' ')):
dict[word] = dict.get(word,0) + 1
list_2 = []
for dic in dict.items():
if dic[1] >= 100 and dic[1] <= 500:
for i in range(dic[1]):
list_2.append(dic[0])
content_all = ''
for i in list_2:
content_all = content_all + i
content_all = content_all +'/'
- 导入数据库
db = pymysql.connect(host='127.0.0.1',port=3306,user='root',password='1234',database='test',charset='utf8')
cursor = db.cursor()
sql = "insert into wordcloud(content,label) value(%s,'AllNews')"
cursor.execute(sql,content_all)
db.commit()
cursor.close()
db.close()
2.导入JS文件
需要引入四个JS文件:
- exporting.js、highcharts.js、oldie.js、wordcloud.js
- 链接:https://pan.baidu.com/s/1bEszrD9itgEju1UzudAIBw
提取码:1234
<head>
<script src="/cloud/exporting.js"></script>
<script src="/cloud/highcharts.js"></script>
<script src="/cloud/wordcloud.js"></script>
<script src="/cloud/oldie.js"></script>
</head>
3.SpringBoot代码
使用工具:IntelliJ IDEA
Mapper:
Service:
ServiceImp:
Controller:
4.编写JavaScript代码
<script th:inline="javascript">
var text=[[${word}]]
var data = text.split(/[,\./ ]+/g)
.reduce(function (arr, word) {
var obj = arr.find(function (obj) {
return obj.name === word;
});
if (obj) {
obj.weight += 1;
} else {
obj = {
name: word,
weight: 1
};
arr.push(obj);
}
return arr;
}, []);
Highcharts.chart('containercloud', {
series: [{
type: 'wordcloud',
data: data
}],
title :{
text:null
}
});
</script>
5.词云图动态显示
<!-- 词云图start-->
<center>
<div class="visitors-area-2 bg-gray pd-top-30 pd-bottom-30">
<div class="container">
<div class="sidebar-area">
<div id="containercloud" style="width: 1100px;height: 300px;"></div>
</div>
</div>
</div>
</center>
<!-- 词云图end-->
6.展示
Controller中Debug断点测试
HTML页面展示:
写在最后
此词云图基于Highchart,想学习更多进入https://www.highcharts.com/
展示了大致的流程,只做了基础的清洗,有缘进来的朋友可以默默支持一下。