基于SpringBoot的动态词云图显示

最新推荐文章于 2024-05-01 16:49:56 发布

机智的小神仙儿

最新推荐文章于 2024-05-01 16:49:56 发布

阅读量2.3k

点赞数 3

文章标签： spring

本文链接：https://blog.csdn.net/weixin_45956028/article/details/112398701

版权

HTML上动态显示词云图

步骤

步骤

此文章基于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/
展示了大致的流程，只做了基础的清洗，有缘进来的朋友可以默默支持一下。

机智的小神仙儿

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
5
评论
基于SpringBoot的动态词云图显示

HTML上动态显示词云图步骤1.数据处理2.导入JS文件3.SpringBoot代码4.编写JavaScript代码5.词云图动态显示6.展示写在最后步骤此文章基于SpringBoot的动态词云图显示。1.数据处理工具：Mysql、Jupyter Notebook数据处理流程：从数据库中读取数据import pymysqldb = pymysql.connect(host='127.0.0.1',port=3306,user='root',password='1234',datab
复制链接

扫一扫