前端 | 数据统计及页面数据展现

文章目录

  • 📚实现效果
  • 📚模块实现解析
    • 🐇html
    • 🐇css
    • 🐇javascript

📚实现效果

  • 折线图分别展现当前累计单词总数及每篇新增单词数,鼠标悬浮读取具体数值。
    在这里插入图片描述
  • 数值统计
    在这里插入图片描述
  • 词云图展现,及点击查看大图
    在这里插入图片描述
    在这里插入图片描述

📚模块实现解析

🐇html

  • 搭框架
    <div class="count"><div class="wordcount"><div id="cloudtitle">咱就是说,<span>成就感拉满</span></div><div id="line"></div></div>  <div id="totalcount"></div><div class="wordcount2"><div id="cloudtitle">单词们的词频<span>词云</span></div><p style="font-size: 0.9vw; color: #575656;">电脑端点击可<span style="color: #ecbc41; font-size: 1vw;">查看大图</span></p><div id="image"><img src="./images/wordcloud.png" alt="词云图" style="width:90%;aspect-ratio: 16/9; border: 1.5px solid #ccc; border-radius: 15px;" onclick="showLargeImage(this)"></div></div>  
    </div>
    

🐇css

  • 主要是高亮字体的单独设置
    body{margin: 0;padding: 0;background-color: #f5f3f2;
    }.count{margin: 0 auto;/* background-color: pink; */position: absolute;left: 3%;top:8%;width: 28%;font-family: serif;font-size: 1.5vw;text-align: center;
    }
    .count span{font-size: 2vw;font-family: 'serif';color: #ecbc41;font-weight: bold;
    }
    #special{font-size: 1.8vw;color: #2966cf;font-weight: bold;
    }/* 标题 */
    #cloudtitle{margin: 0 auto;margin-top: 35px;
    }
    #cloudtitle span{font-size: 1.5vw;margin-bottom: 3px;font-weight: bold;color: #2966cf;
    }/* 折线图 */
    .wordcount{width: 100%;margin-top: -20px;
    }
    #line{width: 100%;height: 300px;top: -45px;
    }/* 数据统计 */
    #totalcount{width: 100%;margin-top: -20px;
    }/* 词云图 */
    .wordcount2{width: 100%;/* height: 280px; */margin-top: 30px;
    }
    #image{margin: 0 auto;
    }
    

🐇javascript

  • 导入数据及词云图,均来自于之前处理好后导出的数据文件。
  • 折线图部分,套用自可视化 | 【echarts】渐变条形+折线复合图
    var myChart = echarts.init(document.getElementById('line'));
    var request = new XMLHttpRequest();
    request.open('GET', './word_count.txt', true);request.onreadystatechange = function() {if (request.readyState === 4 && request.status === 200) {var rawText = request.responseText;var lines = rawText.split('\n');var TED = [];var counts = [];var diffCounts = [];// 解析每行的TED打卡号和单词数,并存入相应数组lines.forEach(function(line) {var data = line.split(' ');TED.push(data[0]);counts.push(parseInt(data[1], 10));});for (var i = 0; i < counts.length; i++) {if (i === 0) {diffCounts.push(0); } else {diffCounts.push(counts[i] - counts[i - 1]);}}// 指定图表的配置项和数据var option = {tooltip: {trigger: 'axis',formatter: function (params) {return '截至第' + params[0].name + '篇: ' + '单词数'+ params[0].value + '个<br/>' + '新增: ' + (params[1].value !== 0 ? params[1].value : '无数据');}},xAxis: {data: TED, axisLine: {lineStyle: {color: '#151d29',width: 2}},axisLabel:{textStyle: {color: '#333', fontSize: 8, }}},yAxis: [{type: 'value',show: true,interval: 400,axisLine: {lineStyle: {color: '#151d29',width: 2}},axisLabel:{textStyle: {color: '#333', fontSize: 8, }}},{type: 'value', // 添加第二个Y轴show: true,interval: 400,axisLine: {lineStyle: {color: '#151d29',width: 2}},axisLabel:{textStyle: {color: '#333', fontSize: 8, }}}],series: [{type: 'line',data: counts,yAxisIndex: 0,itemStyle: {color: '#2966cf'}},{type: 'line', data: diffCounts, yAxisIndex: 1,itemStyle: {color: '#ecbc41' }},{type: 'bar',data: counts,itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#aed0ee' },{ offset: 1, color: '#f6f9e4' }])}}],dataZoom: [{show: true,start: 0,end: 100},{type: 'inside',start: 0,end: 100}]};myChart.setOption(option);
    }
    };request.send();window.addEventListener('resize', function() {myChart.resize();
    });
    
    • 注意到折线图最后有NaN空值,排查后发现是导入数据默认最后一行换行,有一行空数据。
      在这里插入图片描述
      在这里插入图片描述

    • 解决办法:

       lines.forEach(function(line) {var data = line.split(' ');// years.push(data[0]);// counts.push(parseInt(data[1], 10));// 排除引入数据最后的空行if (data.length === 2) {years.push(data[0]);counts.push(parseInt(data[1], 10));}
      });
      
    • 实现视口变化图表大小实时更新↓

      window.addEventListener('resize', function() {myChart.resize();
      });
      

  • 数据统计部分
    fetch('./output_word.json')
    .then(response => response.json())
    .then(data => {// 找到所有单词的 numbers 数组中的最大值,最大的文章编号即为总TED文章篇数let maxNumber = -Infinity;data.forEach(word => {let currentMax = Math.max(...word.numbers);if (currentMax > maxNumber) {maxNumber = currentMax;}});let totalTedArticles = maxNumber; let totalUniqueWords = data.length;let mostFrequentWords = data.reduce((max, word) => {if (word.count > max[0].count) {max = [word];} else if (word.count === max[0].count) {max.push(word);}return max;}, [{ count: -Infinity }]);// 创建显示统计信息的元素const statsContainer = document.createElement('div');// 统计数据let highFrequentWords = data.filter(word => word.count > 3); // 高频词汇let mediumFrequentWords = data.filter(word => word.count >= 2 && word.count <= 3); // 中频词汇let lowFrequentWords = data.filter(word => word.count === 1); // 低频词汇statsContainer.innerHTML = `截至目前,<br><span id='special'>右一同学</span>已经阅读了<span>${totalTedArticles}</span>篇ted。<br><br>涉及到了<span>${totalUniqueWords}</span>个单词。假定出现三次以上为高频词,一次以上为中频词。<br><br>当前有高频词汇:<span id='special'>${highFrequentWords.length} </span>个,<br><br>中频词汇:<span id='special'>${mediumFrequentWords.length} </span>个,<br><br>低频词汇:<span id='special'>${lowFrequentWords.length}</span> 个。<br><br>其中梳理频次最多的单词是:<br>`; mostFrequentWords.forEach((word, index) => {let text = `<br><span id='special'>"${word.word}"</span>,<br>出现了<span>${word.count}</span>次,在第<span>${word.numbers.join(', ')}</span>篇TED里都出现了。`if (index !== mostFrequentWords.length - 1) {text += '<br>';}statsContainer.innerHTML += text;});// 将统计信息添加到特定的 div 中const countContainer = document.getElementById('totalcount');countContainer.appendChild(statsContainer);
    })
    .catch(error => console.error('无法加载数据:', error));// 单击放大
    function showLargeImage(img) {var popup = window.open("", "_blank");// 在弹窗中显示原始大小的图片,并通过CSS样式使其居中显示popup.document.write('<style>body {display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0;} img {max-width: 90%; max-height: 90%; object-fit: contain;}</style>');popup.document.write('<img src="' + img.src + '">');
    }
    
    • 找到所有TED打卡号的最大值,以得到TED文章的总篇数,然后统计单词总数以及高频词汇、中频词汇和低频词汇的数量,以及梳理频次最多的单词,并将统计信息应用到特定的div中。
    • showLargeImage实现单击图片时,在新窗口中打开,并居中显示。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/687451.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

一.基础篇:基础语法

目录 1. 注释 2. 字面量 3. 变量 4. 基本数据类型 5. 键盘录入 6.运算符 6.1 算符运算符 6.2 算术运算符-隐式转换 6.3 算数运算符-强制转换 6.4 自增和自减运算符 6.5 四逻辑运算符 6.6 短路逻辑运算符 6.7 三元运算符 6.8 运算符优先级 7. 流程控制语句 7.1 …

win10 miniconda始终无法在指定的位置创建虚拟环境,原来是管理员权限问题

当我想用conda创建虚拟环境时 envs_dirs: F:\miniconda3\envsC:\Users\fengx.conda\envsC:\Users\fengx\AppData\Local\conda\conda\envs 创建的虚拟环境始终在C:\Users\fengx.conda\envs\xxxx这个位置下&#xff0c; 我已经明显指定了位置是在F:\miniconda3\envs下&#xff…

能远程一起观看电影和直播的SyncTV

什么是 SyncTV &#xff1f; SyncTV 是一个允许您远程一起观看电影和直播的程序。它提供了同步观看、剧院和代理功能。使用 SyncTV&#xff0c;您可以与朋友和家人一起观看视频和直播&#xff0c;无论他们在哪里。SyncTV 的同步观看功能确保所有观看视频的人都在同一点上。这意…

[muduo网络库]——muduo库三大核心组件之EventLoop类(剖析muduo网络库核心部分、设计思想)

接着上一节[muduo网络库]——muduo库三大核心组件之 Poller/EpollPoller类&#xff08;剖析muduo网络库核心部分、设计思想&#xff09;&#xff0c;我们来剖析muduo库中最后一类核心组件&#xff0c;EventLoop类。 先回顾一下三大核心组件之间的关系。 接着我们进入正题。 Ev…

【C++】CentOS环境搭建-快速升级G++版本

【C】CentOS环境搭建-快速升级G版本 1. 安装CentOS的软件集仓库&#xff1a;2. 安装你想要的devtoolset版本&#xff0c;例如devtoolset-9&#xff1a;3. 启用新版本的编译器&#xff1a;4. 检查G版本&#xff1a; 在CentOS系统中升级G编译器通常涉及使用devtoolset或者SCL&…

gin框架学习笔记(二) ——相关数据与文件的响应

前言 在看是今天的内容之前&#xff0c;我们收先来探究一下&#xff1a;什么是Web应用工作的原理&#xff1f;当然这个问题其实论述起来是很麻烦的&#xff0c;但是我们将它无限的缩小&#xff0c;其实可以简化为一个C/S模型&#xff0c;客户端(Client)负责发送请求&#xff0…

docker 容器无法直接读取宿主机文件

最近一个需求, 要在后端直接使用代码直接生成 pdf 文档, 由于使用的 apache 的工具包, 该工具包无法直接解析中文字体, 需要导入外部 中文插件包, 相关代码如下: PDPage page new PDPage(PDRectangle.A4);document.addPage(page);PDFont fontFile PDType0Font.load(document…

C++ VScode: launch: program ...... dose not exist

VScode: launch: program … dose not exist 介绍 参考VS Code 配置 C/C 编程运行环境&#xff08;保姆级教程&#xff09;教程配置了VSCode。在配置launch.json适用多个.c 文件编译时&#xff0c;弹出下面错误。 原因和解决方法 是task.json 默认配置的问题。 默认的 cwd参…

Redis20种使用场景

Redis20种使用场景 1缓存2抽奖3Set实现点赞/收藏功能4排行榜5PV统计&#xff08;incr自增计数&#xff09;6UV统计&#xff08;HeyperLogLog&#xff09;7去重&#xff08;BloomFiler&#xff09;8用户签到&#xff08;BitMap&#xff09;9GEO搜附近10简单限流11全局ID12简单分…

AVL树的旋转

目录 1.平衡因子 2.旋转 a.节点定义 b.插入 插入 平衡因子更新 旋转 左单旋 右单旋 右左双旋 左右双旋 3.AVL树的验证 1.平衡因子 我们知道搜索二叉树有缺陷&#xff0c;就是不平衡&#xff0c;比如下面的树 什么是搜索树的平衡&#xff1f;就是每个节点的左右子树的…

机器学习——6.模型训练案例: 预测儿童神经缺陷分类TD/ADHD

案例目的 有一份EXCEL标注数据&#xff0c;如下&#xff0c;训练出合适的模型来预测儿童神经缺陷分类。 参考文章&#xff1a;机器学习——5.案例: 乳腺癌预测-CSDN博客 代码逻辑步骤 读取数据训练集与测试集拆分数据标准化数据转化为Pytorch张量label维度转换定义模型定义损…

Hive的文件存储格式

TEXTFILE 文本文件,默认的文件存储格式,内容是可以直接查看,用来保存非结构化数据; 特点:文本文件的格式一旦定义就无法改变. 除TEXTFILE外,其他文件存储格式的表不能直接从本地文件导入数据,数据要先导入到textfile格式的表中, 然后再从表中用insert导入SequenceFile,RCFile,…